星空网 > 软件开发 > 网页设计

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>

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




原标题:css3动画第一式

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流