css常见动画 - 技术栈

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>