css常见动画

devtools/2024/10/16 2:26:44/

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>/*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、制作小圆圈轮流放大的加载动画

<!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、椭圆形进度条加载

<!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、文字轮播滚动

<!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>

http://www.ppmy.cn/devtools/4575.html

相关文章

js，ts中简写符号大全

js，ts中简写符号大全

falsy 值&#xff08;虚值&#xff09;&#xff1a;是在布尔值Boolean上下文中认定为 false 的值。在 JavaScript 中只有 8 个 falsy 值&#xff0c;包括undefined、null、false、空字符串 (双引号 ""、单引号’’、反引号 )、NaN、0。 nullish 值&#xff1a;要么是…
阅读更多...
c++通过运算符重载实现的日期类(源码)

c++通过运算符重载实现的日期类(源码)

通过我们对运算符重载的学习&#xff0c;我们可以由此实现一个日期类。 头文件&#xff1a; #pragma once #include<iostream> #include<assert.h> using std::endl; using std::cout; using std::cin; using std::ostream; using std::istream;class Date{//声明…
阅读更多...
口型动画论文2：《基于语音驱动的表情动画设计与实现》

口型动画论文2：《基于语音驱动的表情动画设计与实现》

说明 本文是北京邮电大学的硕士毕业论文&#xff0c;作者是郭梦婷。由于是艺术硕士&#xff0c;所以本文没有罗列很多公式&#xff0c;而是从动画创作的角度来写如何根据语音设计动画人物的嘴型及表情。本文作者行文缜密、轻松&#xff0c;举得例子都是一些热播的动画和电影&a…
阅读更多...
ChatGPT深度科研应用、数据分析及机器学习、AI绘图与高效论文撰写

ChatGPT深度科研应用、数据分析及机器学习、AI绘图与高效论文撰写

2022年11月30日&#xff0c;可能将成为一个改变人类历史的日子——美国人工智能开发机构OpenAI推出了聊天机器人ChatGPT3.5&#xff0c;将人工智能的发展推向了一个新的高度。2023年4月&#xff0c;更强版本的ChatGPT4.0上线&#xff0c;文本、语音、图像等多模态交互方式使其在…
阅读更多...
Vue3： toRefs与toRef的基本使用

Vue3： toRefs与toRef的基本使用

一、前言 本文主要介绍toRefs与toRef的基本使用。 二、内容 1、基本概念 作用: toRefs与toRef可以将一个响应式对象中的每一 个属性&#xff0c;转换为ref对象&#xff1b;不同 toRefs与toRef功能一致&#xff0c;但toRefs可以批量转换。 2、toRefs 如果把reactive定义的…
阅读更多...
产品推荐 | 基于Lattice用于原型和FPGA设计和开发的Avant-E 评估板

产品推荐 | 基于Lattice用于原型和FPGA设计和开发的Avant-E 评估板

01 产品概述 莱迪思半导体Avant-E评估板使设计人员能够快速进行原型设计和FPGA设计测试。它提供对所有 I/O 的访问&#xff0c;以及广泛的内存选项&#xff0c;以实现更快的原型设计和开发。 Avant-E评估板采用LFG1156封装的Avant-E FPGA。该板可以通过 FMC HPC、PMAD 和 Ras…
阅读更多...
Python机器学习项目开发实战：可视化数据

Python机器学习项目开发实战：可视化数据

注意&#xff1a;本文的下载教程&#xff0c;与以下文章的思路有相同点&#xff0c;也有不同点&#xff0c;最终目标只是让读者从多维度去熟练掌握本知识点。 下载教程&#xff1a;Python机器学习项目开发实战_可视化数据_编程案例解析实例详解课程教程.pdf 在Python机器学习项…
阅读更多...
爬虫 //获取元素中的数据

爬虫 //获取元素中的数据

// <!--jsoup解析工具所需依赖--> // <dependency> // <groupId>org.jsoup</groupId> // <artifactId>jsoup</artifactId> // <version>1.10.3</version> // </depende…
阅读更多...
最新文章

Copyright @ 2022~2023