首页 > 代码库 > css3动画之——动态的省略号

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

2024-08-07 02:48:28   214人阅读

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

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

上图：（为了对于块元素更明确，我们选用各种强烈对比的颜色）

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

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title><link href="http://www.mamicode.com/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）

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


联系
我们