css3動畫之——動態的省略號

時間 2019-11-20

標籤 css3 css 動畫動態省略號欄目 CSS 简体版

原文原文鏈接

今天學習了CSS3動畫，涉及到的屬性：@keyframes,animation,animation-duration,animation-name,animation-timing-function,css

animation-delay,animation-iteration-count,animation-directionhtml

上圖：（爲了對於塊元素更明確，咱們選用各類強烈對比的顏色）css3

先上html代碼：（很是的簡單，就是定義了一個無序列表，但要主要的是再簡單的界面，都要做爲塊級元素，這裏就定義了2個div）web

<!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）學習

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。