整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天用js做的圖片無縫滾動的效果，朋友們都說CSS3也可以實現，話說自己原來學的都是CSS2，主要用來網頁靜態布局，還真沒想過用CSS3的動畫屬性。于是乎，花了一天時間在w3school上把關于CSS3動畫的知識看了一遍，簡單做了個圖片滾動的效果，有些簡陋，卻也發現CSS3的功能果然強大，也有一些瀏覽器兼容性的問題（不過大家現在用的瀏覽器應該都能支持，別告訴我你還在用XP，那你真是超級懷舊派了，話說XP的確挺好）
這個是用來定義動畫規則用的，在其中能夠定義任意多樣式任意多次數的動畫規則，可以用百分比來規定變化發生的時間。比如0%，25%，50%，75%，100%，也可以用關鍵詞“from”和“to”，等同于0%和100%。
0%是動畫的開始，100%是動畫的結束。一般來說，為了得到瀏覽器更好地支持，我們要始終定義0%和100%。
舉個例子，我們在動畫開始的時候，定義一個div元素的背景色為紅色，動畫到一半的時候，定義背景色為藍色，動畫結束的時候，背景色為黃色，怎么寫這個動畫規則？
@keyframes myfirst
{
0% {background: red;}
50% {background: blue;}
100% {background:yellow;}
}
一般來說，為了更好的適配瀏覽器，我們還要寫幾個作用于不同瀏覽器的規則
1、作用于Firefox瀏覽器
@-moz-keyframes myfirst
{
0% {background: red;}
50% {background: blue;}
100% {background:yellow;}
}
2、作用于Safari和Chrome瀏覽器
@-webkit-keyframes myfirst
{
0% {background: red;}
50% {background: blue;}
100% {background:yellow;}
}
3、作用于Opera瀏覽器
@-o-keyframes myfirst
{
0% {background: red;}
50% {background: blue;}
100% {background:yellow;}
}
1、animation-name:規定動畫的名稱
2、animation-duration:規定動畫完成一個周期的時長
3、animation-timing-function:規定動畫的曲線速度
4、animation-delay:規定動畫開始的時間
5、animation-iteration-count:規定動畫播放的次數
6、animation-direction:規定動畫在下個周期是否反向播放
7、animation-play-state:規定動畫是否正在運行或暫停
888、animation:簡寫屬性，將上邊1—6的屬性在一個表達式中體現，可以減少N多工作量。
最重要的一點，動畫規則只有捆綁到某個選擇器上，動畫才生效。意思一看都明白，關鍵是要多練習實際敲幾次代碼運行下效果，這里我就不再累贅了。
1、擺上我們用來演示的圖片。
<body>
<p>圖片無縫滾動</p>
<div id="wrap">
<ul id="list">
<li>10</li>
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
</div>
</body>
2、加上CSS樣式
*{margin:0; padding: 0;}
p{
margin:0 auto;
text-align: center;
font-size:30px;
}
#wrap{
width:610px;
height:130px;
border:1px solid #000;
position: relative;
margin:100px auto;
overflow: hidden;
}
#list{
position: absolute;
left:0;
top:0;
width:200%;
}
#list li{
width:120px;
height:130px;
border:1px solid red;
background: pink;
color:#fff;
text-align: center;
font-size:50px;
float:left;
list-style: none;
}
3、給ul加上動畫效果。為了適配不同的瀏覽器，還要多添加幾個animation屬性
#list{
position: absolute;
left:0;
top:0;
width:200%;
animation:myfirst 8s linear infinite alternate;
-moz-animation:myfirst 8s linear infinite alternate;
-webkit-animation:myfirst 8s linear infinite alternate;
-o-animation:myfirst 8s linear infinite alternate;
}
好了，大家可以看一看具體效果咯。
用CSS3實現圖片滾動確實很輕松，效果也挺不錯。還是最開始我說的，前期我們暫不必糾結到底JS方法好還是CSS3方法好，只要能把要求的效果實現了就行，進步緣于一點一滴的實踐與鍛煉。
謹以此與大家共勉——一個奮斗在web開發路上的小白
動條的邊角。
最近我朋友問我，他說他使用CSS自定義的滾動條，當x軸和y軸都出現滾動條的時候，它的右下角有個缺口是白色的缺口，挺難看的。他說他想把這玩意染成綠色的，問我有沒有辦法。
·我就先去看了一下系統自帶的滾動條，把它放開看一下，你會發現系統自帶的滾動條右下角的缺口是和盒子的背景的主色是一個色系，都是這種灰色。因為是外層盒子的滾動條，所以它跟隨外層盒子的背景色是同樣的顏色。
·然后我就去看了一下文檔，發現這一個缺口的地方是可以設置的，這個缺口學名叫做邊角，也就是滾動條的邊角。
·然后我們看第三個案例，你會發現第三個盒子的右下角有一塊綠色的部分，這個綠色的部分就是滾動條的邊角部分。
·然后看一下是怎么設置的，是通過web kit scuba corner對這個偽元素進行設置背景色，就可以去修改這個邊角的顏色。
內容首發于工粽號：程序員大澈，每日分享一段優質代碼片段，歡迎關注和投稿！
大家好，我是大澈！
本文約 700+ 字，整篇閱讀約需 1 分鐘。
今天分享一段優質 HTML 代碼片段，只需一行代碼即可實現圖片懶加載的處理。
老規矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區留下你的見解！
<img src="example.jpg" alt="示例圖片" loading="lazy">分享原因
這段代碼使用 HTML5 提供的一個非常簡單的方法：為圖片元素添加 loading="lazy" 屬性，實現了圖片的懶加載。
通過這種方式，我們可以讓瀏覽器自動處理圖片懶加載，無需額外的 js 腳本支持。
這對于不需要考慮兼容性的項目來說，實現圖片的懶加載非常高效！
代碼解析
1. src="example.jpg"
src屬性指定了要顯示的圖片的文件路徑，這里是example.jpg。
2. alt="示例圖片"
alt屬性提供了圖片的替代文本描述。
當圖片由于某種原因無法加載時，這個文本會顯示出來，同時也有助于屏幕閱讀器為視障用戶描述圖片內容。
3. loading="lazy"
loading屬性設置為lazy表示延遲加載圖片。
當設置了 loading="lazy" 時，瀏覽器會延遲加載圖片，直到圖片即將進入視口（用戶即將看到的屏幕區域）。這意味著在頁面加載的初始階段，瀏覽器不會立即請求和加載這些圖片，而是優先加載頁面的關鍵內容，如文本和主要布局。
當用戶滾動頁面使得圖片即將可見時，瀏覽器才會開始加載圖片資源，從而減少了初始頁面加載時的網絡請求數量和數據量，加快了頁面的呈現速度。
大多數現代瀏覽器都支持 loading="lazy" 屬性，但在一些較舊的瀏覽器中可能不被支持。
對于不支持的瀏覽器，可以使用 JavaScript 庫（如 lazysizes）來實現類似的懶加載效果。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
