欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

animation动画以及静态动态太极案例的制作

程序员文章站 2022-05-04 19:55:06
...

动画

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

注意

animation-name: 是用来定义一个动画的名称,其主要有两个值:IDENT是由Keyframes创建的动画名,换句话说此处的IDENT要和Keyframes中的IDENT一致,如果不一致,将不能实现任何动画效果;none为默认值,当值为none时,将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样,我们可以同时附几个animation给一个元素,我们只需要用逗号“,”隔开。

1. 必要元素:

(a) 通过@keyframes指定动画序列;自动补间动画,确定两个点,系统会自动计算中间过程。这两个点就称为关键帧。我们可以设置多个关键帧。

(b) 通过百分比将动画序列分割成多个节点;

( c) 在各节点中分别定义各属性;

(d) 通过animation将动画应用于相应元素;

2. animation样式常用属性:

(a) 动画序列的名称:animation-name: move;

(b) 动画的持续时间:animation-duration: 1s;

( c) 动画的延时:animation-delay: 1s;

(d) 播放状态:animation-play-state: paused|running;

(e) 播放速度:animation-timing-function: linear;

(f) 播放次数 反复:animation-iteration-count: 1;

(g) 动画播放完结后的状态:animation-fill-mode: forwards;

(h) 循环播放时,交叉动画:animation-direction: alternate;

3.动画缩写

动画的缩写: animation: move 2s linear 0s infinite alternate both;

  • 第一个参数:动画的名字
  • 第二个参数:动画的耗时
  • 第三个参数:动画的速度函数
  • 第四个参数:延迟时间
  • 第五个参数:播放次数
  • 第六个参数:交替动画
  • 第七个参数:设置动画的起始的状态

4. 代码说明:

	<style>
		* {
			padding: 0;
			margin: 0;
		}

		div {
			width: 300px;
			height: 300px;
			margin: 100px auto;
		}

		div>img {
			width: 100%;
		}

		/*添加动画*/
		@keyframes rotateAni {
			0% {
				/*可以同时对多个属性添加动画效果*/
				transform: rotate(0deg) scale(1);
			}

			50% {
				transform: rotate(180deg) scale(2);
			}

			100% {
				transform: rotate(360deg) scale(1);
			}
		}

		div:hover>img {
			/*动画名称-自定义*/
			animation-name: rotateAni;
			/*动画时间*/
			animation-duration: 1s;
			/*动画速率曲线: linear:匀速  ease:动画以低速开始,然后加快,在结束前变慢  ease-in:动画以低速开始  ease-out:动画以低速结束  ease-in-out:动画以低速开始和结束*/
			animation-timing-function: linear;
			/*动画播放次数*/
			animation-iteration-count: 4;
			/*动画时间延迟*/
			animation-delay: 0s;
			/*动画播放完的状态:  forwards:保持动画播放完毕后的状态 backwards:退回到原始状态(默认值)*/
			animation-fill-mode: forwards;
			/*动画是否轮流反射播放:  alternate:在规定的次数内轮流反射播放  normal:正常播放*/
			/*animation-direction: alternate;*/
		}

		div:active>img {
			/*动画的当前播放状态:  paused:暂停  running:运行*/
			animation-play-state: paused;
		}
	</style>

4.案例

案例一:动态太极

<style>
		#bcircle {
			border: 1px solid black;
			width: 200px;
			height: 400px;
			border-width: 2px 200px 2px 2px;
			border-radius: 50%;
			transition: transform 2s;
			margin: 0 auto;
			transform: skewX(60deg);
			animation: move 2s linear infinite;
		}
		@keyframes move {
			0%{
				transform: skewX(60deg) rotateZ(0);
			}
			100%{
				transform: skewX(60deg) rotateZ(360deg);
			}
		}
		
		.tbcircle {
			width: 200px;
			height: 200px;
			border: 1px solid transparent;
			border-radius: 50%;
			margin-left: 98px;
			margin-top: -2px;
			background-color: black;
		}

		.bbcircle {
			width: 200px;
			height: 200px;
			border: 1px solid transparent;
			border-radius: 50%;
			margin-left: 98px;
			margin-bottom: -2px;
			background-color: white;
		}

		.tbcircle div {
			width: 50px;
			height: 50px;
			border: 1px solid transparent;
			margin: 0 auto;
			margin-top: 63px;
			border-radius: 50%;
			background-color: white;
		}

		.bbcircle div {
			width: 50px;
			height: 50px;
			border: 1px solid transparent;
			margin: 0 auto;
			margin-top: 63px;
			border-radius: 50%;
			background-color: black;
		}
	</style>

<div id="bcircle">
		<div class="tbcircle">
			<div class="c1">
			</div>
		</div>
		<div class="bbcircle">
			<div class="c1">
			</div>
		</div>
	</div>

案例二:静态太极

<style>
#box {
            border: 1px solid #000;
            width: 200px;
            height: 400px;
            border-width: 2px 200px 2px 2px;
            border-radius: 50%;
        }
        .box1{
            width: 200px;
            height: 200px;
            border: 1px solid transparent;
            border-radius: 50%;
            margin-left: 98px;
            margin-bottom: -2px;
            background-color: black;
        }
        .cir1{
            width: 50px;
            height: 50px;
            border: 1px solid transparent;
            margin: 0 auto;
            margin-top: 63px;
            border-radius: 50%;
            background-color: #fff;
        }
        .cir2{
            width: 50px;
            height: 50px;
            border: 1px solid transparent;
            margin: 0 auto;
            margin-top: 63px;
            border-radius: 50%;
            background-color: #000;

        }
        .box2{
            width: 200px;
            height: 200px;
            border: 1px solid transparent;
            border-radius: 50%;
            margin-left: 98px;
            margin-bottom: -2px;
            background-color: white;
        }
        
    </style>

 <div id="box">
        <div class="box1">
            <div class="cir1"></div>
        </div>
        <div class="box2">
            <div class="cir2"></div>
        </div>
    </div>