css动画基本使用

最新推荐文章于 2024-07-25 15:07:09 发布

激进的土豆

最新推荐文章于 2024-07-25 15:07:09 发布

阅读量405

点赞数 3

分类专栏： html+css+js 文章标签： css 动画 css3

本文链接：https://blog.csdn.net/weixin_49627122/article/details/126490677

版权

html+css+js 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

示例：太极旋转

动画（animation）：是CSS3中具有颠覆性的特征之一，可通过设置多个结点来精确控制一个或一组动画，用来实现复杂的动画效果。

制作动画分为两步：

定义动画：

使用/调用动画：

用keyframes定义动画：

<style>
   @keyframes move{
     0%{
        transform: translate(0px);
        }
     100%{
        transform: translate(100px);
        }
.div1{
    animation-name:move;/*需要执行的动画的名字*/
    animation-duration: 3s;/*所需要的时间*/
    animation-iteration-count: infinite;/* 执行次数*/
}
</style>

动画常用属性：

动画序列：

1.可以做多个状态的变化

2.里面的百分比必须是整数

3.里面的百分比就是总的时间的划分

根据百分比状态确定实现什么动画：

@keyframes move{
        0%{
            transform: translate(0px,0px);  
        }
        25%{
            transform: translate(100px,0px);
        }
        50%{
            transform: translate(100px,100px);
        }
        75%{
            transform: translate(0px,100px);
        }
        100%{
            transform: translate(0,0);
        }
    }

transition属性：

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 转换元素定义透视视图。

动画简写属性：

animation:动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;

示例：

太极旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
@keyframes move {
    from{
        transform: rotate(0deg);
    }
    to{
        transform:rotate(360deg);

    }
}
body {
	background-color: #adadad;/*设置背景色*/
}
div{
    animation-duration:0.1ms;
    animation-name: move;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
 }
#yinyang {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: linear-gradient(
		to bottom,
		#ffffff 0%,
		#ffffff 50%,
		#000000 50%,
		#000000 100%
	);
	position: relative;
	margin: 100px auto;
}
 
#yinyang::before {
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 40px solid black;/*左侧黑球套白点*/
	background-color: white;
	left: 0;
	top: 50px;
}
 
#yinyang::after {
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 40px solid white;/*右侧白球套黑点*/
	background-color: black;
	right: 0;
	top: 50px;
}
    </style>
</head>
<body>
    <div id="yinyang"></div>
</body>
</html>