#CSS3动画效果

-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：Dw CSS3
作者：熊强
撰写时间：2019/01/18
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
下面我运用CSS3操作一些简单的动画效果、

下面是代码详情

<div><span></span></div>

先给它一个div
然后就是给它设置一些值

@keyframes around{
  0% {
    transform: translateX(0);
  }
  25%{
    transform: translateX(80px);
	  background:  rgba(217,46,49,1.00);
  }
  50%{
     transform: translate(190px, 300px);
	  background: rgba(188,188,188,0.70);
  }
  75%{
    transform:translate(50px,250px);
	  background: rgba(191,191,191,1.00);
  }
  100%{
    transform: translateY(70px,270px);
  }
}

意思就是说让代码运转到百分之几的时候、它的位置在哪、和它当时的颜色

在大的div里面设置宽高

div {
  width: 500px;
  height: 500px;
  margin: 50px auto;
}

接下来是设置小的div

div span {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: blue;
  border-radius: 100%;
  animation:around;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count:infinite;
}

设置好它的形状之后就设置它的运转时间、次数之类的

那么一个简便的动画效果就完成了

@keyframes规则还是挺好玩的，可以制造出一些有趣的、自己想要的动画、用起来方便又简便
我们只需要在以@keyframes开头、然后给它一个名称、花括号里面可以给它设置多个值比如它运转到百分之几的时候它当时的位置在哪是什么颜色什么之类的等等···
然后就是设置一下你要让它变成动画的样式
之后就是调用动画名称、设置它的运转时间、次数之类的

猜你喜欢