位置:首页 > 软件操作教程 > 编程开发 > CSS > 问题详情

CSS3 实现动画

提问人:刘团圆发布时间:2020-11-19

    通过@keyf「ames规则可以创建动画,原理是将一套CSS样式逐步从当前的样式更改为新的样式。 

    使用@keyframes创建动画时,需要把它绑定到一个选择器,否则动画不会有任何效果。需要指定至少两个CSS3的动画属性:规定动画的名称,规定动画的时长。

    下面通过一个实例来理解CSS3动画。

    【例题】创建CSS3动画

    代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.d1{

width: 200px;

height: 200px;

background: blue;

animation:myFirstAni 5s;

transform: rotate(0deg);

margin:20px;

}

@keyframes myFirstAni{

0%{margin-left: 0px;background: blue;transform: rotate(0deg);}

50%{margin-left: 500px;background: red;transform: rotate(720deg);}

100%{margin-left: 0px;background: blue;transform: rotate(0deg);}

}

.d2{

width: 200px;

height: 200px;

background: red;

animation:mySecondtAni 5s;

transform: rotate(0deg);

margin:20px;

}

@keyframes mySecondtAni{

0%{margin-left: 0px;background: red;transform: rotateY(0deg);}

50%{margin-left: 500px;background: blue;transform: rotateY(720deg);}

100%{margin-left: 0px;background: red;transform: rotateY(0deg);}

}

</style>

</head>

<body>

<div></div>

<div></div>

</body>

</html>

image.png

继续查找其他问题的答案?

相关视频回答
回复(0)
返回顶部