成为VIP
在之前的文章《
在上面代码中，先使用两个animation属性给每个字绑定两种动画flip和color，分别控制翻转动作和颜色变化；然后分别利用@keyframes规则，给两个动画设置每一帧的动作即可。 翻转动作需要使用transform属性来控制，它可以向元素应用 2D 或 3D 转换。 效果如下： 下面的效果也是同一种实现思想，只是在细微处有点改变。 第二种效果的实现方法： 效果如下： 下面介绍3个关键属性animation、@keyframes和transform： CSS3 语法： 使用@keyframes规则可以创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。简单来说：@keyframes就是用来设置动画每一帧动作的。 @keyframes需要和animation 属性一起使用才能实现动画： @keyframe规则由关键字“@keyframe”组成，后面接着是给出动画名称的标识符（将使用animation-name引用），随后是通过一组样式规则（用大括号分隔）。然后，通过使用标识符作为animation-name属性的值，将动画应用于元素。例如： CSS3 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 语法： PHP中文网平台有非常多的视频教学资源，欢迎大家学习《css视频教程》！ 以上就是利用CSS3创建实用的加载动画效果（两种）的详细内容，更多请关注亿码酷站其它相关文章！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html,
body {
padding: 0;
height: 100%;
display: table;
margin: 0 auto;
font-size: 52px;
font-family: Monaco, Consolas, "Lucida Console", monospace;
background: #F5F5F5;
}
.loading {
top: 50%;
left: 50%;
width: 350px;
height: 60px;
font-size: 52px;
position: absolute;
text-align: center;
margin-top: -30px;
margin-left: -175px;
text-shadow: #808080 1px 1px 1px;
font-family: Monaco, Consolas, "Lucida Console", monospace;
}
.letter {
float: left;
width: 35px;
height: 60px;
position: relative;
animation: flip 2s infinite;
transform-style: preserve-3d;
transition: transform 1s;
}
.letter div {
color: #4B6;
width: 100%;
height: 100%;
position: absolute;
transform: translate(0);
backface-visibility: hidden;
animation: color 16s infinite;
}
.letter div.back {
transform: rotateY(180deg);
}
.letter:nth-child(1),
.letter:nth-child(1) div {
animation-delay: 0.125s;
}
.letter:nth-child(2),
.letter:nth-child(2) div {
animation-delay: 0.25s;
}
.letter:nth-child(3),
.letter:nth-child(3) div {
animation-delay: 0.375s;
}
.letter:nth-child(4),
.letter:nth-child(4) div {
animation-delay: 0.5s;
}
.letter:nth-child(5),
.letter:nth-child(5) div {
animation-delay: 0.625s;
}
.letter:nth-child(6),
.letter:nth-child(6) div {
animation-delay: 0.75s;
}
.letter:nth-child(7),
.letter:nth-child(7) div {
animation-delay: 0.875s;
}
.letter:nth-child(8),
.letter:nth-child(8) div {
animation-delay: 1s;
}
.letter:nth-child(9),
.letter:nth-child(9) div {
animation-delay: 1.125s;
}
.letter:nth-child(10),
.letter:nth-child(10) div {
animation-delay: 1.25s;
}
@keyframes flip {
0% {
transform: rotateY(0deg) translate(0);
}
40%,
100% {
transform: rotateY(180deg) translate(0);
}
}
@keyframes color {
1.5% {
color: #6AD;
}
3%,
12.5% {
color: #F80;
}
14% {
color: #4B6;
}
15.5%,
25% {
color: #F68;
}
26.5% {
color: #C83;
}
28%,
37.5% {
color: #96C;
}
39% {
color: #C83;
}
40.5%,
50% {
color: #E44;
}
51.5% {
color: #F80;
}
53%,
62.5% {
color: #4B6;
}
64% {
color: #F68;
}
65.5%,
75% {
color: #C83;
}
76.5% {
color: #96C;
}
78%,
87.5% {
color: #6AD;
}
89% {
color: #F80;
}
90.5%,
100%,
0% {
color: #4B6;
}
}
</style>
</head>
<body>
<div class="loader">
<div class="loading">
<div class="letter">
<div>L</div>
<div class="back">L</div>
</div>
<div class="letter">
<div>o</div>
<div class="back">o</div>
</div>
<div class="letter">
<div>a</div>
<div class="back">a</div>
</div>
<div class="letter">
<div>d</div>
<div class="back">d</div>
</div>
<div class="letter">
<div>i</div>
<div class="back">i</div>
</div>
<div class="letter">
<div>n</div>
<div class="back">n</div>
</div>
<div class="letter">
<div>g</div>
<div class="back">g</div>
</div>
<div class="letter">
<div>.</div>
<div class="back">.</div>
</div>
<div class="letter">
<div>.</div>
<div class="back">.</div>
</div>
<div class="letter">
<div>.</div>
<div class="back">.</div>
</div>
</div>
</div>
</body>
</html>
animation（动画） 属性animation: name duration timing-function delay iteration-count direction fill-mode play-state;animation-name：指定要绑定到选择器的关键帧的名称
animation-duration：动画指定需要多少秒或毫秒完成
animation-timing-function：设置动画将如何完成一个周期
animation-delay：设置动画在启动前的延迟间隔。
animation-iteration-count：定义动画的播放次数。
animation-direction：指定是否应该轮流反向播放动画。
animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state：指定动画是否正在运行或已暂停。
@keyframes 规则/* 定义动画*/
@keyframes 动画名称{
/* 样式规则*/
}
/* 将它应用于元素 */
.element {
animation-name: 动画名称（在@keyframes中已经声明好的）;
/* 或使用动画简写属性*/
animation: 动画名称 1s ...
}
transform 属性transform: none|transform-functions;none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。
利用CSS3创建实用的加载动画效果（两种）
—–文章转载自PHP中文网如有侵权请联系ymkuzhan@126.com删除
本文永久链接地址：https://www.ymkuzhan.com/39331.html
