CSS 特效之心形-彩虹-加载动画

news2024/11/15 14:09:52

CSS 特效之心形-彩虹-加载动画

  • 参考
  • 描述
  • 效果
  • HTML
  • CSS
      • 重置元素的部分默认样式
      • body
      • li
      • 动画
          • 定义
          • 指定
            • animation
      • ul
          • 抖动
      • 代码总汇

参考

项目描述
搜索引擎Bing
MDNMDN Web Docs

描述

项目描述
Edge109.0.1518.61 (正式版本) (64 位)

效果

效果

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 特效之心形-彩虹-加载动画</title>
    <!-- 导入当前工作目录下的 index.css -->
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

CSS

重置元素的部分默认样式

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body

body{
    /* 
    设置页面最小高度为视口
    (可以理解为浏览器中的可视区域）高度 。
    */
    min-height: 100vh;
    /* 
    设置 flex 弹性布局，
    并将当前元素中的元素进行居中处理。
     */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 设置页面的背景颜色 */
    background-color: #282828;
}

li

li{
    width: 20px;
    height: 20px;
    /* 
    设置 li 为行内块元素，这样可以使得
    li 排列在一行中，当然你也可以通过
    使用 float 属性来达到这一效果。
     */
    display: inline-block;
    /* 为 li 元素设置边框的圆角半径。*/
    border-radius: 20px;
    background-color: dodgerblue;
    /* 为每一个 li 元素设置 10px 的左边距 */
    margin-left: 10px;
}

注：

在该段代码中，请不要使用 border-radius: 50%; 来代替 border-radius: 20px; 。虽然在这段代码中，这两段代码均可以使得 li 元素在初始状态显示为圆形。但是，随着程序的运行，li 元素将被拉伸，该元素的 height 属性将发生变化，宽度与高度不相等，使用 border-radius: 50%； 将导致 li 元素的两端变得异常尖锐。具体效果如下：

效果

动画

定义
/* 
使用关键字 @keyframes 开始定义动画，
在该关键字后，花括号前的内容（空白字符除外）为
被定义动画的名称。
*/
@keyframes oneNine{
	/*
	当动画的进度（基准为动画播放一次所需要的时间）
	达到 30% 时需要将 li 元素逐渐拉伸至 60px；
	在动画的进度为 30%~50% 时，动画将保持 
	静止状态。
	*/
    30%, 50%{
        height: 60px;
    }
    /*
	当动画的进度（基准为动画播放一次所需要的时间）
	达到 80% 时需要将 li 元素逐渐缩减至 20px；
	在动画的进度为 80%~100% 时，动画将保持 
	静止状态。
	*/
    80%, 100%{
        height: 20px;
    }
}

@keyframes twoEight{
    30%, 50%{
        height: 100px;
    }
    80%, 100%{
        height: 20px;
    }
}

@keyframes threeSeven{
    30%, 50%{
        height: 140px;
    }
    80%, 100%{
        height: 20px;
    }
}

@keyframes fourSix{
    30%, 50%{
        height: 150px;
        /*
		为实现心形形状，需要将部分 li 元素下移
		*/
        transform: translateY(30px);
    }
    80%, 100%{
        height: 20px;
    }
}

@keyframes five{
    30%, 50%{
        height: 160px;
        transform: translateY(50px);
    }
    80%, 100%{
        height: 20px;
    }
}
指定

在该部分代码中，我们将为每一个 li 元素指定颜色及需要使用的动画。

ul li:nth-child(1){
    background-color: yellowgreen;
    animation: oneNine 4s infinite;
}

ul li:nth-child(2)
{
    background-color: salmon;
    animation: twoEight 4s 0.15s infinite;
}

ul li:nth-child(3){
    background-color: mediumorchid;
    animation: threeSeven 4s 0.3s infinite;
}

ul li:nth-child(4){
    background-color: dodgerblue;
    animation: fourSix 4s 0.45s infinite;
}

ul li:nth-child(5){
    background-color: tomato;
    animation: five 4s 0.6s infinite;
}

ul li:nth-child(6){
    background-color: hotpink;
    animation: fourSix 4s 0.75s infinite;
}

ul li:nth-child(7){
    background-color: mediumorchid;
    animation: threeSeven 4s 0.9s infinite;
}

ul li:nth-child(8){
    background-color: salmon;
    animation: twoEight 4s 1.05s infinite;
}

ul li:nth-child(9){
    background-color: yellowgreen;
    animation: oneNine 4s 1.2s infinite;
}
animation

