css3创建动画属性
预加载器是现代Web设计中的常见现象。 作为用户，我们希望网络快速，流畅-我们不喜欢等待。 预加载器在加载内容时提供视觉反馈，从而管理期望并减少用户放弃您的网站的机会。
创建预加载器CSS3要点
在开始构建CSS3预加载器集合之前，首先，我将讨论CSS3的一些属性，这些属性对于创建此类预加载器至关重要。
伪元素
:before :after
伪元素对于帮助创建CSS3预加载器非常有用。 伪元素实质上是在相关HTML元素之前或之后创建一个伪元素。
“ Pseudo源自希腊语pseudēs，意思是假。”
这类似于创建一个实际上并不存在的额外元素，但是可以使用CSS设置伪元素的样式。 这些伪元素不是创建CSS3预加载器的必要，但它们确实派上用场，并允许我们使用最少的标记。
伪元素的样式可以与其他HTML元素完全相同，唯一的区别是必须指定content属性。 如果未指定，则伪元素将不会呈现。 content属性可以包含任何文本，如果您的预加载器需要包含诸如“ Loading ...”之类的词，则该文本可能会有用。但是，如果您不需要任何文本内容，则可以将content属性留为空白。
CSS3动画
CSS伪元素对创建CSS3预加载器很有用，但不是必需的，但是animation属性却是。 没有这个，预加载器将无法动画，而只是静态的视觉效果-对指示内容正在加载不是很有用。
“ CSS动画的主要组成部分是@keyframes，即创建动画CSS规则。 将@keyframes视为时间轴上的各个阶段。 在Inside @ keyframes中，您可以定义这些阶段，每个阶段都有不同的样式声明。” -CSS动画的初学者介绍
注意 ：在进入演示之前，可能值得注意的是，以下代码段中未包含供应商前缀。 如果您需要供应商前缀，请参阅代码笔示例。
1.音频波
这种预加载器的想法是创建类似于音频波的动画。
HTML
这可以通过创建五个跨度来实现，每个跨度代表一个音频条。
<div id="preloader_1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>CSS
通过设置5像素到30像素的每个跨度的高度来实现效果。 跨度也沿Y轴向下移动15像素，以使其从中心开始逐渐增大。
#preloader_1{
position:relative;
}
#preloader_1 span{
display:block;
bottom:0px;
width: 9px;
height: 5px;
background:#9b59b6;
position:absolute;
animation: preloader_1 1.5s infinite ease-in-out;
}
#preloader_1 span:nth-child(2){
left:11px;
animation-delay: .2s;
}
#preloader_1 span:nth-child(3){
left:22px;
animation-delay: .4s;
}
#preloader_1 span:nth-child(4){
left:33px;
animation-delay: .6s;
}
#preloader_1 span:nth-child(5){
left:44px;
animation-delay: .8s;
}
@keyframes preloader_1 {
0% {height:5px;transform:translateY(0px);background:#9b59b6;}
25% {height:30px;transform:translateY(15px);background:#3498db;}
50% {height:5px;transform:translateY(0px);background:#9b59b6;}
100% {height:5px;transform:translateY(0px);background:#9b59b6;}
} 默认情况下，每个跨度上的动画是同时发生的。 通过将animation-delay添加到每个跨度（偏移为2毫秒）来创建墨西哥波效果。 每个跨度都使用nth-child()选择器作为目标。
2.圆形广场
该预加载器使用四个正方形，它们可以移动，旋转，改变颜色并变成圆形。
HTML
它是使用四个跨度创建的。 每个都是一个圆/正方形，并对其应用了自己的动画。
<div id="preloader_2">
<span></span>
<span></span>
<span></span>
<span></span>
</div>CSS
通过将边界半径从0px（正方形）调整为20px（圆形），它们全部从一个正方形变为一个圆形。
#preloader_2{
position: relative;
left: 50%;
width: 40px;
height: 40px;
}
#preloader_2 span{
display:block;
bottom:0px;
width: 20px;
height: 20px;
background:#9b59b6;
position:absolute;
}
#preloader_2 span:nth-child(1){
animation: preloader_2_1 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(2){
left:20px;
animation: preloader_2_2 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(3){
top:0px;
animation: preloader_2_3 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(4){
top:0px;
left:20px;
animation: preloader_2_4 1.5s infinite ease-in-out;
}
@-keyframes preloader_2_1 {
0% {-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;}
50% {-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}
80% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-keyframes preloader_2_2 {
0% {-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50% {-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
80% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-keyframes preloader_2_3 {
0% {-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50% {-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}
80% {-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-keyframes preloader_2_4 {
0% {-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;}
50% {-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}
80% {-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}每一个也旋转并沿X＆Y轴以与其当前位置相反的方向移动。 每个跨度的颜色也从统一的紫色变为自己独立的颜色。 这给人的印象是形状从几个圆合并成一个正方形。
3.交叉形状
Crossing Shapes预加载器是一个单个div，它利用了我们之前讨论的:before和:after伪元素。
HTML
<div id="preloader_3"></div>CSS
#preloader_3{
position:relative;
}
#preloader_3:before{
width:20px;
height:20px;
border-radius:20px;
background:blue;
content:'';
position:absolute;
background:#9b59b6;
animation: preloader_3_before 1.5s infinite ease-in-out;
}
#preloader_3:after{
width:20px;
height:20px;
border-radius:20px;
background:blue;
content:'';
position:absolute;
background:#2ecc71;
left:22px;
animation: preloader_3_after 1.5s infinite ease-in-out;
}
@keyframes preloader_3_before {
0% {transform: translateX(0px) rotate(0deg)}
50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}
100% {transform: translateX(0px) rotate(0deg)}
}
@keyframes preloader_3_after {
0% {transform: translateX(0px)}
50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
100% {transform: translateX(0px)}
} 一个动画放置在#preloader_3:before ，另一动画放置在#preloader_3:after 。 每个动画在相反的时间变为不同的颜色。 与先前的预加载器类似，每个伪元素通过设置border-radius属性的动画，从圆形变为正方形。
4.蛇
蛇由一系列的跨度组成，每个跨度被设计成一个圆圈。
HTML
这是标记，但是您始终可以尝试使用三个圆圈创建蛇形预加载器，而不是使用几个跨度，只需将#preloader_4 div与:before和:after 。
<div id="preloader_4">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>CSS
通过将每个动画的Y位置转换-10px并将颜色从蓝色更改为黄色来创建动画。 为了创建基础阴影效果，将阴影添加到每个跨度中，以将其垂直阴影大小从0px更改为20px。
#preloader_4{
position:relative;
}
#preloader_4 span{
position:absolute;
width:20px;
height:20px;
background:#3498db;
opacity:0.5;
border-radius:20px;
-animation: preloader_4 1s infinite ease-in-out;
}
#preloader_4 span:nth-child(2){
left:20px;
animation-delay: .2s;
}
#preloader_4 span:nth-child(3){
left:40px;
animation-delay: .4s;
}
#preloader_4 span:nth-child(4){
left:60px;
animation-delay: .6s;
}
#preloader_4 span:nth-child(5){
left:80px;
animation-delay: .8s;
}
@keyframes preloader_4 {
0% {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
50% {opacity: 1; transform: translateY(-10px); background:#f1c40f; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
100% {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
} 与预加载器1相似，通过将animation-delay添加到每个跨度并将每个跨度的延迟偏移2毫秒，可以创建波浪效果。
5.旋转盘
这是..一个棘手的事情。
HTML
在这里，我们只使用一个div作为中心圆，并在该div上使用:after来创建外线。
<div id="preloader5"></div>CSS
在顶部和底部添加边框并为其设置border-radius 50px会创建两条外线。 将动画添加到主div中，只是为了更改主div的颜色并通过添加transform: rotate() rotation transform: rotate()创建旋转效果。 添加:after元素动画以更改外部边框的颜色。
#preloader5{
position:relative;
width:30px;
height:30px;
background:#3498db;
border-radius:50px;
animation: preloader_5 1.5s infinite linear;
}
#preloader5:after{
position:absolute;
width:50px;
height:50px;
border-top:10px solid #9b59b6;
border-bottom:10px solid #9b59b6;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-radius:50px;
content:'';
top:-20px;
left:-20px;
animation: preloader_5_after 1.5s infinite linear;
}
@keyframes preloader_5 {
0% {transform: rotate(0deg);}
50% {transform: rotate(180deg);background:#2ecc71;}
100% {transform: rotate(360deg);}
}
@keyframes preloader_5_after {
0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}6.闪闪发光的窗口
我们在这方面做了一些微软工作。
HTML
该预加载器是使用div和四个跨距创建的，用于创建每个正方形。
<div id="preloader6">
<span></span>
<span></span>
<span></span>
<span></span>
</div>CSS
然后将这些正方形以网格状顺序放置。 将动画添加到主div以旋转整个预加载器。 将另一个动画添加到跨度，将其从100％缩放到50％。 然后，我们将animation-delay添加到每个跨度以创建脉冲效果。
#preloader6{
position:relative;
width: 42px;
height: 42px;
animation: preloader_6 5s infinite linear;
}
#preloader6 span{
width:20px;
height:20px;
position:absolute;
background:red;
display:block;
animation: preloader_6_span 1s infinite linear;
}
#preloader6 span:nth-child(1){
background:#2ecc71;
}
#preloader6 span:nth-child(2){
left:22px;
background:#9b59b6;
animation-delay: .2s;
}
#preloader6 span:nth-child(3){
top:22px;
background:#3498db;
animation-delay: .4s;
}
#preloader6 span:nth-child(4){
top:22px;
left:22px;
background:#f1c40f;
animation-delay: .6s;
}
@keyframes preloader_6_span {
0% { transform:scale(1); }
50% { transform:scale(0.5); }
100% { transform:scale(1); }
}结论
与图像预加载器相比，使用CSS3预加载器的最大优势在于它们具有可伸缩性且可支持视网膜。 这意味着，无论它们显示在什么设备上，都将始终清晰，干净且适合未来使用（尽管请记住，并非所有旧版浏览器都支持CSS3动画）。
通过了解一些重要CSS3属性和技术，您现在应该能够创建自己CSS3预加载器。 创建它们很有趣，并且通过一些实验，您可以创建一些非常酷的动画来防止用户离开您的网站。
如果您最近创建了任何很棒的预加载器，那么我很乐意见到他们！ 随时在下面留下您的评论。
css3创建动画属性
1万+
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
