css3动画之——动态的省略号
生活随笔
收集整理的這篇文章主要介紹了
css3动画之——动态的省略号
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
css3動畫之——動態的省略號
#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; } }
今天學習了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="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）
posted on 2014-12-09 22:08 施小喵 閱讀(...) 評論(...) 編輯 收藏轉載于:https://www.cnblogs.com/shixiaomiao/p/4154316.html
總結
以上是生活随笔為你收集整理的css3动画之——动态的省略号的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MyEclipse运行tomcat提示严
- 下一篇： 类库探源——System.Excepti