AVt天堂网 手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

當前位置:首頁 > 科技  > 軟件

純CSS實現跑馬燈效果,CSS動畫知識是該補一補了~

來源: 責編: 時間:2023-11-01 09:18:30 230觀看
導讀前言大家好,我是林三心,用最通俗易懂的話講最難的知識點是我的座右銘,基礎是進階的前提是我的初心~最近看一個網站的時候,發現一個效果類似于廣告燈的感覺,挺不錯的,于是就想用純CSS來實現這個效果,順便提升一下自己的CSS動

前言

大家好,我是林三心,用最通俗易懂的話講最難的知識點是我的座右銘,基礎是進階的前提是我的初心~erv28資訊網——每日最新資訊28at.com

最近看一個網站的時候,發現一個效果類似于廣告燈的感覺,挺不錯的,于是就想用純CSS來實現這個效果,順便提升一下自己的CSS動畫技能erv28資訊網——每日最新資訊28at.com

圖片圖片erv28資訊網——每日最新資訊28at.com

分析

我們先分析怎么做的,這個效果分成兩個部分erv28資訊網——每日最新資訊28at.com

  • 上層:真正動畫的層級
  • 下層:充當一個底色

然后他們通過絕對定位疊在一起erv28資訊網——每日最新資訊28at.com

圖片圖片erv28資訊網——每日最新資訊28at.com

可以看到,動畫沒開始前,頁面是這樣的,可以理解這是一個底色下層,鋪在下面,讓每一個圓都有一個輪廓erv28資訊網——每日最新資訊28at.com

圖片圖片erv28資訊網——每日最新資訊28at.com

動畫上層開始的時候,下層是不變的,一直保持底色erv28資訊網——每日最新資訊28at.com

圖片圖片erv28資訊網——每日最新資訊28at.com

開始寫頁面

頁面

<!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>

現在能看到已經把兩層疊在了一起erv28資訊網——每日最新資訊28at.com

圖片圖片erv28資訊網——每日最新資訊28at.com

動畫

接下來讓 high 這一層開始動畫erv28資訊網——每日最新資訊28at.com

.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;      }    }

現在就有動畫效果了erv28資訊網——每日最新資訊28at.com

圖片圖片erv28資訊網——每日最新資訊28at.com

但是我們可以看到剛剛我們想要的效果,他是中間先變,四周再變的erv28資訊網——每日最新資訊28at.com

圖片圖片erv28資訊網——每日最新資訊28at.com

所以我們需要使用到動畫延遲,也就是erv28資訊網——每日最新資訊28at.com

animation-delay這個樣式屬性erv28資訊網——每日最新資訊28at.com

.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>

這就達到了我們想要的效果啦~~~erv28資訊網——每日最新資訊28at.com

圖片圖片erv28資訊網——每日最新資訊28at.com

代碼總覽

圖片 圖片 erv28資訊網——每日最新資訊28at.com

本文鏈接:http://www.tebozhan.com/showinfo-26-16275-0.html純CSS實現跑馬燈效果,CSS動畫知識是該補一補了~

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 不懂函數,就別說你懂Python!從零開始,輕松入門Python函數

下一篇: Spring Boot應用中的配置文件選擇:YAML vs. Properties

標簽:
  • 熱門焦點
  • 直屏旗艦來了 iQOO 12和K70 Pro同臺競技

    旗艦機基本上使用的都是雙曲面屏幕,這就讓很多喜歡直屏的愛好者在苦等一款直屏旗艦,這次,你們等到了。據博主數碼閑聊站帶來的最新爆料稱,Redmi下代旗艦K70 Pro和iQOO 12兩款手
  • 三言兩語說透設計模式的藝術-簡單工廠模式

    一、寫在前面工廠模式是最常見的一種創建型設計模式,通常說的工廠模式指的是工廠方法模式,是使用頻率最高的工廠模式。簡單工廠模式又稱為靜態工廠方法模式,不屬于GoF 23種設計
  • 之家push系統迭代之路

    前言在這個信息爆炸的互聯網時代,能夠及時準確獲取信息是當今社會要解決的關鍵問題之一。隨著之家用戶體量和內容規模的不斷增大,傳統的靠"主動拉"獲取信息的方式已不能滿足用
  • .NET 程序的 GDI 句柄泄露的再反思

    一、背景1. 講故事上個月我寫過一篇 如何洞察 C# 程序的 GDI 句柄泄露 文章,當時用的是 GDIView + WinDbg 把問題搞定,前者用來定位泄露資源,后者用來定位泄露代碼,后面有朋友反
  • 梁柱接棒兩年,騰訊音樂闖出新路子

    文丨田靜 出品丨牛刀財經(niudaocaijing)7月5日,企鵝FM發布官方公告稱由于業務調整,將于9月6日正式停止運營,這意味著騰訊音樂長音頻業務走向消亡。騰訊在長音頻領域還在摸索。為
  • 大廠卷向扁平化

    來源:新熵作者丨南枝 編輯丨月見大廠職級不香了。俗話說,兵無常勢,水無常形,互聯網企業調整職級體系并不稀奇。7月13日,淘寶天貓集團啟動了近年來最大的人力制度改革,目前已形成一
  • 微博大門常打開,迎接海外畫師漂洋東渡

    作者:互聯網那些事&ldquo;起猛了,我能看得懂日語了&rdquo;。&ldquo;為什么日本人說話我能聽懂?&rdquo;&ldquo;中文不像中文,日語不像日語,但是我竟然看懂了&rdquo;&hellip;&hell
  • OPPO K11搭載高性能石墨散熱系統:旗艦同款 性能涼爽釋放

    日前OPPO官方宣布,將于7月25日14:30舉辦新品發布會,屆時全新的OPPO K11將正式與大家見面,將主打旗艦影像,和同檔位競品相比,其最大的賣點就是將配備索尼
  • 蘋果140W USB-C充電器:采用氮化鎵技術

    據10 月 30 日 9to5 Mac 消息報道,當蘋果推出新的 MacBook Pro 2021 時,該公司還推出了新的 140W USB-C 充電器,附贈在 MacBook Pro 16 英寸機型的盒子里,也支
Top