您现在的位置是：网站首页> 编程资料编程资料

CSS3制作ajax loader icon实现思路及代码css 命名：BEM, scoped css, css modules 与 css-in-js详解使用Loader.css和css-spinners来制作加载动画的方法在vue-cli中使用css-loader实现css module

2021-09-07 744人已围观

简介 用到了两个CSS3属性transform、animation，实现原理为：transform控制每个小方块在Y轴的偏移，rotate控制旋转的角度，scale缩放至原大小的一半，具体祥看下文，希望对大家有所帮助

本文用到的两个CSS3属性：transform、animation
一、HTML

复制代码
代码如下:












二、CSS

复制代码
代码如下:

.ajax-loading {
position: relative;
width: 100px;
height: 100px;
margin: 25px;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-animation: rotateThis 1s infinite step-start;
animation: rotateThis 1s infinite step-start;
}
.ajax-loading div {
position: absolute;
top: 35px;
left: 45px;
width: 10px;
height: 30px;
background: #000;
}
.ajax-loading div.bar1 {
-webkit-transform: rotate(0deg) translate(0, -40px);
transform: rotate(0deg) translate(0, -40px);
opacity: 0.12;
}
.ajax-loading div.bar2 {
-webkit-transform: rotate(45deg) translate(0, -40px);
transform: rotate(45deg) translate(0, -40px);
opacity: 0.25;
}
.ajax-loading div.bar3 {
-webkit-transform: rotate(90deg) translate(0, -40px);
transform: rotate(90deg) translate(0, -40px);
opacity: 0.37;
}
.ajax-loading div.bar4 {
-webkit-transform: rotate(135deg) translate(0, -40px);
transform: rotate(135deg) translate(0, -40px);
opacity: 0.5;
}
.ajax-loading div.bar5 {
-webkit-transform: rotate(180deg) translate(0, -40px);
transform: rotate(180deg) translate(0, -40px);
opacity: 0.62;
}
.ajax-loading div.bar6 {
-webkit-transform: rotate(225deg) translate(0, -40px);
transform: rotate(225deg) translate(0, -40px);
opacity: 0.75;
}
.ajax-loading div.bar7 {
-webkit-transform: rotate(270deg) translate(0, -40px);
transform: rotate(270deg) translate(0, -40px);
opacity: 0.87;
}
.ajax-loading div.bar8 {
-webkit-transform: rotate(315deg) translate(0, -40px);
transform: rotate(315deg) translate(0, -40px);
opacity: 1;
}
@-webkit-keyframes rotateThis {
0% {-webkit-transform:scale(0.5) rotate(0deg);}
12.5% {-webkit-transform:scale(0.5) rotate(45deg);}
25% {-webkit-transform:scale(0.5) rotate(90deg);}
37.5% {-webkit-transform:scale(0.5) rotate(135deg);}
50% {-webkit-transform:scale(0.5) rotate(180deg);}
62.5% {-webkit-transform:scale(0.5) rotate(225deg);}
75% {-webkit-transform:scale(0.5) rotate(270deg);}
87.5% {-webkit-transform:scale(0.5) rotate(315deg);}
100% {-webkit-transform:scale(0.5) rotate(360deg);}
}
@keyframes rotateThis {
0% {transform:scale(0.5) rotate(0deg);}
12.5% {transform:scale(0.5) rotate(45deg);}
25% {transform:scale(0.5) rotate(90deg);}
37.5% {transform:scale(0.5) rotate(135deg);}
50% {transform:scale(0.5) rotate(180deg);}
62.5% {transform:scale(0.5) rotate(225deg);}
75% {transform:scale(0.5) rotate(270deg);}
87.5% {transform:scale(0.5) rotate(315deg);}
100% {transform:scale(0.5) rotate(360deg);}
}

三、思路
1. transform控制每个小方块在Y轴的偏移，rotate控制旋转的角度，scale缩放至原大小的一半；
2. opacity在每个小方块之间相差0.12左右，达到渐变效果；
3. 设置top与left偏移，控制圆心在中心处；
4. 为整个方块设置旋转动画rotateThis，定义8个时间点；
5. 设置动画的animation-timing-function为step-start，达到的效果是不让动画渐变；

上一篇：CSS控制背景图像平铺实现边框阴影效果基于CSS 属性实现按钮悬停边框和背景动画集合CSS 制作带边框背景色透明的消息框css3 边框、背景、文本效果的实现代码CSS3实现多背景模拟动态边框的效果css div 边框阴影利用背景图或内外层div实现层次感觉阴影效果css样式div或li在ie6下背景平铺及border边框断线解决技巧 CSS新特性:圆角边框多栏Gird布局背景设置css背景和边框标签实例详解

下一篇：瀑布流布局的两种实现方式：传统多列浮动和绝对定位布局3种方式实现瀑布流布局小结详解纯css实现瀑布流（multi-column多列及flex布局）css3 column实现卡片瀑布流布局的示例代码用CSS3实现瀑布流布局的示例代码CSS3实现瀑布流布局与无限加载图片相册的实例代码waterfall瀑布流布局+动态渲染的实现

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网