純css3實現文字間歇滾動效果

場景：

假設有4條資料或者標題，視口中只顯示兩條，採用每次向上滾動一條資料來展示所有的資料。效果如圖：

主要用到了css3的兩個屬性：@framekeys和animation

通過 @keyframes 規則，能夠建立動畫。建立動畫的原理是，將一套 css 樣式逐漸變化為另一套樣式。

animation能夠將動畫與元素繫結。

注意：由於視口中顯示兩條資料，所以要把最前面的兩行資料拼接在所有最後面，主要是為了避免一次動畫完成之後即所有的資料都已經滾動到視口的上方，等待下一次動畫的過程中會有空白出現的現象，把最前面的兩行資料拼接在最後面，當除了拼接的資料以外的其他資料滾動到視口上方時，拼接的資料臨時佔位等待下一次動畫出現，不至於出現空白。

html**如下：

<

div>
<
ul>
<
li>第一行
li>
<
li>第二行
li>
<
li>第三行
li>
<
li>第四行
li>
<
li>第一行
li>
<
li>第二行
li>
ul>
div>

//必須給定的引數

@height:30px;//每次滾動的距離
@num:4;//需要滾動多少條資料
@animatintime:5s;//多長時間完成所有資料的向上滾動一次
//可選的引數
@delayratio:4;
@upratio:1;//延遲滾動時間和滾動一條資料所用到的時間之比
//內部計算使用到的變數，不需要對其賦值
@ratiosum:@delayratio+@upratio;
@eachsum:1/@num;
@everyuptime:@eachsum*@upratio/@ratiosum*100;
@everydelaytime:@eachsum*@delayratio/@ratiosum*100;
//使用迴圈生成@keyframes動畫的時間節點
.myloop(@counter,@everyuptime:1,@everydelaytime:4,@height:30px,@i:0,@index:0) when(@i < @counter)@end:percentage((@i+@everydelaytime)/100);
@.myloop(@counter,@everyuptime,@everydelaytime,@height,(@i+@everydelaytime+@everyuptime),(@index+1));
}//呼叫迴圈，生成@keyframes
@keyframes scroll }
//封裝成mixin，方便在其他需要動畫的位置呼叫
.scroll()//舉例
divulli

@keyframes scroll 20% 25% 45% 50% 70% 75% 95% 100% }

div ul li 

純css3實現滾動的公告

前情 老闆說乙個好的員工都是讓甲方做選擇題而不是問答題。今天需要上乙個公告，基於 前情 準備了三個版本。第一版 橫向單條從右往左滾動。我們來嘍，我們來嘍，歡迎來到我的直播間！我們來嘍，我們來嘍，歡迎來到我的直播間！hornotice hornotice hormove hornotice hormo...

純CSS3實現的標籤效果

1.效果分析 純css3實現的標籤效果，如圖1所示，看看demo。該標籤主要有三個部分組成，左側的三角形 右側的圓角矩形和文字前面的小圓點。重點在左側三角形和文字前面圓點的實現。2.技術難點 三角形利用寬和高為零的元素的邊框實現。將邊框設定為12px solid transparent，然後將右側邊...

純CSS3實現的標籤效果

1.效果分析 純css3實現的標籤效果，如圖1所示，看看demo。該標籤主要有三個部分組成，左側的三角形 右側的圓角矩形和文字前面的小圓點。重點在左側三角形和文字前面圓點的實現。2.技術難點 三角形利用寬和高為零的元素的邊框實現。將邊框設定為12px solid transparent，然後將右側邊...