css常见动画

weixin_434112142024-04-25 19:37

1、音乐播放效果

javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>制作竖条加载动画</title>
	<style>
		.animbox {
		    margin: 50px auto;
		    width: 200px;
		    text-align: center;
		}
		/*设置各竖条的共有样式*/
		.animbox > div {
		    background-color: #279fcf;
		    width: 4px;
		    height: 35px;
		    border-radius: 2px;
		    margin: 2px;
		    animation-fill-mode: both;
		    display: inline-block;
		    animation: anim 0.9s 0s infinite cubic-bezier(.11, .49, .38, .78);
		}
		/*设置动画延迟*/
		.animbox > :nth-child(2), .animbox > :nth-child(4) {
		    animation-delay: 0.25s !important;
		}

		.animbox > :nth-child(1), .animbox > :nth-child(5) {
		    animation-delay: 0.5s !important;
		}
		/*定义动画*/
		@keyframes anim {
		    0% {  transform: scaley(1); }
		    80% {  transform: scaley(0.3); }
		    90% {  transform: scaley(1);   }
		}
	</style>
</head>
<body>
	<div class="animbox">
	    <div></div>
	    <div></div>
	    <div></div>
	    <div></div>
	    <div></div>
	</div>
</body>
</html>

2、电影闭幕效果

