我想制作一个带有几个齿轮的404页面,这些齿轮需要旋转一秒钟左右,然后慢慢停止旋转,最后完全静止。在我看来,这是一个很好的效果,可以让我的访问者知道出了问题(机器/齿轮停止工作)。
我想用纯CSS来完成这个任务,但无法通过谷歌搜索找到如何做到这一点。我也不知道如何使用 jQuery 来做到这一点。欢迎任何建议,但我仍然更喜欢 css3。
最佳答案
你可以从我制作的这个基本 CSS 动画开始 here 。您可以添加动画计时函数,例如 ease
、ease-out
或自定义cubic-bezier
函数来实现所需的结果。
下面,我使用了计时函数ease-out。
.gear, .gear2{
height: 100px;
width: 100px;
background: transparent;
box-shadow: inset 0 0 0px 35px dimgray, inset 0 0 0px 40px #444;
border-radius: 50%;
position: relative;
margin: 20px auto;
-webkit-animation: rotate 2.4s ease-out 1;
-moz-animation: rotate 2.4s ease-out 1;
animation: rotate 2.4s ease-out 1;
}
.gear:before, .gear:after, .gear2:before, .gear2:after {
height: 20px;
width: 20px;
content: '';
border-radius: 20%;
position: absolute;
background: dimgray;
}
.gear:before, .gear2:before{
box-shadow: 50px 50px 0 0 dimgray, -50px 50px 0 0 dimgray, 0 100px 0 0 dimgray;
top: -10px; left: 40px;
}
.gear:after, .gear2:after{
transform: rotate(45deg);
top: 5px; left: 76px;
box-shadow: 0px 100px 0 0 dimgray, 50px 50px 0 0 dimgray, -50px 50px 0 0 dimgray;
}
.gear2 {
top: -28px; left: 62px;
-webkit-animation: rotate2 2.4s ease-out 1;
-moz-animation: rotate2 2.4s ease-out 1;
animation: rotate2 2.4s ease-out 1;
}
/*Keyframes*/
@-webkit-keyframes rotate {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(-360deg);}
}
@-moz-keyframes rotate {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(-360deg);}
}
@keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
@-webkit-keyframes rotate2 {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotate2 {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(360deg);}
}
@keyframes rotate2 {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
<div class="gear"></div>
<div class="gear2"></div>
<强> FIDDLE
屏幕截图:
关于css - 如何制作动画404齿轮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28749735/