当前位置：首页 > news >正文

CSS3动画

news 来源：原创 2025/6/13 15:01:06

一、CSS3 动画

CSS3 动画是一种通过纯CSS实现动画效果的技术，它允许开发者在不使用JavaScript或Flash的情况下，为网页元素添加平滑的过渡和动画效果。CSS3 动画的引入，极大地增强了网页的表现力和用户体验。

二、 CSS3 动画的关键组成部分

1、设置关键帧

@keyframes animationname {

from {/*CSS样式写在这里*/}

percentage {/*CSS样式写在这里*/}

to {/*CSS样式写在这里*/}

}

2、调用关键帧

animation 属性用于将 @keyframes 动画绑定到元素上，并控制动画的播放。它可以包含多个子属性，如 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction 等

语法：

animation属性：

性名称	作用描述	可选值	默认值
animation-name	指定关键帧动画名称	keyframename \| none	none
animation-duration	单次动画持续时间	时间单位（s/ms）	0s
animation-timing-function	动画速度曲线	ease \| linear \| ease-in \| ease-out \| ease-in-out \| steps(n)	ease
animation-delay	动画延迟时间	时间单位（允许负值）	0s
animation-iteration-count	动画播放次数	number \| infinite	1
animation-direction	动画播放方向	normal \| reverse \| alternate \| alternate-reverse	normal
animation-fill-mode	动画外样式应用	none \| forwards \| backwards \| both	none
animation-play-state	动画播放状态控制	running \| paused	running

说明：

animation-direction‌

作用：控制播放方向
参数：
normal：正向播放
reverse：反向播放
alternate：奇数次正向，偶数次反向
alternate-reverse：奇数次反向，偶数次正向

‌animation-fill-mode‌

作用：设置动画执行前后样式状态
参数：
none：默认状态
forwards：保留最后一帧样式
backwards：应用第一帧样式
both：同时应用前后状态

‌animation-play-state‌

作用：控制动画播放状态
参数：

running：将暂停的动画重新播放

paused：将正在播放的元素动画停下来

三、CSS3 动画的优势

纯CSS实现：无需依赖JavaScript或第三方库，减少了代码的复杂性和加载时间。

性能优化：浏览器对CSS动画进行了优化，通常比JavaScript动画更加流畅和高效。

易于维护：CSS动画与页面样式分离，使得样式和动画的维护更加容易。

兼容性：现代浏览器普遍支持CSS3动画，具有良好的兼容性。

四、动画应用

1、背景动画（通过改变背景图片的位置来实现动画效果。）

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>背景动画</title><style>body {display: flex; /* 使用弹性布局 */justify-content: center; /* 水平居中 */align-items: center; /* 居中显示 */height: 100vh; /* 确保足够长，以便滚动 */font-size: 30px;color: #fff;background-image: -webkit-linear-gradient(125deg, #2c3e50, #27ae60, #2980b9, #e74c3c, #8e44ad); /* 渐变背景 */background-size: 400%;  /* 背景图大小 */animation: bgmove 10s infinite; /* 动画名称、持续时间、无限循环 */}/* 定义动画 */@keyframes bgmove {from {background-position: 0% 50%; /* 起始位置 */}50% {background-position: 100% 50%; /* 中间位置 */}to {background-position: 0% 50%; /* 结束位置，回到起始点形成循环效果 */}}</style>
</head>
<body><h1>Animate Background</h1>
</body>
</html>

2、逼真的水滴动图（通过改变元素的边框半径和阴影来实现动画。）

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>水滴动图</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {width: 100vw;height: 100vh;display: flex;background-color: #00a8ff;justify-content: center;}/* 水面 */.water {margin-top: 200px;width: 300px;height: 300px;border: 1px solid #000;border-radius: 72% 28% 64% 36% / 12% 17% 83% 88%;box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0.5),10px 10px 20px rgba(0, 0, 0, 0.3),15px 15px 30px rgba(0, 0, 0, 0.05),inset -10px -10px 15px rgba(255, 255, 255, 0.8);  /* 阴影效果 */animation: move 5s linear infinite alternate; /* 动画效果  */}/* 水滴 */.water::after, .water::before {content: '';position: absolute;background-color: rgba(255, 255, 255, 0.8);}/* 水滴后 */.water::after {width: 20px;height: 20px;top: 240px;left: 47%;border-radius: 9% 91% 35% 65% / 51% 17% 83% 49%;}/* 水滴前 */.water::before {width: 10px;height: 10px;top: 230px;left: 45%;border-radius: 53% 47% 46% 54% / 99% 0% 100% 1%;}/* 动画效果 */@keyframes move {25% {border-radius: 11% 89% 65% 35% / 64% 32% 68% 36%;  /* 改变形状 */}50% {border-radius: 60% 40% 65% 35% / 64% 32% 68% 36%;  /* 改变形状 */}to {border-radius: 73% 27% 65% 35% / 64% 67% 33% 36%;}}</style>
</head>
<body><div class="water"></div>
</body>
</html>

3、热点图动画（通过逐渐放大和降低透明度的圆圈来表示热点的动态变化。）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>热点图动画</title><style>body {position: relative;background-color: coral;}/* 热点的位置，大小 颜色 */.beijing, .shanghai, .guangzhou {position: absolute;width: 40px;height: 10px;font-size: 12px;color: white;}/* 热点位置 */.beijing { top: 100px; left: 500px; }.shanghai { top: 250px; left: 550px; }.guangzhou { top: 350px; left: 480px; }/* 动画圆点大小，颜色，阴影 */.dot {width: 8px;height: 8px;background-color: deepskyblue;border-radius: 50%;box-shadow: 0 0 12px deepskyblue;}/* 动画圆点位置 */.bjdot, .shdot, .gzdot {position: absolute;}/* 圆点位置 */.bjdot { top: 105px; left: 485px; }.shdot { top: 255px; left: 535px; }.gzdot { top: 355px; left: 465px; }/* 动画圆点 */.dot div[class^="circle"] {position: absolute;transform: translate(-50%, -50%);margin-top: 4px;margin-left: 4px;width: 8px;height: 8px;border: 1px solid deepskyblue;box-sizing: border-box;border-radius: 50%;box-shadow: 0 0 12px deepskyblue;}/* 动画延迟时间 */.circle1 { animation: movie 3s linear infinite; }.circle2 { animation: movie 3s linear 1s infinite; }.circle3 { animation: movie 3s linear 2s infinite; }/* 动画 */@keyframes movie {0% {}70% {width: 60px;height: 60px;opacity: 0.3;}100% {width: 60px;height: 60px;opacity: 0;}}</style>
</head>
<body><div class="beijing">北京</div><div class="shanghai">上海</div><div class="guangzhou">杭州</div><div class="dot bjdot"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div></div><div class="dot shdot"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div></div><div class="dot gzdot"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div></div>
</body>
</html>