javascript 复制代码 
<!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>
      .box {
        height: 100%;
        width: 100%;
        position: absolute;
        background: url("https://img0.baidu.com/it/u=2771945787,9120044&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500")
          no-repeat;
        background-size: cover;
        animation: fade-away 3s linear forwards;
      }
      .text {
        position: absolute;
        line-height: 55px;
        color: #fff;
        font-size: 36px;
        text-align: center;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        animation: show 2s cubic-bezier(0.74, -0.1, 0.86, 0.83) forwards;
      }

      @keyframes fade-away {
        30% {
          filter: brightness(1);
        }
        100% {
          filter: brightness(0);
        }
      }
      @keyframes show {
        20% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
      <div class="text">
        <p>电影闭幕效果</p>
      </div>
    </div>
  </body>
</html>

3、箭头动效

javascript 复制代码 
<!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: #222;
      }

      .arrow {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
      }

      .arrow-1 {
        -webkit-animation: arrow-movement 2s ease-in-out infinite;
        animation: arrow-movement 2s ease-in-out infinite;
      }

      .arrow-2 {
        -webkit-animation: arrow-movement 2s 1s ease-in-out infinite;
        animation: arrow-movement 2s 1s ease-in-out infinite;
      }

      .arrow:before,
      .arrow:after {
        background: #fff;
        content: "";
        display: block;
        height: 3px;
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
      }

      .arrow:before {
        -webkit-transform: rotate(45deg) translateX(-23%);
        transform: rotate(45deg) translateX(-23%);
        -webkit-transform-origin: top left;
        transform-origin: top left;
      }

      .arrow:after {
        -webkit-transform: rotate(-45deg) translateX(23%);
        transform: rotate(-45deg) translateX(23%);
        -webkit-transform-origin: top right;
        transform-origin: top right;
      }

      @-webkit-keyframes arrow-movement {
        0% {
          opacity: 0;
          top: 45%;
        }
        70% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }

      @keyframes arrow-movement {
        0% {
          opacity: 0;
          top: 45%;
        }
        70% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="arrow arrow-1"></div>
    <div class="arrow arrow-2"></div>
  </body>
</html>

4、按钮心跳效果

javascript 复制代码 
<!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>
      /* 按钮心跳动画 */
      .heart-shake {
        width: 100px;
        height: 30px;
        margin: auto;
        border-radius: 10px;
        background: #3866ff;
        color: #ffffff;
        box-shadow: 0 2px 30px 0 #3866ff63;
        animation: submitBtn 1.5s ease infinite;
      }
      @keyframes submitBtn {
        0% {
          transform: scale(1);
        }
        50% {
          transform:scale3d(.8,.8,.8);
        }
        100% {
          transform: scale(1);
        }
      }
    </style>
  </head>
  <body>
    <div class="heart-shake ege">按钮心跳动画</div>
  </body>
</html>

5、水波扩散效果加载动画

javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>制作水波扩散效果加载动画</title>
	<style>
		.ball{
		    width: 100px;
		    height: 100px;
		    margin: 50px auto;
		    position: relative;
		    transform: translateY(-30px);
		}

		.ball> div {          /*设置水波纹的样式*/
		    background-color: #279fcf;
		    border-radius: 100%;
		    margin: 2px;
		    position: absolute;
		    left: 15px;
		    top: 15px;
		    opacity: 0;
		    width: 60px;
		    height: 60px;
		    animation: anim 1s 0s linear infinite both;
		}
		.ball > div:nth-child(2) {        /*设置动画延迟*/
		    animation-delay: 0.2s;
		}
		/*此处省略设置第三个和第四个圆圈的动画延迟的代码*/
		.ball> div:nth-child(3) {
		    animation-delay: 0.4s;
		}

		.ball > div:nth-child(4) {
		    animation-delay: 0.6s;
		}

		@keyframes anim {
		    0% {transform: scale(0);
		        opacity: 0; }
		    5% {opacity: 1; }
		    100% {transform: scale(1);
		           opacity: 0; }
		}
	</style>
</head>
<body>
	<div class="ball">
	    <div></div>
	    <div></div>
	    <div></div>
	    <div></div>
	</div>
</body>
</html>

6、环形加载动画

javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>环形加载动画</title>
	<style>
		/*css document*/
		* {
		    margin: 0;
		    padding: 0;
		}


		body {
		    background: #ffefce;
		}


		.cont {
		    width: 100px;
		    height: 100px;
		    position: relative;
		    margin: 100px auto;
		}
		.line div {
		    position: absolute;
		    left: 0;
		    top: 0;
		    width: 4px;
		    height: 100px;
		}


		.line div:before, .line div:after {
		    content: '';
		    display: block;
		    height: 50%;
		    background: #009cda;
		    border-radius: 5px;
		}

		/*设置组成环形加载的竖条的旋转角度*/
		.line div:nth-child(2) {
		    transform: rotate(15deg);
		}


		.line div:nth-child(3) {
		    transform: rotate(30deg);
		}


		.line div:nth-child(4) {
		    transform: rotate(45deg);
		}


		.line div:nth-child(5) {
		    transform: rotate(60deg);
		}

		.line div:nth-child(6) {
		    transform: rotate(75deg);
		}
		.line div:nth-child(7) {
		    transform: rotate(90deg);
		}


		.line div:nth-child(8) {
		    transform: rotate(105deg);
		}


		.line div:nth-child(9) {
		    transform: rotate(120deg);
		}


		.line div:nth-child(10) {
		    transform: rotate(135deg);
		}

		.line div:nth-child(11) {
		    transform: rotate(150deg);
		}
		.line div:nth-child(12) {
		    transform: rotate(165deg);
		}

		.circle {
		    position: absolute;
		    left: -15%;
		    top: 35%;
		    width: 50px;
		    height: 50px;
		    margin: -9px 0 0 -9px;
		    background: #ffefce;
		    border-radius: 100%;
		}

		/*定义动画*/
		@keyframes load {
		    0% {
		        opacity: 0;
		    }
		    100% {
		        opacity: 1;
		    }
		}
		/*设置动画以及动画延迟 */
		.line div:nth-child(1):before {
		    animation: load 1.2s linear 0s infinite;
		}
		/*依次从第一个div的:before至最后一个div的:before的动画延迟为每个增加0.05s,此处省略雷同代码*/
		.line div:nth-child(2):before {
		    animation: load 1.2s linear 0.05s infinite;
		}

		.line div:nth-child(3):before {
		    animation: load 1.2s linear 0.1s infinite;
		}

		.line div:nth-child(4):before {
		    animation: load 1.2s linear 0.15s infinite;
		}

		.line div:nth-child(5):before {
		    animation: load 1.2s linear 0.2s infinite;
		}

		.line div:nth-child(6):before {
		    animation: load 1.2s linear 0.25s infinite;
		}

		.line div:nth-child(7):before {
		    animation: load 1.2s linear 0.3s infinite;
		}

		.line div:nth-child(8):before {
		    animation: load 1.2s linear 0.35s infinite;
		}

		.line div:nth-child(9):before {
		    animation: load 1.2s linear 0.4s infinite;
		}

		.line div:nth-child(10):before {
		    animation: load 1.2s linear 0.45s infinite;
		}

		.line div:nth-child(11):before {
		    animation: load 1.2s linear 0.5s infinite;
		}

		.line div:nth-child(12):before {
		    animation: load 1.2s linear 0.55s infinite;
		}

		.line div:nth-child(1):after {
		    animation: load 1.2s linear 0.6s infinite;
		}
		/*依次从第一个div的:after至最后一个div的:after的动画延迟为每个增加0.05s,此处省略雷同代码*/
		.line div:nth-child(2):after {
		    animation: load 1.2s linear 0.65s infinite;
		}

		.line div:nth-child(3):after {
		    animation: load 1.2s linear 0.7s infinite;
		}

		.line div:nth-child(4):after {
		    animation: load 1.2s linear 0.75s infinite;
		}

		.line div:nth-child(5):after {
		    animation: load 1.2s linear 0.8s infinite;
		}

		.line div:nth-child(6):after {
		    animation: load 1.2s linear 0.85s infinite;
		}

		.line div:nth-child(7):after {
		    animation: load 1.2s linear 0.9s infinite;
		}

		.line div:nth-child(8):after {
		    animation: load 1.2s linear 0.95s infinite;
		}

		.line div:nth-child(9):after {
		    animation: load 1.2s linear 1.0s infinite;
		}

		.line div:nth-child(10):after {
		    animation: load 1.2s linear 1.05s infinite;
		}

		.line div:nth-child(11):after {
		    animation: load 1.2s linear 1.1s infinite;
		}

		.line div:nth-child(12):after {
		    animation: load 1.2s linear 1.15s infinite;
		}
	</style>
</head>
<body>
<div class="cont">
  <div class="line">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="circle"></div>
</div>
</body>
</html>

7、制作小圆圈轮流放大的加载动画

javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>制作小圆圈轮流放大的加载动画</title>
	<style>
/*css document*/
* { /*清除页面中默认的内外边距*/
    padding: 0;
    margin: 0;
}

.ball { /*设置动画盒子的整体样式*/
    width: 240px; /*设置整体大小*/
    height: 90px;
    text-align: center; /*设置对齐方式*/
    color: #fff; /*设置文字颜色*/
    background: rgba(0, 0, 0, 0.5); /*设置背景颜色*/
    margin: 20px auto;
}

.ball > p { /*设置加载的提示文字的样式*/
    padding: 20px 0;
}

.ball > div { /*设置动画中三个小球的样式*/
    width: 18px; /*设置大小*/
    height: 18px;
    background: #1abc9c; /*设置背景颜色*/
    border-radius: 100%; /*设置圆角边框*/
    display: inline-block; /*设置其显示方式*/
    animation: move 1.4s infinite ease-in-out both; /*添加动画*/
}

.ball .ball1 { /*设置第一个小球的动画延迟*/
    animation-delay: 0.16s;
}

.ball .ball2 { /*设置第二个小球的动画延迟*/
    animation-delay: 0.32s;
}

.ball .ball3 { /*设置第二个小球的动画延迟*/
    animation-delay: 0.48s;
}

@keyframes move { /*创建动画*/
    0% { transform: scale(0) }
    40% { transform: scale(1.0) }
    100% { transform: scale(0) }
}

	</style>
</head>
<body>
	<div class="cont">
	    <div class="ball">
	        <p>正在加载,请稍后~</p>
	        <div class="ball1"></div>
	        <div class="ball2"></div>
	        <div class="ball3"></div>
	    </div>
	</div>
</body>
</html>

8、椭圆形进度条加载

javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>椭圆形进度条加载</title>
	<style>
		.cont {
		    margin: 50px auto;
		}

		.cont, p {
		    width: 300px;
		    height: 20px;
		    border-radius: 10px;
		    position: relative;
		    background-color: rgba(189, 189, 189, 1);
		}

		#bar {
		    background-color: #0e90d2;
		    width: 0;
		    animation: prog 1 5s ease forwards;
		}
		/*进度提示数字展示*/
		#txt {
		    position: absolute;
		    left: 250px;
		    width: 50px;
		    font: bold 18px/20px "";
		    color: #f00;
		}
		/*蓝色逐渐向右填充动画*/
		@keyframes prog {
		    0% {
		        width: 0px;
		    }
		    100% {
		        width: 300px;
		    }
		}
	</style>
