自己制作进度条css和动画的知识应用关键之处_css鼠标悬停平移效果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35307947/article/details/81327316

本文介绍了CSS3中的动画特性，包括如何使用@keyframes定义动画序列、设置动画的各种属性如duration和delay等，以及如何通过简单的HTML和CSS代码实现背景位移动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 1、必要元素： a、通过@keyframes指定动画序列； b、通过百分比将动画序列分割成多个节点； c、在各节点中分别定义各属性 d、通过animation将动画应用于相应元素； 2、关键属性 a、animation-name设置动画序列名称 b、animation-duration动画持续时间 c、animation-delay动画延时时间 d、animation-timing-function动画执行速度，linear、ease、ease-in-out等 e、animation-play-state动画播放状态，running、paused等 f、animation-direction动画逆播，alternate等 g、animation-fill-mode动画执行完毕后状态，forwards（结束）、backwards（开始）等 h、animation-iteration-count动画执行次数，infinite等默认就（1次） <!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	div{
	height:40px;
	width:400px;
	border:1px solid #000;
	margin-top:100px;
	background-image:linear-gradient(45deg,
	yellow 25%,
	green 25%, green 50%,
	yellow 50%, yellow 75%,
	green 75%
	);
	background-size:40px 40px;
	border-radius:5px;
	/* linear 匀速*/
	animation:moveA 1s linear infinite forwards ;
	}
	@keyframes moveA{
	0%{
	background-position:0px 0px;
	}
	100%{
	background-position:100px 0px;
	}
	}
	div:hover{
	/* 暂停*/
	animation-play-state:paused;
	}
	</style>
	</head>
	<body>
	<div class="box"></div>
	</body>
	</html>