web前端小案例-纯css书架装载机
2018-03-02 15:48
507 查看
html代码:
<div class="bookshelf_wrapper"> <ul class="books_list"> <li class="book_item first"></li> <li class="book_item second"></li> <li class="book_item third"></li> <li class="book_item fourth"></li> <li class="book_item fifth"></li> <li class="book_item sixth"></li> </ul> <div class="shelf"></div> </div>css代码:
<style> body { background-color: #1e6cc7; width: 100%; height: 100vh; margin: 0; } .bookshelf_wrapper { position: relative; top: 60%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .books_list { margin: 0 auto; width: 300px; padding: 0; } .book_item { position: absolute; top: -120px; box-sizing: border-box; list-style: none; width: 40px; height: 120px; opacity: 0; background-color: #1e6cc7; border: 5px solid white; -webkit-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: translateX(300px); transform: translateX(300px); -webkit-animation: travel 2500ms linear infinite; animation: travel 2500ms linear infinite; } .book_item.first { top: -140px; height: 140px; } .book_item.first:before, .book_item.first:after { content: ''; position: absolute; top: 10px; left: 0; width: 100%; height: 5px; background-color: white; } .book_item.first:after { top: initial; bottom: 10px; } .book_item.second:before, .book_item.second:after, .book_item.fifth:before, .book_item.fifth:after { box-sizing: border-box; content: ''; position: absolute; top: 10px; left: 0; width: 100%; height: 17.5px; border-top: 5px solid white; border-bottom: 5px solid white; } .book_item.second:after, .book_item.fifth:after { top: initial; bottom: 10px; } .book_item.third:before, .book_item.third:after { box-sizing: border-box; content: ''; position: absolute; top: 10px; left: 9px; width: 12px; height: 12px; border-radius: 50%; border: 5px solid white; } .book_item.third:after { top: initial; bottom: 10px; } .book_item.fourth { top: -130px; height: 130px; } .book_item.fourth:before { box-sizing: border-box; content: ''; position: absolute; top: 46px; left: 0; width: 100%; height: 17.5px; border-top: 5px solid white; border-bottom: 5px solid white; } .book_item.fifth { top: -100px; height: 100px; } .book_item.sixth { top: -140px; height: 140px; } .book_item.sixth:before { box-sizing: border-box; content: ''; position: absolute; bottom: 31px; left: 0px; width: 100%; height: 5px; background-color: white; } .book_item.sixth:after { box-sizing: border-box; content: ''; position: absolute; bottom: 10px; left: 9px; width: 12px; height: 12px; border-radius: 50%; border: 5px solid white; } .book_item:nth-child(2) { -webkit-animation-delay: 416.66667ms; animation-delay: 416.66667ms; } .book_item:nth-child(3) { -webkit-animation-delay: 833.33333ms; animation-delay: 833.33333ms; } .book_item:nth-child(4) { -webkit-animation-delay: 1250ms; animation-delay: 1250ms; } .book_item:nth-child(5) { -webkit-animation-delay: 1666.66667ms; animation-delay: 1666.66667ms; } .book_item:nth-child(6) { -webkit-animation-delay: 2083.33333ms; animation-delay: 2083.33333ms; } .shelf { width: 300px; height: 5px; margin: 0 auto; background-color: white; position: relative; } .shelf:before, .shelf:after { content: ''; position: absolute; width: 100%; height: 100%; background: #1e6cc7; background-image: -webkit-radial-gradient(rgba(255, 255, 255, 0.5) 30%, rgba(0, 0, 0, 0) 0%); background-image: radial-gradient(rgba(255, 255, 255, 0.5) 30%, rgba(0, 0, 0, 0) 0%); background-size: 10px 10px; background-position: 0 -2.5px; top: 200%; left: 5%; -webkit-animation: move 250ms linear infinite; animation: move 250ms linear infinite; } .shelf:after { top: 400%; left: 7.5%; } @-webkit-keyframes move { from { background-position-x: 0; } to { background-position-x: 10px; } } @keyframes move { from { background-position-x: 0; } to { background-position-x: 10px; } } @-webkit-keyframes travel { 0% { opacity: 0; -webkit-transform: translateX(300px) rotateZ(0deg) scaleY(1); transform: translateX(300px) rotateZ(0deg) scaleY(1); } 6.5% { -webkit-transform: translateX(279.5px) rotateZ(0deg) scaleY(1.1); transform: translateX(279.5px) rotateZ(0deg) scaleY(1.1); } 8.8% { -webkit-transform: translateX(273.6px) rotateZ(0deg) scaleY(1); transform: translateX(273.6px) rotateZ(0deg) scaleY(1); } 10% { opacity: 1; -webkit-transform: translateX(270px) rotateZ(0deg); transform: translateX(270px) rotateZ(0deg); } 17.6% { -webkit-transform: translateX(247.2px) rotateZ(-30deg); transform: translateX(247.2px) rotateZ(-30deg); } 45% { -webkit-transform: translateX(165px) rotateZ(-30deg); transform: translateX(165px) rotateZ(-30deg); } 49.5% { -webkit-transform: translateX(151.5px) rotateZ(-45deg); transform: translateX(151.5px) rotateZ(-45deg); } 61.5% { -webkit-transform: translateX(115.5px) rotateZ(-45deg); transform: translateX(115.5px) rotateZ(-45deg); } 67% { -webkit-transform: translateX(99px) rotateZ(-60deg); transform: translateX(99px) rotateZ(-60deg); } 76% { -webkit-transform: translateX(72px) rotateZ(-60deg); transform: translateX(72px) rotateZ(-60deg); } 83.5% { opacity: 1; -webkit-transform: translateX(49.5px) rotateZ(-90deg); transform: translateX(49.5px) rotateZ(-90deg); } 90% { opacity: 0; } 100% { opacity: 0; -webkit-transform: translateX(0px) rotateZ(-90deg); transform: translateX(0px) rotateZ(-90deg); } } @keyframes travel { 0% { opacity: 0; -webkit-transform: translateX(300px) rotateZ(0deg) scaleY(1); transform: translateX(300px) rotateZ(0deg) scaleY(1); } 6.5% { -webkit-transform: translateX(279.5px) rotateZ(0deg) scaleY(1.1); transform: translateX(279.5px) rotateZ(0deg) scaleY(1.1); } 8.8% { -webkit-transform: translateX(273.6px) rotateZ(0deg) scaleY(1); transform: translateX(273.6px) rotateZ(0deg) scaleY(1); } 10% { opacity: 1; -webkit-transform: translateX(270px) rotateZ(0deg); transform: translateX(270px) rotateZ(0deg); } 17.6% { -webkit-transform: translateX(247.2px) rotateZ(-30deg); transform: translateX(247.2px) rotateZ(-30deg); } 45% { -webkit-transform: translateX(165px) rotateZ(-30deg); transform: translateX(165px) rotateZ(-30deg); } 49.5% { -webkit-transform: translateX(151.5px) rotateZ(-45deg); transform: translateX(151.5px) rotateZ(-45deg); } 61.5% { -webkit-transform: translateX(115.5px) rotateZ(-45deg); transform: translateX(115.5px) rotateZ(-45deg); } 67% { -webkit-transform: translateX(99px) rotateZ(-60deg); transform: translateX(99px) rotateZ(-60deg); } 76% { -webkit-transform: translateX(72px) rotateZ(-60deg); transform: translateX(72px) rotateZ(-60deg); } 83.5% { opacity: 1; -webkit-transform: translateX(49.5px) rotateZ(-90deg); transform: translateX(49.5px) rotateZ(-90deg); } 90% { opacity: 0; } 100% { opacity: 0; -webkit-transform: translateX(0px) rotateZ(-90deg); transform: translateX(0px) rotateZ(-90deg); } } </style>
正在学习web前端或者对web前端感兴趣的可以来前端群:575308719,大量干货,分享欢迎初学和进阶中的小伙伴。
相关文章推荐
- web前端案例-css制作花束小动画
- web前端小案例-css制作电脑平板手机变幻小动画
- web前端小案例-纯css制作水滴效果
- web前端小案例-超级css制作七彩圆环旋转幻影
- web前端小案例-纯css制作微笑小表情
- web前端案例-老司机用css带你制作直升机飞行
- web前端案例-纯css代码制作吃豆豆加载效果
- web前端开源小案例:立方体旋转
- web前端:css
- web前端css简单
- 通用base.css —— 《编写高质量代码 web前端开发修炼之道》
- Web前端开发基础 第四课(CSS文字和段落排版)
- Web前端开发者必知的9个CSS属性
- web前端开发学习经验分享——css,js入门篇
- web前端-01:关于css居中的几种方法
- web前端之JavaScript DOM编程艺术之案例研究:图片库改进版
- web前端开发分享-css,js深化篇
- JavaWeb前端开发知识总结(CSS)
- web前端面试题(HTML&CSS)下 答案详解
- 1. web前端开发分享-css,js入门篇