好玩的css3技术分享

开发工具与关键技术：DW，css3
作者：陈梅
撰写时间：2019年1月16日

说到css3是我学编程以来，最感兴趣的一门技术，通过老师的学习，再自己的摸索一下。
只学会css3一些简单的技术。
那我就分享一下我学习到的css3动画吧！首先页面布局什么的就不多说了，定好div，
弄好背景图片，设计好背景图片的尺寸，我们就开始设计动画效果了。

```
.lizi{
	position: absolute;
/*	transition-delay: 4s;*/
/*		transition-duration:5s;动画时长*/
	animation: good 5s infinite alternate ;
}
用animation动画属性，再定义一个选择器（good），再给动画一个运动的时长，想要动画无限的运动就在给一个infinite，
infinite的意思是无限的。
如果想图片运动出去了后在回到原来的位置，可以给个alternate。alternate的意思是轮流的。
如果你还想给图片运动时来个过渡效果，也可以用上transition-delay属性哦！过渡的时间任君定义

```
@keyframes good{
	0%{
		transform: translateX(0);
		transform: rotate(0);
		border-radius: 10%;
	}
	20%{
/*		transform: translateX(100px);*/
		transform: rotate(45deg);
		border-radius: 20%;
	}
	40%{
		transform: translateX(200px);
/*		transform: rotate(-180deg);*/
		border-radius: 30%;
	}
	60%{
		transform: translateX(300px);
/*		transform: rotate(180deg);*/
		border-radius: 40%;
	}
	80%{
		transform: translateX(400px);
/*		transform: rotate(360deg);*/
		border-radius: 50%;
	}
	100%{
/*		transform: translateX(500px);*/
        transform: rotate(180deg);
		border-radius: 50%;
	}
}
```
再使@keyframs与good捆绑起来，来个百分比的运动。我设计的运动比列过多，你们也可以把它设计短一点的哦！
我从0%开始设计，但0%时，图片不运动，图片有10%的圆角效果，20%时，图片顺时针旋转了45度；圆角效果为20%；
40%时，图片向X轴运动了200px；圆角为30%；60%时，向X轴运动了300px；圆角为40%，
80%时，向X轴运动了400px；圆角为50%；图片为圆形，100%时，图片向顺时针旋转180度，图片为圆。
在这里，transform:translatrX(100px);为向X轴运动，把X改为Y就是向Y轴运动，
transform:rotate(45deg);就是顺时针旋转45度，45前加上（-），就是逆时针旋转45度，
border-radius为圆角效果，想弄圆角效果可以弄圆角效果，不想弄也可以不弄。
@keyframs里的样式可以按照自己的喜欢定义出自己想要的效果的哦！感兴趣的话，可以试一下的哦！



```

```

```