码迷,mamicode.com
首页 > Web开发 > 详细

css3动画之——动态的省略号

时间:2014-12-09 22:46:52      阅读:3131      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   ar   color   os   sp   for   on   

今天学习了CSS3动画,涉及到的属性:@keyframes,animation,animation-duration,animation-name,animation-timing-function,

animation-delay,animation-iteration-count,animation-direction

上图:(为了对于块元素更明确,我们选用各种强烈对比的颜色)

bubuko.com,布布扣

先上html代码:(非常的简单,就是定义了一个无序列表,但要主要的是再简单的界面,都要作为块级元素,这里就定义了2个div)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
<link href="css/dots.css" rel="stylesheet">
</head>
<body>
<div class="about">
  <ul>
    <div id="fountainG">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </div>
  </ul>
</div>
</body>
</html>

 下面上css3代码:

ul, li { list-style-type: none }
.about { width: 100%; background: #aaa; padding: 20px 0; overflow: hidden }
.about ul { width: 1000px; margin: auto; line-height: 24px ;background:#bbb;}
#fountainG { position: relative; width: 240px; height: 29px;background:#ccc; }
/*这个是每个点的自己的块*/ #fountainG li { background:#ddd;position: absolute; top: 0; width: 29px; height: 29px; -moz-animation: bounce_fountainG 3s linear infinite; -moz-transform: scale(.3); -moz-border-radius: 19px; -webkit-animation: bounce_fountainG 1.2s linear infinite; -webkit-transform: scale(.3); -webkit-border-radius: 19px; -ms-animation: bounce_fountainG 1.2s linear infinite; -ms-transform: scale(.3); -ms-border-radius: 19px; -o-animation: bounce_fountainG 1.2s linear infinite; -o-transform: scale(.3); -o-border-radius: 19px; animation: bounce_fountainG 1.2s linear infinite; transform: scale(.3); border-radius: 19px; } #fountainG li:first-child { left: 0; -moz-animation-delay: 0.48s; -webkit-animation-delay: 0.48s; -ms-animation-delay: 0.48s; -o-animation-delay: 0.48s; animation-delay: .48s; } #fountainG li:nth-child(2) { left: 30px; -moz-animation-delay: 0.6s; -webkit-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; } #fountainG li:nth-child(3) { left: 60px; -moz-animation-delay: 0.72s; -webkit-animation-delay: 0.72s; -ms-animation-delay: 0.72s; -o-animation-delay: 0.72s; animation-delay: 0.72s; } #fountainG li:nth-child(4) { left: 90px; -moz-animation-delay: 0.84s; -webkit-animation-delay: 0.84s; -ms-animation-delay: 0.84s; -o-animation-delay: 0.84s; animation-delay: 0.84s; } #fountainG li:nth-child(5) { left: 120px; -moz-animation-delay: 0.96s; -webkit-animation-delay: 0.96s; -ms-animation-delay: 0.96s; -o-animation-delay: 0.96s; animation-delay: 0.96s; } #fountainG li:nth-child(6) { left: 150px; -moz-animation-delay: 1.08s; -webkit-animation-delay: 1.08s; -ms-animation-delay: 1.08s; -o-animation-delay: 1.08s; animation-delay: 1.08s; } #fountainG li:nth-child(7) { left: 180px; -moz-animation-delay: 1.2s; -webkit-animation-delay: 1.2s; -ms-animation-delay: 1.2s; -o-animation-delay: 1.2s; animation-delay: 1.2s; } #fountainG li:nth-child(8) { left: 210px; -moz-animation-delay: 1.32s; -webkit-animation-delay: 1.32s; -ms-animation-delay: 1.32s; -o-animation-delay: 1.32s; animation-delay: 1.32s; }

/*这里是定义动画函数,很简单就是从1倍减小到0.3倍。*/ @-moz-keyframes bounce_fountainG { 0% { -moz-transform:scale(1); background-color:#238d7b; } 100% { -moz-transform:scale(.3); background-color:#FFFFFF; } } @-webkit-keyframes bounce_fountainG { 0% { -webkit-transform:scale(1); background-color:#238d7b; } 100% { -webkit-transform:scale(.3); background-color:#FFFFFF; } } @-ms-keyframes bounce_fountainG { 0% { -ms-transform:scale(1); background-color:#238d7b; } 100% { -ms-transform:scale(.3); background-color:#FFFFFF; } } @-o-keyframes bounce_fountainG { 0% { -o-transform:scale(1); background-color:#238d7b; } 100% { -o-transform:scale(.3); background-color:#FFFFFF; } } @keyframes bounce_fountainG { 0% { transform:scale(1); background-color:#238d7b; } 100% { transform:scale(.3); background-color:#bbb; } }

 为了更清楚的看清出块级之间的关系,截一张无动画效果的图片:(初始状态是.3)

bubuko.com,布布扣

css3动画之——动态的省略号

标签:style   blog   io   ar   color   os   sp   for   on   

原文地址:http://www.cnblogs.com/shixiaomiao/p/4154316.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!