当前位置：首页 > 科技 > 软件

纯CSS实现跑马灯效果，CSS动画知识是该补一补了~

来源：责编：时间：2023-11-01 09:18:30 367观看

导读前言大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~最近看一个网站的时候，发现一个效果类似于广告灯的感觉，挺不错的，于是就想用纯CSS来实现这个效果，顺便提升一下自己的CSS动

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~

最近看一个网站的时候，发现一个效果类似于广告灯的感觉，挺不错的，于是就想用纯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.28at.com/showinfo-26-16275-0.html纯CSS实现跑马灯效果，CSS动画知识是该补一补了~

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：不懂函数，就别说你懂Python！从零开始，轻松入门Python函数

下一篇： Spring Boot应用中的配置文件选择：YAML vs. Properties

标签：

热门焦点

俄罗斯：将审查iPhone等外国公司设备保数据安全

iPhone和特斯拉都属于在各自领域领头羊的品牌，推出的产品也也都是数一数二的，但对于一些国家而言，它们的产品可靠性和安全性还是在限制范围内。近日，俄罗斯联邦通信、信息技术
三言两语说透柯里化和反柯里化

JavaScript中的柯里化(Currying)和反柯里化(Uncurrying)是两种很有用的技术，可以帮助我们写出更加优雅、泛用的函数。本文将首先介绍柯里化和反柯里化的概念、实现原理和应用
Temu起诉SHEIN，跨境电商战事升级

来源 | 伯虎财经（bohuFN）作者 | 陈平安日前据外媒报道，拼多多旗下跨境电商平台Temu正对竞争对手SHEIN提起新诉讼，诉状称Shein“利用市场支配力量强迫服装厂商与之签订独家
中国家电海外掘金正当时｜出海专题

作者｜吴南南编辑｜胡展嘉运营｜陈佳慧出品｜零态LT（ID：LingTai_LT）2023年，出海市场战况空前，中国创业者在海外纷纷摩拳擦掌，以期能够把中国的商业模式、创业理念、战略打法输出海外，他们依
腾讯盖楼，字节拆墙

来源 | 光子星球撰文 | 吴坤谚编辑 | 吴先之“想重温暴刷深渊、30+技能搭配暴搓到爽的游戏体验吗？一起上晶核，即刻暴打！”曾凭借直播腾讯旗下代理格斗游戏《DNF》一
自律，给不了Keep自由！

来源 | 互联网品牌官作者 | 李大为编排 | 又耳审核 | 谷晓辉自律能不能给用户自由暂时不好说，但大概率不能给Keep自由。近日，全球最大的在线健身平台Keep正式登陆港交所，努力
余承东:AI大模型技术的发展将会带来下一代智能终端操作系统的智慧体验

8月4日消息，2023年华为开发者大会（HDC.Together）今天正式开幕，华为发布HarmonyOS 4、全新升级的鸿蒙开发套件、HarmonyOS Next开发者预览版本等一系列
三星显示已开始为AR设备研发硅基LED微显示屏

7月18日消息，据外媒报道，随着苹果首款头显产品Vision Pro在6月份正式推出，AR/VR/MR等头显产品也就将成为各大公司下一个重要的竞争领域，对显示屏这一关
引领旗舰级影像能力向中端机普及 OPPO K11 系列发布 1799 元起

7月25日，OPPO正式发布K系列新品—— OPPO K11 。此次 K11 在中端手机市场长期被忽视的影像板块发力，突破性地搭载索尼 IMX890 旗舰大底主摄，支持 OIS

纯CSS实现跑马灯效果，CSS动画知识是该补一补了~

前言

分析

开始写页面

页面

动画

代码总览

俄罗斯：将审查iPhone等外国公司设备保数据安全

三言两语说透柯里化和反柯里化

Temu起诉SHEIN，跨境电商战事升级

中国家电海外掘金正当时｜出海专题

腾讯盖楼，字节拆墙

自律，给不了Keep自由！

余承东:AI大模型技术的发展将会带来下一代智能终端操作系统的智慧体验

三星显示已开始为AR设备研发硅基LED微显示屏

引领旗舰级影像能力向中端机普及 OPPO K11 系列发布 1799 元起

最新推荐

猜你喜欢

热门推荐

相关资讯