标签:动画 效果 color animation background 0% 0px CSS
网页中,需要制作一些动画,来丰富你的网页,如果你会用flash的话,自然是极好的,不过,插个题外话,Adobe Flash Player在2020年已经宣布停止更新支持,flash似乎在不久后将会停用。那么如何使用CSS来完成网页的动画效果制作呢?
下面来看一下基本的步骤:
首先,需要在样式中设置一个动画帧,其语法格式为:
@keyframes 动画帧名字
{0%{}
50%{}
100%{}
}
数值可以有很多个,只要在0%到100%之间都行,他代表的是动画在%数值的状态(目的区域和形状大小等)
其次,在所需要使用的盒子上,调用该动画帧,其语法格式为:
选择器中添加属性
{animation: 动画帧名;
animation-duration:完成动画的时间(要加单位,s或者ms);
animation-其他和动画帧设置有关的属性
}
了解了上述动画帧属性的基本用法后,下面我们来看实现:
本次实现的动画效果如下:
由于没有上传视频,就简单的用一个文字描述了:一个圆形,向右移动后变为正方形,又向右移动变为圆形,然后向左移动变为正方形,在向左移动变为圆形。
具体代码如下:
<!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>关卡7</title>
</head>
<style>
#bigbox
{
height: 300px;
width: 700px;
background-color: #08ECD9;
margin: auto auto;
}
#box1
{position: relative;
height: 100px;
width:100px;
border-radius: 80%;
background-color: #E06D6D;
top:75px;
animation: move;
animation-duration: 3s; /*完成动画的时间*/
animation-direction: alternate;/*设置动画是可以倒过来来回播放的*/
animation-iteration-count: 4;/*设置动画的来回播放次数,一来一回count计数为2*/
}
@keyframes move
{
0%{
transform:translate(0px,0px);
}
50%
{
transform:translate(300px,0px);
background-color: #E06D6D;
border-radius: 0%;
}
100%
{
transform:translate(600px,0px);
background-color: #ecd507;
}
}
</style>
<body>
<div id="bigbox">
<div id="box1"></div>
</div>
</body>
</html>
其中animation-动画相关设置,可以参考:w3cschool。
网址为:https://www.w3school.com.cn/
标签:动画,效果,color,animation,background,0%,0px,CSS 来源: https://blog.csdn.net/weixin_57298639/article/details/117584748
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。