1、黑色科技动画(CSS) 查看演示
<div>LOADING...</div>
div {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 250px;
height: 250px;
background-color: #20293a;
color: #20293a;
border-radius: 50%;
font-weight: bold;
line-height: 1.5;
text-align: center;
animation: text 10s ease infinite;
}
div:after {
position: absolute;
content: "";
top: -5%;
left: -5%;
right: 0;
z-index: -1;
height: 100%;
width: 100%;
margin: 0 auto;
transform: scale(0.85);
filter: blur(5vw);
background: linear-gradient(270deg, #00fcbd, #7400f9);
background-size: 150% 150%;
border-radius: 50%;
animation: glowmation 10s linear infinite;
}
@keyframes glowmation {
0% {
top: -3%;
left: -3%;
background-position: 0% 50%;
background-size: 150% 150%;
}
12.5% {
top: -3%;
left: 0;
background-size: 70% 30%;
}
25% {
top: -3%;
left: 3%;
background-size: 100% 50%;
}
37.5% {
top: 0;
left: 3%;
background-size: 70% 30%;
}
50% {
top: 3%;
left: 3%;
background-position: 100% 50%;
background-size: 30% 30%;
}
62.5% {
top: 3%;
left: 0;
background-size: 30% 70%;
}
75% {
top: 3%;
left: -3%;
background-size: 50% 100%;
}
87.5% {
top: 0;
left: -3%;
background-size: 30% 70%;
}
100% {
top: -3%;
left: -3%;
background-position: 0% 50%;
background-size: 150% 150%;
}
}
@keyframes text {
0% {
color: #7400f9;
}
50% {
color: #00fcbd;
}
100% {
color: #7400f9;
}
}
2、圆形线条(SVG) 查看演示
<svg version="1.1" id="dc-spinner" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width:"38"="" height:"38"="" viewBox="0 0 38 38" preserveAspectRatio="xMinYMin meet">
<text x="14" y="21" font-family="Monaco" font-size="2px" style="letter-spacing:0.6" fill="grey">LOADING
<animate attributeName="opacity" values="0;1;0" dur="1.8s" repeatCount="indefinite"></animate>
</text>
<path fill="#373a42" d="M20,35c-8.271,0-15-6.729-15-15S11.729,5,20,5s15,6.729,15,15S28.271,35,20,35z M20,5.203
C11.841,5.203,5.203,11.841,5.203,20c0,8.159,6.638,14.797,14.797,14.797S34.797,28.159,34.797,20
C34.797,11.841,28.159,5.203,20,5.203z">
</path>
<path fill="#373a42" d="M20,33.125c-7.237,0-13.125-5.888-13.125-13.125S12.763,6.875,20,6.875S33.125,12.763,33.125,20
S27.237,33.125,20,33.125z M20,7.078C12.875,7.078,7.078,12.875,7.078,20c0,7.125,5.797,12.922,12.922,12.922
S32.922,27.125,32.922,20C32.922,12.875,27.125,7.078,20,7.078z">
</path>
<path fill="#2AA198" stroke="#2AA198" stroke-width="0.6027" stroke-miterlimit="10" d="M5.203,20
c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z" transform="rotate(80.1325 20 20)">
<animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" calcMode="spline" keySplines="0.4, 0, 0.2, 1" keyTimes="0;1" dur="2s" repeatCount="indefinite"></animateTransform>
</path>
<path fill="#859900" stroke="#859900" stroke-width="0.2027" stroke-miterlimit="10" d="M7.078,20
c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
C12.875,32.922,7.078,27.125,7.078,20z" transform="rotate(338.363 20 20)">
<animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1.8s" repeatCount="indefinite"></animateTransform>
</path>
</svg>
3、闪光按钮(CSS) 产看演示
<button class=button>hover me</button>
@keyframes sheen {
0% {
-webkit-transform: skewY(-45deg) translateX(0);
transform: skewY(-45deg) translateX(0);
}
100% {
-webkit-transform: skewY(-45deg) translateX(12.5em);
transform: skewY(-45deg) translateX(12.5em);
}
}
.button {
padding: 0.75em 2em;
text-align: center;
text-decoration: none;
color: #2194E0;
border: 2px solid #2194E0;
font-size: 24px;
display: inline-block;
border-radius: 0.3em;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
}
.button:before {
content: "";
background-color: rgba(255, 255, 255, 0.5);
height: 100%;
width: 3em;
display: block;
position: absolute;
top: 0;
left: -4.5em;
-webkit-transform: skewX(-45deg) translateX(0);
transform: skewX(-45deg) translateX(0);
transition: none;
}
.button:hover {
background-color: #2194E0;
color: #fff;
border-bottom: 4px solid #1977b5;
}
.button:hover:before {
-webkit-transform: skewX(-45deg) translateX(13.5em);
transform: skewX(-45deg) translateX(13.5em);
transition: all 0.5s ease-in-out;
}
更多特效移步:http://www.17sucai.com/pins/demo-show?id=29229