animation 在 CSS 中常用来为选中的元素指定使用的动画并对动画的播放进行设置（如指定动画的持续时间）。
提交给 animation 参数中如果有两个时间参数，则第一个参数用于指定动画的持续时间，第二个参数用于指定动画的延迟时间（在指定当前元素使用的动画后，经过指定的时间开始进行动画的播放）。
在上述代码中，提交给 animation 的第一个参数用于指定使用的动画的名称，最后一个参数用于指定动画播放的次数，当该参数的值为 infinite 时，表示将无限次播放该动画。

ul

ul{
    width: 400px;
    height: 400px;
    display: flex;
    justify-content:center;
    align-items: center;
}
抖动

在该部分代码中，你如果没有为 ul 设置宽高，则 li 标签在动画过程中将发生轻微的抖动（在接 li 标签使用的动画处于静止状态时）：

抖动

这是因为你使用 justify-content 及 align-items 将 ul 中的元素居中显示，但没有为其 ul 设置宽高。li 标签在动画过程中会被拉伸，导致父元素 ul 的高度被迫上升。此时需要不断对 li 标签进行移动以使其处于居中状态。
在动画进行过程中，元素的部分操作会具有过渡效果，过渡使 li 标签的移动变得平滑。因此在动画进行时，抖动的状况并不会发生；而在动画处于静止状态时，由于其他 li 元素的动画还在进行，ul 的高度仍将发生变化，此时由于没有过渡效果，导致在移动 li 元素以使其维持居中状态的过程并不平滑，从而产生了抖动状态。

代码总汇

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body{
    /* 
    设置页面最小高度为视口
    (可以理解为浏览器中的可视区域）高度 。
    */
    min-height: 100vh;
    /* 
    设置 flex 弹性布局，
    并将当前元素中的元素进行居中处理。
     */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 设置页面的背景颜色 */
    background-color: #282828;
}

ul{
    width: 400px;
    height: 400px;
    display: flex;
    justify-content:center;
    align-items: center;
}

li{
    width: 20px;
    height: 20px;
    /* 
    设置 li 为行内块元素，这样可以使得
    li 排列在一行中，当然你也可以通过
    使用 float 属性来达到这一效果。
     */
    display: inline-block;
    /* 为 li 元素设置边框的圆角半径。*/
    border-radius: 20px;
    background-color: dodgerblue;
    /* 为每一个 li 元素设置 10px 的左边距 */
    margin-left: 10px;
}


ul li:nth-child(1){
    background-color: yellowgreen;
    animation: oneNine 4s infinite;
}

ul li:nth-child(2)
{
    background-color: salmon;
    animation: twoEight 4s 0.15s infinite;
}

ul li:nth-child(3){
    background-color: mediumorchid;
    animation: threeSeven 4s 0.3s infinite;
}

ul li:nth-child(4){
    background-color: dodgerblue;
    animation: fourSix 4s 0.45s infinite;
}

ul li:nth-child(5){
    background-color: tomato;
    animation: five 4s 0.6s infinite;
}

ul li:nth-child(6){
    background-color: hotpink;
    animation: fourSix 4s 0.75s infinite;
}

ul li:nth-child(7){
    background-color: mediumorchid;
    animation: threeSeven 4s 0.9s infinite;
}

ul li:nth-child(8){
    background-color: salmon;
    animation: twoEight 4s 1.05s infinite;
}

ul li:nth-child(9){
    background-color: yellowgreen;
    animation: oneNine 4s 1.2s infinite;
}


/* 
使用关键字 @keyframes 开始定义动画，
在该关键字后，花括号前的内容（空白字符除外）为
被定义动画的名称。
*/
@keyframes oneNine{
	/*
	当动画的进度（基准为动画播放一次所需要的时间）
	达到 30% 时需要将 li 元素逐渐拉伸至 60px；
	在动画的进度为 30%~50% 时，动画将保持 
	静止状态。
	*/
    30%, 50%{
        height: 60px;
    }
    /*
	当动画的进度（基准为动画播放一次所需要的时间）
	达到 80% 时需要将 li 元素逐渐缩减至 20px；
	在动画的进度为 80%~100% 时，动画将保持 
	静止状态。
	*/
    80%, 100%{
        height: 20px;
    }
}

@keyframes twoEight{
    30%, 50%{
        height: 100px;
    }
    80%, 100%{
        height: 20px;
    }
}

@keyframes threeSeven{
    30%, 50%{
        height: 140px;
    }
    80%, 100%{
        height: 20px;
    }
}

@keyframes fourSix{
    30%, 50%{
        height: 150px;
        /*
		为实现心形形状，需要将部分 li 元素下移
		*/
        transform: translateY(30px);
    }
    80%, 100%{
        height: 20px;
    }
}

