如何制作动画 404 齿轮?
how to make animated 404 gears?
我想制作一个 404 页面,其中有几个齿轮需要旋转一秒钟左右,然后慢慢停止旋转,最后完全静止。在我看来,这是一个很好的效果,让我的访问者知道出了点问题(machine/gears 停止工作)。
我想用纯粹的 css 来完成这个,但无法通过谷歌搜索找到如何做到这一点。我也不确定如何使用 jQuery 来做到这一点。欢迎任何建议,但我仍然更喜欢 css3.
您可以从我制作的这个基本 CSS 动画开始 。您可以添加动画计时功能,例如 ease
、ease-out
或自定义 cubic-bezier
功能以获得所需的结果。
下面,我使用了计时功能缓和。
.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>
截图:
我想制作一个 404 页面,其中有几个齿轮需要旋转一秒钟左右,然后慢慢停止旋转,最后完全静止。在我看来,这是一个很好的效果,让我的访问者知道出了点问题(machine/gears 停止工作)。
我想用纯粹的 css 来完成这个,但无法通过谷歌搜索找到如何做到这一点。我也不确定如何使用 jQuery 来做到这一点。欢迎任何建议,但我仍然更喜欢 css3.
您可以从我制作的这个基本 CSS 动画开始 ease
、ease-out
或自定义 cubic-bezier
功能以获得所需的结果。
下面,我使用了计时功能缓和。
.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>
截图: