1、音乐播放效果
<!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、电影闭幕效果
<!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、箭头动效
<!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、按钮心跳效果
<!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、水波扩散效果加载动画
<!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、环形加载动画
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>环形加载动画</title><style>* {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;}.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;}.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、制作小圆圈轮流放大的加载动画
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>制作小圆圈轮流放大的加载动画</title><style>
* { 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、椭圆形进度条加载
<!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 + "%";if (i == 100) {clearInterval(ds)}}, 50)}
</script>
</body>
</html>
9、文字轮播滚动
<!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;}.marquee-inner-wrapper span {position: absolute;top: 0;left: 100%;height: 100%;}.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 {-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>
