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

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

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

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

前言

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

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

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

分析

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

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

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

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

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

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

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

圖片圖片XNb28資訊網——每日最新資訊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>

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

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

動畫

接下來讓 high 這一層開始動畫XNb28資訊網——每日最新資訊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;      }    }

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

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

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

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

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

animation-delay這個樣式屬性XNb28資訊網——每日最新資訊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>

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

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

代碼總覽

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

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

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

上一篇： 不懂函數，就別說你懂Python！從零開始，輕松入門Python函數

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

標簽：
  • 熱門焦點
Top