点击上方“Web前端进阶指南”关注我呦
跟程序员小强一起学前端
上一篇我们讲了CSS3 2D/3D转化以及一些过渡的内容，主要说了使用2D/3D让元素改变形状、大小、位置的一些属性和方法，这一篇呢，我们主要来讲CSS3动画，这也是我们学习CSS3的主要目的，就是做动画。
2024年08月18日
点击上方“Web前端进阶指南”关注我呦
跟程序员小强一起学前端
上一篇我们讲了CSS3 2D/3D转化以及一些过渡的内容，主要说了使用2D/3D让元素改变形状、大小、位置的一些属性和方法，这一篇呢，我们主要来讲CSS3动画，这也是我们学习CSS3的主要目的，就是做动画。
2024年08月18日
前端动画一般在展示性网站、交互操作或者移动端活动页面使用比较多，可能对于大部分前端平时只会用 css 里的 transition 动画，其实前端动画还有很多实现方式，下面是常见的几种形式：
2024年08月18日
* {
margin: 0;
padding: 0;
//html,body{}
body {
height: 100%; //高度继承
overflow: hidden; //滚动条禁止
#wrap {
position: absolute;
width: 600px;
height: 600px;
background: url(../img/my-logo-2.png) repeat;
background-size: 50px;
border: 2px solid steelblue;
border-radius: 8%;
box-shadow: 2px 2px 5px #000000;
text-align: center;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -300px;
&:hover #wrap-inner #wrap-logo {
animation-play-state: paused;
}
#logo {
position: absolute;
width: 120px;
height: 40px;
font: 30px/38px "微软雅黑";
color: white;
background: tomato;
border: 2px solid white;
border-radius: 8%;
top: 80%;
left: 40%;
}
/**
1-2s开机动画的作用：便于后台加载数据，吸引用户注意力，避免脏数据被用户读取
*/
#wrap-inner {
position: absolute;
width: 400px;
height: 300px;
background: salmon;
border: 1px solid white;
border-radius: 8%;
box-shadow: 2px 2px 5px salmon;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
.description {
position: absolute;
color: white;
font: 30px "微软雅黑";
font-weight: lighter;
top: 24%;
left: 28%;
}
#wrap-logo {
position: absolute;
width: 400px;
height: 200px;
font: 20px "微软雅黑";
text-align: center;
top: 50%;
left: 50%;
margin-top: 50px;
margin-left: -200px;
//规定段落中的文本不进行换行
white-space: nowrap;
span{
//transform对span块级元素不起作用
//absolute：会将内容拼到一个点，相对定位保持当前位置横向排列
font-weight: bold;
font: 20px;
position: relative;
//infinite:无限 alternate：循环动作from→to→from
//animation: textMove 1s infinite alternate;
//TODO:JS指定每个span的delay错落move
}
}
}
}
}
@keyframes textMove {
from {
top: 0px;
}
to {
top: -40px;
}
}
}
2024年08月18日
一、变形
CSS3变形是一些效果的集合
如平移、旋转、缩放、倾斜效果
每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化
2024年08月18日
引言
在现代Web开发中，CSS3的@keyframes规则为网页动态效果的创建提供了强大的原生支持。通过定义关键帧动画，我们可以实现从一个样式状态平滑过渡到另一个样式状态的过程，让网页元素动起来，提升用户体验和视觉效果。本文将详细介绍@keyframes的工作原理、使用方法以及示例应用。
2024年08月18日
* {
margin: 0;
padding: 0;
//html,body{}
body {
height: 100%;
overflow: hidden;
#wrap {
position: absolute;
width: 600px;
height: 600px;
background: url(../img/my-logo-2.png) repeat;
background-size: 50px;
border: 2px solid steelblue;
border-radius: 8%;
box-shadow: 2px 2px 5px #000000;
text-align: center;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -300px;
&:hover #wrap-inner #wrap-tusiji {
animation-play-state: paused;
}
#logo {
position: absolute;
width: 120px;
height: 40px;
font: 30px/38px "微软雅黑";
color: white;
background: tomato;
border: 2px solid white;
border-radius: 8%;
top: 80%;
left: 40%;
}
/**
兔斯基png：576*48，12张图，每个48*48,需要12个step,end结束时返回第一帧（不到最后一帧），start不返回第一帧，到最后一帧-》会出现空白
图片为12帧，动画在执行完12帧之后，返回第一帧之前，进行位移会形成空白帧（13帧）
*/
#wrap-inner {
position: absolute;
width: 300px;
height: 300px;
background: salmon;
border: 1px solid white;
border-radius: 50%;
box-shadow: 2px 2px 5px salmon;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
.description{
position: absolute;
color: white;
font: 30px "微软雅黑";
font-weight: lighter;
top: 24%;
left: 26%;
}
#wrap-tusiji {
position: absolute;
width: 48px;
height: 48px;
background: url(../img/tusiji-animation.png);
border: 1px solid white;
border-radius: 4%;
top: 50%;
left: 50%;
margin-top: -24px;
margin-left: -24px;
//指定开始时，BG图片的位置
background-position: 0 0;
//name-》duration-》delay-》
animation: run-tsj .8s steps(12,end) infinite;
}
}
}
}
@keyframes run-tsj{
from{
background-position: 0 0;
}
to{
background-position: -576px 0;
}
}
}