web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
进度条
css3 transform属性创意Loading加载动画效果
分类:
进度条
日期:
2024-05-14
点击(5)
评论(0)
演 示
免费下载
简介
#### CSS代码 ------------ ```css @-webkit-keyframes piston { 0% { margin-top: 0; } 50% { margin-top: 80px; } 100% { margin-top: 0; } } @keyframes piston { 0% { margin-top: 0; } 50% { margin-top: 80px; } 100% { margin-top: 0; } } @-webkit-keyframes arm { 0% { -webkit-transform: rotate(0); } 25% { -webkit-transform: rotate(-18deg); } 50% { -webkit-transform: rotate(0); } 75% { -webkit-transform: rotate(18deg); } 100% { -webkit-transform: rotate(0); } } @keyframes arm { 0% { transform: rotate(0); } 25% { transform: rotate(-18deg); } 50% { transform: rotate(0); } 75% { transform: rotate(18deg); } 100% { transform: rotate(0); } } html { height: 100%; } body { margin: 60px 0 0; text-align: center; background: linear-gradient(to bottom, coral, tomato); } #robot { position: absolute; top:50%; left:50%; width: 540px; height: 250px; margin-top:-125px; margin-left:-270px; font-family: 'Oswald', sans-serif; font-size: 30px; font-weight: 700; color: #444; text-shadow: 0px -1px 1px rgba(0,0,0,.7), 0px 1px 1px rgba(255,255,255,.4); } .piston { float: left; margin-right: 10px; position: relative; width: 100px; height: 250px; background: rgba(0,0,0,.1); border-radius: 10px 10px 50px 50px; box-shadow: 0 -4px 0 rgba(0,0,0,.2), 0 4px 0 rgba(255,255,255,.2); } .piston:last-child { margin: 0; } .piston .block { position: relative; width: 100px; height: 60px; line-height: 60px; background: #555; border-radius: 10px; -webkit-animation: piston 1.2s cubic-bezier(.5,0,.5,1) infinite; animation: piston 1.2s cubic-bezier(.5,0,.5,1) infinite; box-shadow: inset 0 -4px 0 rgba(0,0,0,.2), inset 0 4px 0 rgba(255,255,255,.2); } .piston:nth-child(1) .block { -webkit-animation-delay: 0s; animation-delay: 0s; } .piston:nth-child(2) .block { -webkit-animation-delay: .1s; animation-delay: .1s; } .piston:nth-child(3) .block { -webkit-animation-delay: .2s; animation-delay: .2s; } .piston:nth-child(4) .block { -webkit-animation-delay: .3s; animation-delay: .3s; } .piston:nth-child(5) .block { -webkit-animation-delay: .4s; animation-delay: .4s; } .piston .arm { position: absolute; top:50%; left:50%; margin: -10px 0 0 -10px; width: 20px; height: 150px; background: #555; border-radius: 10px; box-shadow: inset 0 -22px 0 rgba(0,0,0,.2); z-index: -1; -webkit-transform-origin: center 10px; -webkit-animation: arm 1.2s linear infinite; -webkit-animation-delay: inherit; transform-origin: center 10px; animation: arm 1.2s linear infinite; animation-delay: inherit; } .piston .arm:before, .piston .arm:after{ content: ''; position: absolute; right:0; left:0; height: 16px; background: #eee; border-radius: 50%; margin: 2px; } .piston .arm:before { top: 0; } .piston .arm:after { bottom: 0; } .piston .rotator { position: absolute; bottom: 0; width: 100px; height: 100px; border-radius: 10px; border-radius: 50%; border: 20px solid rgba(0,0,0,.1); box-sizing: border-box; z-index: -1; } ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告