Css3动画属性和作用

最新推荐文章于 2024-05-06 19:28:55 发布

lpl_L

最新推荐文章于 2024-05-06 19:28:55 发布

阅读量310

点赞数

本文链接：https://blog.csdn.net/lpl_L/article/details/108307052

版权

什么是 CSS3 中的动画？

动画是使元素从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数。

一.使用动画更改颜色背景：
例子：


<!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>Document</title>
    <style>
    @keyframes myfirst
{
0% {background: red;}
20%{background: blue;}
50%{background: purple;}
100% {background: yellow;}
}
.test1{width: 300px;
        height: 300px;
        background: black;
        animation: myfirst 6s;
        }
    </style>
</head>
<body>
    <div class="test1">
      
    </div>
</body>

用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
其中0%代表的是动画的开始，100%是代表动画的完成、结束。

二.改变位置：
动画不仅能改变背景色，也可以改变其位置。
例子：


<!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>Document</title>
    <style>
        @keyframes myfirst{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:2s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
} 
</style>
</head>
<body>
    <div></div>
</body>
</html>