整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
前端開發來說，通過動畫來提升交互效果是很常見的。在很早以前，做web動畫主要通過javascript或者jquery或者flash這樣的手段，非常麻煩，自打有了ccs3，做動畫就太方便了，只需幾行css代碼就可以搞定。
這里我們就演示一個常見的循環滾動效果，任務是這樣：先準備一個圖片，平鋪到頁面上充滿整個屏幕，然后就讓畫面一直向上循環滾動，形成無邊無際的感覺。
雖然可以從網上搜到一些類似的代碼，但是魚龍混雜，無關緊要的代碼非常多，不夠純粹。如果要弄明白動畫的原理，只有自己動手做一遍才能真正消化吃透。所以我們來一步步原創這個代碼，排除所有不必要的基礎樣式，只說要點，3個步驟你就可以完全掌握其精髓！
第一步：布局
首先，滾動的圖片需要放在一個容器里，一行html代碼即可完成：
第二步：把圖片放進容器
css中body的邊界設為0，把容器設高度100%以充滿屏幕，再調用背景圖pic.png
第三部：讓畫面動起來
咱不做標題黨，循環滾動靠的就是3行css動起來的。
先是1行 -webkit-animation屬性：4個參數分別表示：動畫名稱scroll，1秒時長，移動速度為線性的，無限循環。
然后是對應的關鍵幀 @-webkit-keyframes 屬性，這是自己定義的動畫規則，只需寫2行規則即可：
原理：動畫就是畫從一個地方動到另一個地方。對普通滾動效果來說，有起點和終點這兩個節點的位置就夠了。所以我們用0%和100%分別表示起點和終點，指定2個背景圖的xy位置坐標即可。圖片會在規定時間內從起點移動到終點，并循環下去，數值是負表示是向上移動。320px正好是圖片的高度，這樣循環的時候是無縫銜接的。
好了，最終完整的代碼如下，是不是很精練呢？保存成 index.html 即可
代碼寫完了，還要記得在當前目錄要有pic.png這個圖片哦，我隨便畫了幾筆，絕無觀賞性，建議自己找個好看點的圖片來代替。
現在用瀏覽器打開index.html即可看到效果，比較魔性的地方在于，如果你盯著看久了，關閉窗口以后會出現幻覺，仿佛整個顯示器都在向上飛，哈哈！
最后我們來說說瀏覽器兼容性問題：
大家可能注意到了，前面那2個古怪的 -webkit-animation, @-webkit-keyframes 這里的-webkit-其實是一個前綴，animation和@keyframes才是CSS的標準屬性。
當加上-webkit-后，就形成了一個針對特殊瀏覽器的專有屬性，表示用在谷歌的chrome和蘋果的safari瀏覽器上。此外還有-moz前綴代表針對firefox瀏覽器的私有屬性。
所以我們在用到css3的一些特性的時候，經常使用一大堆的重復性的代碼，比如我們今天的這個代碼，有人會寫成這個樣子：
一個簡單的動畫就要寫這么多冗余的代碼，為的只是支持一些舊的瀏覽器，有必要嗎？為什么在這個例子中我們僅僅采用了-webkit-而沒有使用其它專有屬性呢？
因為現在已經是2019年了！谷歌蘋果的瀏覽器是主流，占據了絕大部分，而其它小眾瀏覽器也大多能夠兼容他們，在版本上，大部分人安裝瀏覽器是直接下載新版本安裝使用，而非找出家里陳年的老軟盤、老光盤去安裝，家中的老電腦也早已升級不知多少回了，所以也幾乎沒有機會使用低版本的瀏覽器了！
至于微軟的IE，就更別提了，IE9以前不支持動畫的，只能用js或者jquery來寫動畫，直到IE10才支持css動畫，隨后IE被放棄，主推Edge，搞了幾天越來越頭大干脆也放棄，現在直接使用chrome內核了，所以針對ie的兼容性除非有特殊要求已經無需考慮。
你在網上能看到的范例代碼，如果有寫成那么復雜臃腫的，估計也都是3-5年前發的老文，或者抄來抄去不做思考的搬磚工留下的“初學者”筆記。
我們不仿測試一下幾款主流瀏覽器的情況看看，結論：
測試結果表明，-webkit-的寫法在4款不同內核的瀏覽器上都能正常使用，所以我們的代碼因此能得以簡化。
當然，這個例子也有局限性，比如你看，只有蘋果safari不支持標準寫法，萬一將來他改邪歸正了呢？畢竟標準寫法才是眾望所歸不是？使用針對個別瀏覽器的私有屬性寫法，雖可用但畢竟有些怪怪的，將來怎么樣還很難說呢。這樣看來，如果使用古老的處理辦法，重復N次為每個專屬瀏覽器各寫一份代碼，除了辣眼睛也真沒什么錯。
瀏覽器的兼容問題涉及面實在是非常廣，三言兩語還真說不完，以后會專門來講。
加載動畫效果演示
HTML代碼
<div class="infinity-1"></div>
<div class="infinity-2"></div>
<div class="infinity-3"></div>
<div class="infinity-4"></div>
<div class="infinity-5"></div>
<div class="infinity-6"></div>
<div class="infinity-7"></div>
<div class="infinity-8"></div>
<div class="infinity-9"></div>
<div class="infinity-10"></div>
CSS代碼
.infinity-1 {
width:90px;
height:14px;
background: repeating-linear-gradient(90deg, currentColor 0 calc(25% - 5px),#0000 0 25%) left/calc(4*100%/3) 100%;
animation:i1 0.5s infinite linear;
}
@keyframes i1 {
100% {background-position: right}
}
.infinity-2 {
width:90px;
height:14px;
background: radial-gradient(circle closest-side, currentColor 92%,#0000 ) calc(100%/3) 0/calc(100%/4) 100%;
animation:i2 0.5s infinite linear;
}
@keyframes i2 {
100% {background-position: 0 0}
}
.infinity-3 {
width:calc(80px / 0.707); /* 0.707 = cos(45deg) */
height:14px;
background: repeating-linear-gradient(-45deg, currentColor 0 15px,#0000 0 20px) left/200% 100%;
animation:i3 2s infinite linear;
}
@keyframes i3 {
100% {background-position:right}
}
.infinity-4 {
width:calc(80px / 0.707);
height:14px;
background:
repeating-linear-gradient(135deg, currentColor 0 15px,#0000 0 20px) left top,
repeating-linear-gradient( 45deg, currentColor 0 15px,#0000 0 20px) left bottom;
background-size: 200% 50%;
background-repeat: no-repeat;
animation:i4 2s infinite linear;
}
@keyframes i4 {
100% {background-position:top right,bottom right}
}
.infinity-5 {
width:90px;
height:14px;
background:
radial-gradient(circle 10px at right 7px top 50%,#0000 92%,currentColor),
radial-gradient(circle 10px at right 0 top 50%,currentColor 92%,#0000);
background-size: calc(100%/3) 100%;
background-position: 50% 0%;
animation:i5 .5s infinite linear;
}
@keyframes i5 {
100% {background-position: 0% 0%}
}
.infinity-6 {
width:90px;
height:14px;
background:
conic-gradient(from 45deg at calc(100% - 7px) 50%,currentColor 90deg,#0000 0),
conic-gradient(from -135deg at 7px 50%,currentColor 90deg,#0000 0);
background-position: calc(100%/3) 0;
background-size:calc(100%/4) 100%;
animation:i6 0.5s infinite linear;
}
@keyframes i6 {
100% {background-position: 0 0}
}
.infinity-7 {
width:90px;
height:14px;
background:
linear-gradient(90deg,currentColor 50%,#0000 0) repeat-x,
conic-gradient(from 45deg at right 7px top 50%,currentColor 90deg,#0000 0);
background-position: calc(100%/3) 50%;
background-size:calc(100%/4) 60%,calc(100%/4) 100%;
animation:i7 0.5s infinite linear;
}
@keyframes i7 {
100% {background-position: 0 50%}
}
.infinity-8 {
width:90px;
height:12px;
background:
linear-gradient(90deg ,currentColor 50%,#0000 0) 0 0%,
linear-gradient(-90deg,currentColor 50%,#0000 0) 0 50%,
linear-gradient(90deg ,currentColor 50%,#0000 0) 0 100%;
background-size: 8px calc(100%/3);
background-repeat: repeat-x;
animation:i8 .25s infinite linear;
}
@keyframes i8 {
100% {background-position: -8px 0%,-8px 50%,-8px 100%}
}
.infinity-9 {
width:90px;
height:14px;
background:
linear-gradient(90deg,#0000 16px, currentColor 0 30px, #0000 0),
radial-gradient(circle closest-side at 68% 50%, currentColor 92%,#0000),
conic-gradient(from 45deg at calc(100% - 7px) 50%,currentColor 90deg,#0000 0),
conic-gradient(from -135deg at 7px 50%,currentColor 90deg,#0000 0);
background-position: 0 0;
background-size:calc(3*100%/4) 100%;
background-repeat: repeat-x;
animation:i9 2s infinite linear;
}
@keyframes i9 {
100% {background-position: -300% 0}
}
.infinity-10 {
width:90px;
height:12px;
background:
linear-gradient( 90deg,currentColor 50%,#0000 0) 0 0%,
linear-gradient(-90deg,currentColor 50%,#0000 0) 0 0%;
background-size: 20px 100%;
background-repeat: repeat-x;
animation:i10 1s infinite linear;
}
@keyframes i10 {
100% {background-position: -20px 0%,20px 0%}
}
/**/
body {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
grid-auto-rows: 130px;
place-items:center;
}
div[class]:nth-child(odd) {
color:darkblue;
}
* {
box-sizing: border-box;
}
分享不易，請關注，點贊，評論哦，更多分享哦
SS3動畫原理實現輪播圖，主要用到CSS3的動畫過渡實現切換，感興趣的小伙伴可以看看！
效果圖：
實現代碼
html:
css:
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
