折叠隐藏文字
- 快捷键：span*6，然后敲一个tap键，会生成6个span标签
- 写业务style之前，需要先清除style的内置样式
- 也就是在style里面写上
* {margin: 0;padding: 0;} - 注意body的
height:100vh;不要写100% - 弹性盒子能使子元素垂直居中的条件：弹性盒子本身具备高度
- 使用>直接控制子元素，而不会影响到孙元素
body {background-color:#003a8c;width: 100%;height: 100vh;display: flex;}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>被折叠隐藏的字符</title><style>* {margin: 0;padding: 0;}body {background-color:#003a8c;width: 100%;height: 100vh;display: flex;}#char1 {/* width: 100px;height: 100px; */background-color: #fadb14;margin: auto;border-radius: 85px;padding: 0 50px;}.my-span {font-size: 130px;color: #fff;/* 把span改为行内块元素，才可以改变其宽度 */display: inline-block;/* 给变化的span添加动画效果 */transition: 1s;}/* 隐藏字母的样式 */.my-hide {opacity: 0;width: 0;}/* 使用>直接控制子元素，而不会影响到孙元素 *//* 当鼠标悬浮在div上的时候，显示隐藏的span标签 */#char1:hover>span.my-hide {opacity: 1;/* width: auto; *//* 过渡动画的实现条件:宽度确定 */width: 70px;}</style>
</head>
<body><div id="char1"><span class="my-span">J</span><span class="my-span my-hide">a</span><span class="my-span my-hide">v</span><span class="my-span my-hide">a</span><span class="my-span">E</span><span class="my-span my-hide">E</span></div>
</body>
</html>
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>被折叠隐藏的字符</title><style>* {margin: 0;padding: 0;}.char1 {/* width: 100px;height: 100px; */background-color: #fadb14;margin: auto;border-radius: 85px;padding: 0 50px;}.my-span {font-size: 130px;color: #fff;/* 把span改为行内块元素，才可以改变其宽度 */display: inline-block;/* 给变化的span添加动画效果 */transition: 1s;}/* 隐藏字母的样式 */.my-hide {opacity: 0;width: 0;}/* 使用>直接控制子元素，而不会影响到孙元素 *//* 当鼠标悬浮在div上的时候，显示隐藏的span标签 */.char1:hover>span.my-hide {opacity: 1;/* width: auto; *//* 过渡动画的实现条件:宽度确定 */width: 100px;}.my-div-top {width: 100%;height: 50vh;background-color:#003a8c;display: flex;}.my-div-bottom {width: 100%;height: 50vh;background-color:#003a8c;display: flex;}/* 写死div宽度，避免发生变化，影响其他布局 */.my-fix-width {width: 580px;text-align: center;}</style>
</head>
<body><div class="my-div-top"><div class="char1"><span class="my-span">C</span><span class="my-span my-hide">O</span><span class="my-span my-hide">R</span><span class="my-span my-hide">N</span><span class="my-span">6</span></div><div class="char1"><span class="my-span">C</span><span class="my-span my-hide">O</span><span class="my-span my-hide">R</span><span class="my-span my-hide">N</span><span class="my-span">6</span></div></div><div class="my-div-bottom"><div class="char1 my-fix-width"><span class="my-span">C</span><span class="my-span my-hide">O</span><span class="my-span my-hide">R</span><span class="my-span my-hide">N</span><span class="my-span">6</span></div></div>
</body>
</html>
发光复选框
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>复选框</title><style>* {margin: 0;padding: 0;}body {width: 100%;height: 100vh;background-color: #fa8c16;display: flex;}.my-checkbox {display: block;width: 200px;height: 80px;margin: auto;/* 去掉复选框的显示效果 */-webkit-appearance: none;-moz-appearance: none;/* 去掉复选框的边框 */outline: none;border: 5px solid #888888;/* 宽高里较小值的一半 */border-radius: 40px;background: linear-gradient(to bottom, #5B5B5B, #F0F0F0);/* 可以在控制台调整参数值，第一个参数是阴影在x方向上的偏移，第二个参数是y方向偏移 *//* 添加第二个阴影，只需要加一个逗号 *//* 第一个参数设置为inset，变为内阴影 */box-shadow: 8px 6px 20px #888888, inset 5px -5px 30px #333333;/* 父元素相对定位：参考元素之前的位置，进行偏移 *//* 只设置相对定位，不做其他任何改变，元素保持原来位置不变 */position: relative;transition: 0.5s;}/* 伪元素：为已知的元素添加一个子元素 *//* 在html标签里是找不到伪元素的位置的，但它确实被添加进来了 *//* 通过before，after控制添加伪元素的顺序 *//* before：在所有子元素的最前面添加一个伪元素 *//* 黑色背景框是第一个伪元素，小灯是第二个伪元素，只有这样小灯才能在黑色背景的上面 *//* 滑动钮大的灰色部分 */.my-checkbox::before {/* 只有标签，没有标签内容的伪元素 *//* 伪元素默认为行内元素，行内元素不受宽高影响 *//* 要想使得设置的宽高应用于伪元素，需要将它设置为块元素 */display: block;content: "";width: 120px;height: 60px;background: linear-gradient(to top, #000, #6B6B6B);border: 5px solid #555555;border-radius: 35px;/* 绝对定位必须设置左边距与右边距 */position: absolute;left: 0;top: 0;/* 给要动的元素，添加过渡样式 */transition: 0.5s;}/* 滑动钮小的亮光部分 */.my-checkbox::after {display: block;content: "";width: 10px;height: 10px;background: darkgray;border-radius: 50%;position: absolute;left: 90px;/* top50%的参照系是，父元素的50%，但是，是指上边缘位于父元素的50% *//* 如果元素很大，那么会偏下 */top: 50%;/* 调整方法，第一个参数0表示x方向不偏移，第二个参数表示在y方向上偏移*//* 并且此时的50%是指元素自己高度的50% */transform: translate(0, -50%);transition: 0.5s;box-shadow: 0 0 0 #fa8c16;}/* 复选框选中以后,对伪类before的样式 */.my-checkbox:checked::before {left: 60px;}/* 复选框选中以后,对伪类after的样式 */.my-checkbox:checked::after {left: 150px;background-color: #fa8c16;/* 泛光效果 */box-shadow: 0 0 15px #fa8c16;}/* 复选框选中以后,自己的样式 */.my-checkbox:checked {border: 5px solid #fa8c16;background: linear-gradient(to bottom, #ad4e00, #ffd591);box-shadow: 8px 6px 20px #888888, inset 5px -5px 30px #fa8c16;}</style>
</head>
<body><input type="checkbox" class="my-checkbox"/>
</body>
</html>
翻书插件turn.js
- 下载必要的js文件
- 百度turn.js，下载并引入
- 由于以上两个插件基于1.7+的jquery，因此下载并引入jquery.js
- 下载并引入，用于区别html4与html5
加了min的js文件，是部署好的，体积更小，建议使用；并且区分了html4与html5两个版本，必须都引入；代码通过yepnope函数手动区分html版本
以下js文件，用于区分html4与html5
注意，jquery必须首先引入，它是基础
<!DOCTYPE html>
<!--[if !IE]><!--><html lang="zh-cn"><!--<![endif]-->
<!--[if gt IE 9]><html class="ie10" lang="zh-cn"><![endif]-->
<!--[if IE 9]><html class="ie9 lte9" lang="zh-cn"><![endif]-->
<!--[if IE 8]><html class="ie8 lte9 no-css3" lang="zh-cn"><![endif]-->
<!--[if IE 7]><html class="ie7 lte9 lte7 no-css3" lang="zh-cn"><![endif]-->
<!--[if lte IE 6]><html class="ie6 lte9 lte7 no-css3" lang="zh-cn"><![endif]-->
<head lang="zh-CN"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/jquery.min.1.7.js"></script><script src="../js/modernizr.2.5.3.min.js"></script>
</head>
<body><div id="flipbook"><div class="hard"> Turn.js </div><div class="hard"></div><div> Page 1 </div><div> Page 2 </div><div> Page 3 </div><div> Page 4 </div><div class="hard"></div><div class="hard"></div></div><script type="text/javascript">// 检查该网页是否支持HTML5，若不支持，使用HTML4版本turn.jsyepnope({test:Modernizr.csstransforms, // 这是一个变量yep:['../js/turn.min.js'],nope:['../js/turn.html4.min.js'],both:[''],// 上述判断完成后，再使用正确版本的turn.js将div渲染为书页complete: function() {$("#flipbook").turn({width: 400,height: 300,autoCenter: true});}});</script>
</body>
</html>
