html好看的动画效果图,15种漂亮的css3loading动画特效这是⼀款漂亮的css3 loading动画特效。该特效中包含了15种不同的loading动画效果,他们通过简单的HTML结构和CSS3代码来实现。
使⽤⽅法
HTML结构
第⼀个⽰例的基本HTML结构如下。
CSS样式
然后添加下⾯的CSS样式。
.loader-1 .loader-outter {
position: absolute;
border: 4px solid #f50057;
border-left-color: transparent;
border-bottom: 0;
width: 100%;
height: 100%;
border-radius: 50%;
-webkit-animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite;
animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite;
}
.loader-1 .loader-inner {
position: absolute;
border: 4px solid #f50057;
border-radius: 50%;
width: 40px;css特效文字
height: 40px;
left: calc(50% - 20px);
top: calc(50% - 20px);
border-right: 0;
border-top-color: transparent;
-webkit-animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite;
animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite;
}