CSS3——CSS3动画(animation)及应用

我心向阳iu

已于 2023-10-11 15:03:59 修改

阅读量4.9k

点赞数

分类专栏： # H5C3新特性文章标签： css css3 animation

于 2020-07-15 14:47:15 首次发布

本文链接：https://blog.csdn.net/weixin_45525272/article/details/107358662

版权

改革春风吹满地

动画(CSS3) animation
案例1：太阳系的运作
案例2：图片播放
案例3：钟表

动画(CSS3) animation

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

语法格式：

animation:动画名称 花费时间 运动曲线  何时开始
  播放次数  是否反方向;

关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r

@keyframes 动画名称 {
   
  from{
    开始位置 }  0%
  to{
     结束  }  100%
}

animation-iteration-count:infinite;  无限循环播放    默认是1次
animation-direction： alternate   动画应该轮流反向播放    默认是 normal
animation-play-state:paused;   暂停动画"

案例1：太阳系的运作

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>宇宙动画</title>
        	<style type="text/css">
        		* {
     
        			margin: 0;
        			padding: 0;
        		}
        		html,body {
     
                    /*margin: 50px;*/
        			 width: 100%;
        			 height: 100%;
        			 background: url(img/bg.jpg) no-repeat;
        			 background-size: cover;
        			 position: relative;
        		}
        		.box {
     
        			width: 600px;
        			height: 600px;
        			border: 1px solid #ccc;
        			border-radius: 50%;
        			position: absolute; 
        			left: 50%;
        			margin-left: -300px;
        			top: 50%;
        			margin-top: -300px;
        		}

        		.sun {
     
        			 position: absolute;
        			 width: 50px;
        			 height: 50px;
        			 background-color: orange;
        			 border-radius: 50%;
        			 margin-left: -25px;
        			 left: 50%;
        			 margin-top: -25px;
        			 top: 50%;
                     
        			 box-shadow: 0px 0px 100px orange; /*周围日光的效果*/
        		}

        		.lin1 {
     
        			 width: 100px;
        			 height: 100px;
        			 border: 1px solid #ccc;
        			 border-radius: 50%;
        			 margin-left: -50px;
        			 margin-top: -50px;
        			 animation: rotate 10s linear infinite;
        		}

        		.lin1:after {
     
        			 content: "";
        			 width: 20px;
        			 height: 20px;
        			 display: block;
        			 border-radius: 50%;
        			 background-color: orange;
        			 position: absolute;
        			 left: -2px;
        			 top: 10px;
        		}

        		.public {
     
        			 position: absolute;
        			 left: 50%;
        			 top: 50%;
        		}




        		@keyframes rotate {
     
        			 from {
     
        			    transform: rotateZ(0deg);
                        /*transform: rotateX(0deg);*/
        			 }

        			 to {
     
        			 	 transform: rotateZ(360deg);
                          /*transform: rotateX(360deg);*/
        			 }
        		}

        		.lin2 {
     
        			 width: 150px;
        			 height: 150px;
        			 border: 1px solid #ccc;
        			 border-radius: 50%;
        			 margin-left: -75px;
        			 margin-top: -75px;

        			
                      animation: rotate /*rotateX*/ 5s linear infinite;
        		}
        		.lin2:after {
     
        			content: "";
        			width: 10px;
        			height: 10px;
        			background-color