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

news2024/11/28 7:41:04

前言

最近看一个网站的时候,发现一个效果类似于广告灯的感觉,挺不错的,于是就想用纯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.coloradmin.cn/o/1160268.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

matplotlib画刻度为对数的图

1. 代码 import matplotlib.pyplot as plta [1000,2000,3000,4000,5000] a_x [1, 2, 3, 4, 5] b [0.00001,0.00025,0.001,0.005,0.000001]plt.figure(figsize(10, 6)) plt.plot(a_x, b, cred, labellabel) plt.scatter(a_x, b, cblue) plt.xlabel(step$(\\times 10^3)$) pl…

【MySQL索引与优化篇】数据库设计实操(含ER模型)

数据库设计实操&#xff08;含ER模型&#xff09; 文章目录 数据库设计实操&#xff08;含ER模型&#xff09;1. ER模型1.1 概述1.2 建模分析1.3 ER 模型的细化1.4 ER 模型图转换成数据表1. 一个实体转换成一个数据库表2. 一个多对多的关系转换成一个数据表3. 通过外键来表达1对…

栅栏密码fence cypher

f{_wi3_hlyk_lnceaonr_cirgu04fep} flag{you_kn0w_r4il_f3nce_cipher}

世界坐标系投影到像素坐标系【python实验】

对于三维视觉而言&#xff0c;需要清晰了解世界坐标系和像素坐标系的对应关系。本文用python做实验。 相机内外参数的数学推导可以看我之前的博客《【AI数学】相机成像之内参数 》&#xff0c;《【AI数学】相机成像之外参数》。 实验开始 首先明确相机的内外参数&#xff1a; …

AI智能识别如何助力PDF,轻松实现文档处理?

AI智能识别如何助力PDF&#xff0c;轻松实现文档处理&#xff1f; 随着科技的不断发展&#xff0c;人工智能&#xff08;AI&#xff09;在各个领域都发挥着重要的作用。其中&#xff0c;文档智能&#xff08; Document AI &#xff09;在金融、医疗、教育、保险、能源、物流等…

yolov7改进之使用QFocalLoss

深度学习三大件&#xff1a;数据、模型、Loss。一个好的Loss有利于让模型更容易学到需要的特征&#xff0c;不过深度学习已经白热化了&#xff0c;Loss这块对一个成熟任务的提升是越来越小了。虽然如此&#xff0c;也不妨碍我们在难以从数据和模型层面入手时&#xff0c;从这个…

Object转List<>,转List<Map<>>

这样就不会局限在转换到List<Map<String,Object>>这一种类型上了.可以转换成List<Map<String,V>>上等,进行泛型转换虽然多了一个参数,但是可以重载啊注: 感觉field.get(key) 这里处理的不是很好,如果有更好的办法可以留言 public static <K, V> …

大数据Doris(十四):Doris表中的数据基本概念

文章目录 Doris表中的数据基本概念 一、​​​​​​​Row & Column

前端项目 index.html 中发请求 fetch

想要在前端项目 index.html文件中向后端发起请求&#xff0c;但是引入axios报错&#xff08;我这边会报错&#xff09;&#xff0c;可以使用fetch。 //window.location.origin----获取域名&#xff0c;包括协议、主机号、端口号fetch(window.location.origin "/api/pla…

el-tabs 默认选中第一个

1. 实际开发中el-tabs 都会设置第一个为默认值 ,这样会好看一点, 而渲染的数据经常是通过后端返回的数据 , v-model 无法写死默认值 解决办法 , 通过计算机属性 ,在data 定义一个 selectedTab watch: {defaultTab(newVal) {this.selectedTab newVal; // 设置第一个标签页…

腾讯云双11云服务器活动:3年366元,超多超值云服务器!

腾讯云在双11活动中推出了一款3年366元的云服务器&#xff0c;配置为2核2G 40GB SSD盘&#xff0c;300GB月流量&#xff0c;4M带宽。这一配置相较于其他厂商同等规格的云服务器&#xff0c;具有较高的性价比。在市场上很少有厂商提供3年期的优惠服务器&#xff0c;因此此次双11…

函数式接口详解(Java)

函数式接口详解&#xff08;Java&#xff09;_函数式接口作为参数_凯凯凯凯.的博客-CSDN博客 函数式接口&#xff1a;有且仅有一个抽象方法的接口 Java中函数式编程体现就是Lambda表达式&#xff0c;所以函数式接口就是可以适用于Lambda使用的接口 只有确保接口中仅有一个抽…

第二证券:怎么判断股票浮筹多少?

股票的浮筹是指公司的股份中&#xff0c;揭露生意在市场上的股份&#xff0c;一般是指除了大股东和筹码安稳的组织等&#xff0c;其他组织和个人能够自在生意的股份。在出资股票时&#xff0c;了解公司的浮筹是非常重要的&#xff0c;由于它直接联络到股票的供需联络和股价动摇…

初识JavaScript(一)

文章目录 一、JavaScript介绍二、JavaScript简介1.ECMAScript和JavaScript的关系2.ECMAScript的历史3.什么是Javascript&#xff1f;4.JavaScript的作用?5.JavaScript的特点 三、JavaScript基础1.注释语法2.JavaScript的使用 四、JavaScript变量与常量变量关键字var和let的区别…

苹果AirTag固件更新

苹果公司针对其热销的物品追踪器 AirTag 于今天发布了新的固件更新&#xff0c;最新版本号为 2A61&#xff0c;但是这次更新苹果并未提供发布说明&#xff0c;所以目前还不知道这次更新有什么新内容。 关于这次更新&#xff0c;用户无法自己手动更新 AirTag 固件&#xff0c;因…

5.1 运输层协议概述

思维导图&#xff1a; 前言&#xff1a; 第5章 运输层笔记 1. 概览 主要内容&#xff1a;介绍运输层协议的特点、进程间通信、端口、UDP和TCP协议、可靠传输、TCP报文段的首部格式、TCP的关键概念&#xff08;如滑动窗口、流量控制、拥塞控制和连接管理&#xff09;。重要性…

自定义类型结构体(上)

目录 结构体类型的声明结构体的概念结构体的声明特殊的声明结构的自引用 结构体变量的创建和初始化结构成员访问操作符 感谢各位大佬对我的支持,如果我的文章对你有用,欢迎点击以下链接 &#x1f412;&#x1f412;&#x1f412; 个人主页 &#x1f978;&#x1f978;&#x1…

linux下df -h 命令一直卡住的解决方法

在Linux中&#xff0c;偶尔遇到用 df -h 查看磁盘情况时&#xff0c;一直卡住无法显示结果。 解决方法&#xff1a; 1、首先使用strace追踪到底执行到哪里卡住 $ strace df -h 2、如果没有strace命令则进行安装 $ yum install strace -y 3、显示出卡住的地方&#xff0c;如…

[0xGame 2023 公开赛道] week4 crypto/pwn/rev

最后一周结束了&#xff0c;难度也很大&#xff0c;已经超出我这认为的新生程度了。 crypto Orac1e 先看题&#xff0c;题目先是给了加密过的flag然后提供不限次数的解密&#xff0c;不过仅提供解密后unpad的结果。 from Crypto.Util.number import * from Crypto.Cipher i…

WinCC7.5 将归档数据打印到MSHGrid(不是MSFlexGrid控件)

参考网址&#xff1a;https://www.cnblogs.com/fishingsriver/p/14397431.html 新建变量 MSHGrid控件 查询按钮 Sub OnClick(ByVal Item) Dim myCatalog,myDS,PCN…