直屏旗艦來了 iQOO 12和K70 Pro同臺競技
旗艦機基本上使用的都是雙曲面屏幕，這就讓很多喜歡直屏的愛好者在苦等一款直屏旗艦，這次，你們等到了。據博主數碼閑聊站帶來的最新爆料稱，Redmi下代旗艦K70 Pro和iQOO 12兩款手
大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~
最近看一個網站的時候，發現一個效果類似于廣告燈的感覺，挺不錯的，于是就想用純CSS來實現這個效果，順便提升一下自己的CSS動畫技能
圖片
我們先分析怎么做的，這個效果分成兩個部分
然后他們通過絕對定位疊在一起
圖片
可以看到，動畫沒開始前，頁面是這樣的，可以理解這是一個底色下層，鋪在下面，讓每一個圓都有一個輪廓
圖片
動畫上層開始的時候，下層是不變的，一直保持底色
圖片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { background-color: #232b36; } .container { position: relative; } .grid { display: flex; flex-wrap: wrap; width: 240px; } .high { position: absolute; z-index: -1; top: 0; left: 0; } .low { opacity: .1; position: absolute; z-index: 0; top: 0; left: 0; } span { width: 4px; height: 4px; margin: 10px; border-radius: 50%; background-color: #fff; opacity: .6; display: block; } </style></head><body> <div class="container"> <div class="grid high"> 30個span。。 </div> <div class="grid low"> 30個span。。 </div> </div></body></html>現在能看到已經把兩層疊在了一起
圖片
接下來讓 high 這一層開始動畫
.high span { /* 動畫名 */ animation-name: myAnimation; /* 動畫時長 */ animation-duration: 1s; /* 無限循環 */ animation-iteration-count: infinite; background-color: #AEF731; } @keyframes myAnimation { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }現在就有動畫效果了
圖片
但是我們可以看到剛剛我們想要的效果，他是中間先變，四周再變的
圖片
所以我們需要使用到動畫延遲，也就是
animation-delay這個樣式屬性
.delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; }<div class="grid high"> <span class="delay-4"></span> <span class="delay-3"></span> <span class="delay-2"></span> <span class="delay-1"></span> <span></span> <span></span> <span class="delay-1"></span> <span class="delay-2"></span> <span class="delay-3"></span> <span class="delay-4"></span> <span class="delay-4"></span> <span class="delay-3"></span> <span class="delay-2"></span> <span class="delay-1"></span> <span></span> <span></span> <span class="delay-1"></span> <span class="delay-2"></span> <span class="delay-3"></span> <span class="delay-4"></span> <span class="delay-4"></span> <span class="delay-2"></span> <span class="delay-2"></span> <span class="delay-1"></span> <span></span> <span></span> <span class="delay-1"></span> <span class="delay-2"></span> <span class="delay-3"></span> <span class="delay-4"></span> </div>這就達到了我們想要的效果啦~~~
圖片
圖片
本文鏈接：http://www.tebozhan.com/showinfo-26-16275-0.html純CSS實現跑馬燈效果，CSS動畫知識是該補一補了~
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號