@keyframes five{
    30%, 50%{
        height: 160px;
        transform: translateY(50px);
    }
    80%, 100%{
        height: 20px;
    }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/175693.html

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

相关文章

Keil C51工程转VSCode Keil Assistant开发全过程

Keil C51工程转VSCode Keil Assistant开发全过程

Keil C51工程转VSCode Keil Assistant开发全过程✨这里以stc15W408AS为例。&#x1f4cc;相关篇《【开源分享】自制STC15W408AS开发板》 &#x1f4fa;编译-烧录演示&#xff1a; &#x1f4cb;转VSCODE开发环境主要原因可能代码提示以及代码跳转功能&#xff0c;或者其他。 &…
阅读更多...
在java中操作redis

在java中操作redis

在普通项目中操作redis 1.导入maven坐标 <dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>2.8.0</version> </dependency>2.打开redis 如果redis-server闪退&#xff0c;那就先打开re…
阅读更多...
【Spring Security】如何使用Lambda DSL配置Spring Security

【Spring Security】如何使用Lambda DSL配置Spring Security

本期目录1. 概述2. 新老配置风格对比Lambda风格等效的旧配置风格3. WebFlux Security4. Lambda DSL的目标1. 概述 在 Spring Security 5.2 中增强了 DSL 的功能&#xff1a;允许使用 Lambda 表达式来配置 HTTP security 。 需要注意的是&#xff1a;先前版本的配置风格仍然是…
阅读更多...
二分查找——“C”

二分查找——“C”

各位CSDN的uu们你们好呀&#xff0c;欢迎来到小雅兰的课堂&#xff0c;今天我们的内容是复习之前的内容&#xff0c;并把之前的内容的一些习题一起来做一做&#xff0c;现在&#xff0c;就让我们进入二分查找的世界吧 首先&#xff0c;我们介绍的题目就是二分查找&#xff0c;也…
阅读更多...
module ‘tensorflow‘ has no attribute ‘Session‘

module ‘tensorflow‘ has no attribute ‘Session‘

1. module ‘tensorflow‘ has no attribute ‘Session‘ 指定一个会话来运行tensorflow程序&#xff0c;在使用tensorflow1.x版本中用tensorflow.Session即可 但当我的库版本升级到2.x之后&#xff0c;就会出现标题式报错&#xff0c;于是我去查看了tensorflow库的源码&…
阅读更多...
使用Keras搭建深度学习模型

使用Keras搭建深度学习模型

前言 目前深度学习领域的主流框架 tensorflowkeraspytorchcaffetheanopaddlepaddle keras 代码架构 keras代码风格相比于其他框架更符合人的思维。 模型 模型的组成分为三部分&#xff1a;输入层、网络层、输出层。 输入层 输入层的作用时规定了模型输入的shape fro…
阅读更多...
2022年智源社区年度热点推荐丨新春集锦

2022年智源社区年度热点推荐丨新春集锦

本文为2022年最受智源社区小伙伴喜爱的文章&#xff0c;根据文章质量和热门程度等维度计算得出。还有AI大佬的全年总结盘点总结&#xff0c;也一并推荐给你。虎年除旧&#xff0c;兔年迎新&#xff0c;藉此机会、智源编辑组全员谨祝大家新春快乐&#xff01;2022智源社区20篇最…
阅读更多...
LINUX学习之网络配置(十一)

LINUX学习之网络配置(十一)

1.修改IP地址 使用ifconfig命令 例如要将eth0接口的IP地址更改为192.168.1.100&#xff0c;你可以使用以下命令 ifconfig eth0 192.168.1.100如果你想为IP地址设置子网掩码&#xff0c;可以使用“netmask”参数。例如&#xff0c;要将eth0接口的子网掩码设置为255.255.255.0…
阅读更多...
[Linux]进程优先级 Linux中的环境变量

[Linux]进程优先级 Linux中的环境变量

&#x1f941;作者&#xff1a; 华丞臧. &#x1f4d5;​​​​专栏&#xff1a;【LINUX】 各位读者老爷如果觉得博主写的不错&#xff0c;请诸位多多支持(点赞收藏关注)。如果有错误的地方&#xff0c;欢迎在评论区指出。 推荐一款刷题网站 &#x1f449; LeetCode刷题网站 文…
阅读更多...
liunx centos9中安装Redis数据库，并在win10中连接redis图文详解

liunx centos9中安装Redis数据库，并在win10中连接redis图文详解

首先我们去Redis的官网点击download下载tar的压缩包 https://redis.io/download/#redis-downloads 用xftp将安装包上传到你的liunx服务器本地地址 解压 tar -xvf /root/redis-7.0.8.tar.gz cd进入你刚才解压的文件夹中 cd /root/redis-7.0.8 执行make进行编译 编译完成后cd进入…
阅读更多...
普中科技MicroPython基于esp32的基础教程-03-字符串

普中科技MicroPython基于esp32的基础教程-03-字符串

目录 字符串 字符串的表示方式 普通字符串 原始字符串 长字符串 字符串与数字相互转换 将字符串转换为数字 将数字转换为字符串 格式化字符串 占位符% format方法 f-strings 操作字符串 字符串拼接 字符串查找 字符串替换 字符串分割 去处字符串两…
阅读更多...
目标检测：Focal Loss

目标检测：Focal Loss

目标检测&#xff1a;Focal Loss前言Focal LossCross Entropybalanced Cross EntropyFocal Loss Definition前言 Focal loss这个idea来源于论文《Focal Loss for Dense Object Detection》,主要是为了解决正负样本、难易样本不平衡的问题。 Focal Loss Cross Entropy 在目标…
阅读更多...
不懂Pod？不足以谈K8s

不懂Pod？不足以谈K8s

文章目录✨ 前言1. myblog改造及优化2. Pod生命周期&#x1f351; 如何编写资源 yaml&#x1f351; pod状态与生命周期3. Pod操作总结✨ 前言 在上一篇文章中&#xff0c;我们学习了 Pod 的常用设置&#xff0c;那么这篇文章咱们继续开动&#xff01; K8s落地实践之旅 —— P…
阅读更多...
LabVIEW异步调用VI的多个实例实现并行执行

LabVIEW异步调用VI的多个实例实现并行执行

LabVIEW异步调用VI的多个实例实现并行执行默认情况下&#xff0c;如对一个VI进行多个异步调用&#xff0c;LabVIEW将这些调用按顺序排列&#xff0c;依次执行。各个调用的执行时间累加&#xff0c;效率不高。按照下列步骤&#xff0c;并行执行各个调用&#xff0c;避免一个调用…
阅读更多...
Python小技巧：__str__()的妙用

Python小技巧：__str__()的妙用

前言 这里是Python小技巧的系列文章。这是第三篇&#xff0c;object.__str__(self)方法的妙用。 书接上回&#xff0c;这次还是介绍Python类的内置方法&#xff0c;__str__() 据官方文档的介绍&#xff0c;在使用 str(object) 、format() 和 print() 的时候会调用__str__() 方…
阅读更多...
一文搞懂go并发编程设计原理

一文搞懂go并发编程设计原理

前言 主要学习其设计原则&#xff0c;大体流程&#xff0c;权衡利弊 不要纠结于部分难懂的实现细节&#xff0c;因为不同的人对相同接口的实现细节不一样&#xff0c;就算是相同的人实现两次也可能不一样 context context的作用主要有两个&#xff1a; 在整个请求的执行过程…
阅读更多...
stm32 笔记 PWM输入模式测量脉宽和占空比原理

stm32 笔记 PWM输入模式测量脉宽和占空比原理

一、PWM 输入模式测量脉宽 1.1 测量脉宽简介 在测量占空比之前&#xff0c;我们先一步一步来&#xff0c;先让 STM32 可以测量脉宽。 TIM3_CH1&#xff08;tim3 定时器通道 1&#xff09;捕获模式测量脉宽步骤如下&#xff1a; 1.输入捕获到 PWM 上升沿触发 2.发送中断&am…
阅读更多...
机器视觉_HALCON_快速向导_2.用HALCON开发程序

机器视觉_HALCON_快速向导_2.用HALCON开发程序

文章目录使用HALCON开发应用程序1. 认识HALCON&#xff1a;架构&数据结构1.1. HALCON算子1.2. 参数与数据结构1.2.1. Images 图像1.2.2. Regions 区域1.2.3. XLDS 扩展线1.2.4. Handles 句柄1.2.5. Tuple Mode 元组模式1.3. HALCON与并行编程1.4. HALCON支持计算设备1.5. H…
阅读更多...
grant之后要跟着flush privileges吗？

grant之后要跟着flush privileges吗？

在 MySQL 里面，grant 语句是用来给用户赋权的。不知道你有没有见过一些操作文档里面提到，grant 之后要马上跟着执行一个 flush privileges 命令，才能使赋权语句生效。我最开始使用 MySQL 的时候，就是照着一个操作文档的说明按照这个顺序操作的。 那么，grant 之后真的需要…
阅读更多...
33.Isaac教程--操纵运动学

33.Isaac教程--操纵运动学

操纵运动学 ISAAC教程合集地址文章目录操纵运动学应用架构实施细节正向运动学逆运动学小码为了控制机器人手臂的运动&#xff0c;需要数学表示法来计算执行器输入并为轨迹规划器表示障碍物。 为实现这一点&#xff0c;操纵运动学 GEM 将铰接式机器人系统表示为连接的刚体&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023