</head>
<body>
<div class="cont">
    <p id="bar"><span id="txt">0%</span></p>
</div>
<script type="text/javascript">
	window.onload=function(){
	    var i = 0;
	    var txt = document.getElementById("txt");
	    var ds = setInterval(function(){
	        i++;
	        txt.innerHTML = i + "%";
	        // console.log(i)
	        if (i == 100) {
	            clearInterval(ds)
	        }
	    }, 50)
	}
</script>
</body>
</html>

9、文字轮播滚动

javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字轮播滚动</title>
	<style>
		   .marquee-outer-wrapper {
            overflow: hidden;
            width: 100%;
        }
        
        .marquee-inner-wrapper {
            background: #eee;
            height: 40px;
            font-size: 14px;
            color: red;
            line-height: 40px;
            margin: 0 auto;
            white-space: nowrap;
            position: relative;
        }
        /* 需要将两个文字内容一样的span放在最右边 */
        
        .marquee-inner-wrapper span {
            position: absolute;
            top: 0;
            left: 100%;
            height: 100%;
        }
        /* 定义第一个span的animation：时长 动画名字 匀速 循环 正常播放 */
        
        .first-marquee {
            -webkit-animation: 25s first-marquee linear infinite normal;
            animation: 25s first-marquee linear infinite normal;
            padding-right: 70%;
        }
        
        @keyframes first-marquee {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }
            /* 向左移动 */
            100% {
                -webkit-transform: translate3d(-200%, 0, 0);
                transform: translate3d(-200%, 0, 0);
                display: none;
            }
        }
        
        .second-marquee {
            /* 因为要在第一个span播完之前就得出现第二个span，所以就延迟12s才播放 */
            -webkit-animation: 25s first-marquee linear 12s infinite normal;
            animation: 25s first-marquee linear 12s infinite normal;
            padding-right: 53%;
        }
        
        @keyframes second-marquee {
            0% {
                -webkit-transform: translate3d(0%, 0, 0);
                transform: translate3d(0%, 0, 0);
            }
            100% {
                -webkit-transform: translate3d(-200%, 0, 0);
                transform: translate3d(-200%, 0, 0);
                display: none;
            }
        }
	</style>
