CSS 艺术之心形-彩虹-加载动画

CSS 艺术之心形-彩虹-加载动画(居中抖动问题)

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

参考

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

描述

项目 描述
Edge 109.0.1518.61 (正式版本) (64 位)

效果

CSS 艺术之心形-彩虹-加载动画_第1张图片

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>
    
    <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 元素的两端变得异常尖锐。具体效果如下:

CSS 艺术之心形-彩虹-加载动画_第2张图片

动画

定义
/* 
使用关键字 @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 标签使用的动画处于静止状态时):

CSS 艺术之心形-彩虹-加载动画_第3张图片

这是因为你使用 justify-contentalign-itemsul 中的元素居中显示,但没有为其 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;
    }
}

你可能感兴趣的:(前端,艺术,问题,css3,html,前端,特效,动画)