0%
图片加速旋转特效
1 2 3 4 5 6 7 8 9 10
| img:hover{ transform: rotate(666turn); transition-delay: 1s; transition-property: all; transition-duration: 59s; transition-timing-function: cubic-bezier(.34,0,.84,1); -moz-transition-timing-function: cubic-bezier(.34,0,.84,1); -webkit-transition-timing-function: cubic-bezier(.34,0,.84,1); -o-transition-timing-function: cubic-bezier(.34,0,.84,1); }
|
浮云特效
html example
1 2
| <div id="mid-ground" class="wall"></div> <div id="for-eground" class="wall"></div>
|
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| @-webkit-keyframes STAR-MOVE { from { background-position:0% 0%; } to { background-position:600% 0%; } }@keyframes STAR-MOVE { from { background-position:0% 0%; } to { background-position:600% 0%; } } .wall { position:absolute; top:0; left:0; bottom:0; right:0; } div#mid-ground { background:url('midground.png') repeat 20% 0%; //图片地址:http://a.biugle.cn/img/midground.png z-index:0; -webkit-animation:STAR-MOVE 90s linear infinite; -moz-animation:STAR-MOVE 90s linear infinite; -ms-animation:STAR-MOVE 90s linear infinite; animation:STAR-MOVE 90s linear infinite; animation-direction:alternate; } div#fore-ground { background:url('foreground.png') repeat 35% 0%; //图片地址:http://a.biugle.cn/img/foreground.png z-index:0; -webkit-animation:STAR-MOVE 55s linear infinite; -moz-animation:STAR-MOVE 55s linear infinite; -ms-animation:STAR-MOVE 55s linear infinite; animation:STAR-MOVE 55s linear infinite; animation-direction:alternate; }
|
滚动条样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
|
::-webkit-scrollbar { width:1.5vh; height:1.5vh; background-color:rgba(255,255,255,0.1); }
::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3); background-color:#888; } ::-webkit-scrollbar-thumb:hover{ background-color: chocolate; }
::-webkit-scrollbar-thumb { -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3); background-color:#2f2f2f; }
|
参考文章
底部版权信息模板
html example
1 2 3
| <div class="footer-bottom"> <p> 湘ICP备19012697号 Copyright©2018 <a href="https://hexiongbiao.cn">DoubleAm</a> www.hexiongbiao.cn </p> </div>
|
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| .footer-bottom { z-index:10; height:5vh; line-height:1vh; position:fixed; bottom:0; width:100%; text-align:center; background-color:rgba(255,255,255,0.2); color:#fff; font-size:1vh; letter-spacing:0.1vh; cursor: default; } .footer-bottom a { color:#fff !important; text-decoration: none !important; cursor: pointer; } .footer-bottom a:hover{ color: chocolate !important; }
|
设置鼠标样式
1
| cursor: url(image-url),type;
|