</head>
<body>
<div class="marquee-outer-wrapper">
        <div class="marquee-inner-wrapper">
            <span class="first-marquee">使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画</span>
            <span class="second-marquee">使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画</span>
        </div>
    </div>
</body>
</html>
相关推荐
HUMHSX8 分钟前
Vue 项目启动全流程解析：从入口文件到全局指令注册与页面渲染
前端·javascript·vue.js
有颜有货20 分钟前
PMC生产排产的4种算法，一次讲清
java·服务器·前端
小虎牙00722 分钟前
Android kotlin图片库Coil源码详解
android·前端
随风一样自由31 分钟前
【前端领域】前端开发核心应用场景与落地实践
前端·前端框架
an317421 小时前
弹窗数据流设计的两种高阶架构实践
前端·vue.js·架构
谢尔登1 小时前
【React】 状态管理方案
前端·react.js·前端框架
用户2136610035721 小时前
Vue商品详情与放大镜组件
前端·javascript
半个落月2 小时前
从Tapas小Demo理清localStorage、事件与this
前端·javascript
李明卫杭州2 小时前
Vue2 中 v-model 处理不同数据结构的技巧
前端·javascript·vue.js
李明卫杭州2 小时前
使用 computed 处理 v-model 复杂数据结构
前端·javascript·vue.js
热门推荐
012026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf02GitHub 镜像站点03【AI】2026 年具身智能模型和世界模型总结04AI科技热点日报 | 2026年07月01日052026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？062026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？072026 年 AI 大模型 & AI 编程工具实战全总结08Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析092026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？10Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费