css3 animation

最新推荐文章于 2025-06-18 15:57:10 发布

xiaogeldx

最新推荐文章于 2025-06-18 15:57:10 发布

阅读量672

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/xiaogeldx/article/details/91141827

web前端专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用HTML和CSS创建跳动的音符动画效果，包括利用nth-child选择器和display:flex布局，以及关键帧动画@keyframes的应用，实现了音符的动态变化和无限循环播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跳动音符

beat_melody.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="beat_melody.css">
</head>
<body>
<!--{#container:容器#}-->
  <div class="container">
<!--{#    pillar:柱状物#}-->
    <span class="pillar"></span>
    <span class="pillar"></span>
    <span class="pillar"></span>
    <span class="pillar"></span>
    <span class="pillar"></span>

  </div>
</body>
</html>

beat_melody.css

/*去除浏览器自带的外边距和内边距*/
* {
    margin: 0;
    padding: 0;
    background-color: black;
}
/*上边距150，居中*/
.container {
    /*上，下边距为150，左右居中*/
    margin: 150px auto;
    width: 60px;
/*    display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。
是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。*/
/*Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效*/
    display: flex;  /*弹性盒子*/
    /*justify-content : space-between;元素在主轴（页面）上左右两端或者上下两端开始横向排列，中间有等距离的间隔*/
    justify-content: space-between; /*横排排列，有间隔*/
}
/*设置音符的属性*/
.container .pillar {
    width: 8px;
    height: 40px;
    border-radius: 4px;
    background-color: lawngreen;
    /*动画名*/
    animation-name: kf;
    /*动画循环次数:无限循环*/
    animation-iteration-count: infinite;
    /*动画执行一次的时间*/
    animation-duration: 1s;
    /*动画速度曲线*/
    /*linear	动画从头到尾的速度是相同的*/
    /*ease	默认。动画以低速开始，然后加快，在结束前变慢*/
    /*ease-in	动画以低速开始*/
    /*ease-out	动画以低速结束*/
    /*ease-in-out	动画以低速开始和结束*/
    /*cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值,可能的值是从 0 到 1 的数值*/
    animation-timing-function: ease;
}
/*规定属于其父元素的第二个子元素的动画延迟*/
/*Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）*/
/*使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。*/
.container .pillar:nth-child(2) {
    animation-delay: 0.2s;
}
.container .pillar:nth-child(3) {
    animation-delay: 0.4s;
}
.container .pillar:nth-child(4) {
    animation-delay: 0.6s;
}
.container .pillar:nth-child(5) {
    animation-delay: 0.8s;
}
/*定义帧动画 名字为kf*/
@keyframes kf {
    0%,100% {   /*表示开始和结束状态*/
        background: lawngreen;
    }
    50% {
        /*transform 属性向元素应用 2D 或 3D 转换,该属性允许我们对元素进行旋转、缩放、移动或倾斜*/
        /*none	定义不进行转换*/
        /*matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵*/
        /*matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵	*/
        /*translate(x,y)	定义 2D 转换*/
        /*translate3d(x,y,z)	定义 3D 转换*/
        /*translateX(x)	定义转换，只是用 X 轴的值*/
        /*translateY(y)	定义转换，只是用 Y 轴的值*/
        /*translateZ(z)	定义 3D 转换，只是用 Z 轴的值*/
        /*scale(x,y)	定义 2D 缩放转换*/
        /*scale3d(x,y,z)	定义 3D 缩放转换*/
        /*scaleX(x)	通过设置 X 轴的值来定义缩放转换*/
        /*scaleY(y)	通过设置 Y 轴的值来定义缩放转换*/
        /*scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换*/
        /*rotate(angle)	定义 2D 旋转，在参数中规定角度*/
        /*rotate3d(x,y,z,angle)	定义 3D 旋转*/
        /*rotateX(angle)	定义沿着 X 轴的 3D 旋转*/
        /*rotateY(angle)	定义沿着 Y 轴的 3D 旋转*/
        /*rotateZ(angle)	定义沿着 Z 轴的 3D 旋转*/
        /*skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换*/
        /*skewX(angle)	定义沿着 X 轴的 2D 倾斜转换*/
        /*skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换*/
        /*perspective(n)	为 3D 转换元素定义透视视图*/
        transform: scaleY(1.5);    /*y轴高度变化，正数表示放大，负数表示缩短*/
        background: darkolivegreen;
    }
}

animation相关属性

nth-child

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    h1:nth-child(2) {
      color: blue;
    }
    p:nth-child(3) {  /*父元素body下的第二个子元素p的属性 索引从1开始  同下行代码一样*/
    /*body p:nth-child(3) {*/  /*同下行代码一样*/
    /*body :nth-child(3) {*/
      color: red;
    }
  </style>
</head>
<body>
  <h1>haha</h1>
  <h1>hengheng</h1>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</body>
</html>

在这里插入图片描述

display

display:flex 是一种布局方式,它即可以应用于容器中，也可以应用于行内元素
是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局,目前，它已经得到了所有浏览器的支持
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效

帧动画

定义帧动画

@keyframes 动画名 {
	0%,100% {	#表示开始和结束状态
	}
	50% {	#动画中状态
	}
}

定义好还要设置属性，如

/*设置音符的属性*/
.container .pillar {
    width: 8px;
    height: 40px;
    border-radius: 4px;
    background-color: lawngreen;
    /*动画名*/
    animation-name: kf;
    /*动画循环次数:无限循环*/
    animation-iteration-count: infinite;
    /*动画执行一次的时间*/
    animation-duration: 1s;
    /*动画速度曲线*/
    /*linear	动画从头到尾的速度是相同的*/
    /*ease	默认。动画以低速开始，然后加快，在结束前变慢*/
    /*ease-in	动画以低速开始*/
    /*ease-out	动画以低速结束*/
    /*ease-in-out	动画以低速开始和结束*/
    /*cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值,可能的值是从 0 到 1 的数值*/
    animation-timing-function: ease;
}