你的位置:首页 > 网页设计

[网页设计]css3动画第一式


在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~

查看原地址

下面放代码:

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>test</title><style>.box {  position: relative;  margin-top: 50px;  height: 60px;}.test {  position: absolute;  top: 0;  left: 0;  width: 100px;  height: 50px;  font:14px/50px Microsoft YaHei;  text-align: center;  color: #fff;  border-radius: 5px;  background-color: #eb5C7e;  -webkit-animation-name: gogogo;  -webkit-animation-duration: 6s;  -webkit-animation-timing-function:ease;  -webkit-animation-iteration-count: infinite;  animation-name: gogogo;  animation-duration: 6s;  animation-timing-function:ease;  animation-iteration-count: infinite;}@-webkit-keyframes gogogo{  0% {     background-color: #eb5C7e;    -webkit-transform: rotate(0);  }  10% {    background-color: #eb5C7e;    -webkit-transform: rotate(0);    }  30%{    background-color: #1b9e55;    left: 0;     -webkit-transform: rotate(30deg);      }  50%{    left: 400px;    background-color: #2a7df8;    -webkit-transform: rotate(0);  }  70%{    left: 400px;    background-color: #2a7df8;    -webkit-transform: rotate(0);  }    100%{     left:0;    background-color: #eb5C7e;    -webkit-transform: rotate(-360deg);  }}@keyframes gogogo{  0% {     background-color: #eb5C7e;    transform: rotate(0);    }  10% {    background-color: #eb5C7e;    transform: rotate(0);    }  30%{    background-color: #1b9e55;    left: 0;     transform: rotate(30deg);      }  50%{    left: 400px;    background-color: #2a7df8;    transform: rotate(0);  }  70%{    left: 400px;    background-color: #2a7df8;    transform: rotate(0);  }    100%{     left:0;    background-color: #eb5C7e;    transform: rotate(-360deg);  }}</style></head><body>  <div class="box">    <div class="test">      翻滚吧    </div>  </div></body></html>

然后,你可能看不到效果?少年,该升级浏览器啦~~~