闪烁的灯、光标
.light{
width: 100%;
height: 10px;
margin-top: 40px;
animation: blink 1s infinite;
// animation: blink 1s infinite steps(1, start);
}
@keyframes blink {
0%, 100% {
background-color: #00A6FD;
}
50% {
background-color: #ddd;
}
}
摆动效果、摇摆
#hand{
-webkit-animation:swinging 2s ease-in-out 0s infinite;
-moz-animation:swinging 2s ease-in-out 0s infinite;
animation:swinging 2s ease-in-out 0s infinite;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
@-webkit-keyframes swinging{
0% { -webkit-transform: rotate(10deg); }
50% { -webkit-transform: rotate(-10deg); }
100% { -webkit-transform: rotate(10deg); }
}
返回顶部小icon&css3实现小三角
返回顶部
.goback{
border-radius: 50% 50%;
background: rgba(0,0,0,.4);
text-align: center;
width: 90px;
height: 90px;
box-sizing: border-box;
padding-top: 30px;
position: fixed;
bottom: 50px;
right: 50px;
&:after{
content: '';
display: block;
width: 40px;
height: 40px;
border-bottom: 0;
border-right: 0;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
margin: 0 auto;
z-index: 1;
transform: matrix(.5,.5,-.5,.5,0,0); /*浏览器前缀自己加一下就行*/
}
}
svg Loading效果
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" style="" xml:space="preserve">
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(152.985 25 25)">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
</path>
</svg>
网友评论