css3各种动画效果合集（一）

一、旋转变色效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转变色效果</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			section{
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
				background: #042104;
				animation: abimateBg 10s linear infinite;
			}
			@keyframes abimateBg{
				0%{
					filter: hue-rotate(0deg);
				}
				100%{
					filter: hue-rotate(360deg);
				}
			}
			section .loader{
				position: relative;
				width: 120px;
				height: 120px;
			}
			section .loader span{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				transform: rotate(calc(18deg*var(--i)));
			}
			section .loader span::before{
				content: ' ';
				position: absolute;
				top: 0;
				left: 0;
				width: 15px;
				height: 15px;
				border-radius: 50%;
				background: #00ff0a;
				box-shadow: 0 0 10px #00ff0a,
				0 0 20px #00ff0a,
				0 0 40px #00ff0a,
				0 0 60px #00ff0a,
				0 0 80px #00ff0a,
				0 0 100px #00ff0a;
				animation: animate 2s linear infinite;
				animation-delay: calc(0.1s * var(--i));
			}
			@keyframes animate{
				0%{
					transform: scale(1);
				}
				80%,100%{
					transform: scale(0);
				}
			}
		</style>
	</head>
	<body>
		<section>
			<div class="loader">
				<span style="--i:1;"></span>
				<span style="--i:2;"></span>
				<span style="--i:3;"></span>
				<span style="--i:4;"></span>
				<span style="--i:5;"></span>
				<span style="--i:6;"></span>
				<span style="--i:7;"></span>
				<span style="--i:8;"></span>
				<span style="--i:9;"></span>
				<span style="--i:10;"></span>
				<span style="--i:11;"></span>
				<span style="--i:12;"></span>
				<span style="--i:13;"></span>
				<span style="--i:14;"></span>
				<span style="--i:15;"></span>
				<span style="--i:16;"></span>
				<span style="--i:17;"></span>
				<span style="--i:18;"></span>
				<span style="--i:19;"></span>
				<span style="--i:20;"></span>
			</div>
		</section>
		
	</body>
</html>

效果展示

二、毛玻璃效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>毛玻璃效果</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			body{
				display: flex;
				background: #eafdff;
			}
			.container{
				width: 100%;
				min-height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;
			}
			.container .loader{
				position: relative;
				height: 150px;
				width: 150px;
				margin: 100px;
			}
			.container .loader.one span{
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: block;
				background: #5989ff;
				border-radius: 50%;
				animation: animate ease-in-out 2s infinite;
			}
			@keyframes animate{
				0%,100%{
					transform: translateX(-80px);
				}
				50%{
					transform: translateX(80px);
				}
			}
			.container .loader.one span:nth-child(2){
				left: 50%;
				background: rgba(56,109,241,0.05);
				backdrop-filter: blur(10px);
				border: 1px solid rgba(255,255,255,0.1);
				animation-delay: -1s;
			}
			/* 添加阴影 */
			.container .loader.one span::before,
			.container .loader.two span:nth-child(1)::before{
				content: '';
				position: absolute;
				bottom: -100px;
				left: -20%;
				width: 140%;
				height: 40px;
				background: radial-gradient(rgba(0,0,0,0.04),transparent,transparent);
				border-radius: 50%;
			}
			.container .loader.two{
				position: relative;
				width: 180px;
				height: 180px;
			}
			.container .loader.two span:nth-child(1){
				position: absolute;
				top: 10px;
				left: 10px;
				right: 10px;
				bottom: 10px;
				background: rgba(233,30,99,0.05);
				border-radius: 50%;
				backdrop-filter: blur(10px);
				border: 1px solid rgba(255,255,255,0.1);
				z-index: 2;
			}
			.container .loader.two span:nth-child(2){
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: block;
				border-radius: 50%;
				z-index: 1;
				overflow: hidden;
				animation: rotateCircle 1s linear infinite;
			}
			@keyframes rotateCircle{
				0%{
					transform: rotate(0deg);
				}
				100%{
					transform: rotate(360deg);
				}
			}
			.container .loader.two span:nth-child(2)::before{
				content: '';
				position: absolute;
				top: -50%;
				left: -50%;
				width: 100%;
				height: 100%;
				background: #ff6198;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="loader one">
				<span></span>
				<span></span>
			</div>
			<div class="loader two">
				<span></span>
				<span></span>
			</div>
		</div>
	</body>
</html>

效果展示

三、攀爬效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>攀爬效果1</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			body{
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
				background: #000;
				overflow: hidden;
			}
			.container{
				position: relative;
				width: 100%;
				transform: rotate(-35deg);
			}
			.container .box{
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				left: -200px;
				width: calc(100%+400px);
				height: 200px;
				-webkit-box-reflect: below 1px linear-gradient(transparent,#004); 
				animation: animateSurface 1.5s ease-in-out infinite;
			}
			@keyframes animateSurface{
				0%{
					transform: translateX(0px);
				}
				100%{
					transform: translateX(-200px);
				}
			}
			.container .box .cube{
				position: relative;
				width: 200px;
				height: 200px;
				background: #03e9f4;
				box-shadow: 0 0 5px rgba(3,233,244,1),
				0 0 25px rgba(3,233,244,1),
				0 0 50px rgba(3,233,244,1),
				0 0 100px rgba(3,233,244,1),
				0 0 200px rgba(3,233,244,0.5),
				0 0 300px rgba(3,233,244,0.5);
				transform-origin: bottom right; 
				animation: animate 1.5s ease-in-out infinite;
			}
			@keyframes animate{
				0%{
					transform: rotate(0deg);
				}
				60%{
					transform: rotate(90deg);
				}
				65%{
					transform: rotate(85deg);
				}
				70%{
					transform: rotate(90deg);
				}
				75%{
					transform: rotate(87.5deg);
				}
				80%,100%{
					transform: rotate(90deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box">
				<div class="cube"></div>
			</div>
		</div>
	</body>
</html>

四、流体加载效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>流体加载效果</title>
		<style>
			*{
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}
			section{
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
				background: #0c1b21;
			}
			.loader{
				position: relative;
				width: 250px;
				height: 250px;
				filter: url(#gooey);
				animation: animate 16s linear infinite;
			}
			.loader span{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: block;
				transform: rotate(calc(45deg*var(--i)));
			}
			.loader span::before{
				content: '';
				position: absolute;
				top: 0;
				left: calc(50%-20px);
				width: 40px;
				height: 40px;
				background: linear-gradient(45deg,#c7eeff,#03a9f4);
				border-radius: 50%;
				box-shadow: 0 0 30px #00bcd4;
			}
			.roate{
				animation: animate 4s ease-in-out infinite;
				animation-delay: calc(-0.2s*var(--j));
			}
			@keyframes animate{
				0%{
					transform: rotate(0deg);
				}
				100%{
					transform: rotate(360deg);
				}
			}
			svg{
				width: 0;
				height: 0;
			}
		</style>
	</head>
	<body>
		<section>
			<svg>
				<filter id="gooey">
					<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
					<feColorMatrix values="
					1 0 0 0 0 
					0 1 0 0 0 
					0 0 1 0 0 
					0 0 0 20 -10"></feColorMatrix>
				</filter>
			</svg>
			<div class="loader">
				<span style="--i:1;"></span>
				<span style="--i:2;"></span>
				<span style="--i:3;"></span>
				<span style="--i:4;"></span>
				<span style="--i:5;"></span>
				<span style="--i:6;"></span>
				<span style="--i:7;"></span>
				<span style="--i:8;"></span>
				<span class="roate" style="--j:0;"></span>
				<span class="roate" style="--j:1;"></span>
				<span class="roate" style="--j:2;"></span>
				<span class="roate" style="--j:3;"></span>
				<span class="roate" style="--j:4;"></span>
			</div>
		</section>
	</body>
</html>

五、发光渐变加载环效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>发光渐变加载环效果</title>
		<style>
			*{
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}
			body{
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
				background: #240229;
			}
			.loader{
				position: relative;
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background: linear-gradient(#14ffe9,#ffeb3b,#ff00e0);
				animation: animate 0.5s linear infinite;
			}
			@keyframes animate{
				0%{
					transform: rotate(0deg);
				}
				0%{
					transform: rotate(360deg);
				}
			}
			.loader::after{
				content: '';
				position: absolute;
				top: 10px;
				left: 10px;
				right: 10px;
				bottom: 10px;
				background: #240229;
				border-radius: 50%;
			}
			.loader span{
				position: absolute;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background: linear-gradient(#14ffe9,#ffeb3b,#ff00e0);
			}
			.loader span:nth-child(1){
				filter: blur(5px);
			}
			.loader span:nth-child(2){
				filter: blur(10px);
			}
			.loader span:nth-child(3){
				filter: blur(25px);
			}
			.loader span:nth-child(4){
				filter: blur(50px);
			}
		</style>
	</head>
	<body>
		<div class="loader">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</body>
</html>

六、3D旋转动画效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D旋转动画效果</title>
		<style>
			body{
				margin: 0;
				padding: 0;
			}
			.box{
				position: absolute;
				top: calc(50%-100px);
				left: calc(50%-135px);
				height: 200px;
				transform-style: preserve-3d;
				transform: perspective(1000px) rotateY(45deg);
			}
			.box div{
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				display: flex;
				transform-style: preserve-3d;
			}
			.box div span{
				display: block;
				position: relative;
				width: 50px;
				height: 100%;
				background: linear-gradient(#e8e8e8,#a7a7a7,#e8e8e8);
				animation: animate 2.8s linear infinite;
			}
			.box div span::before{
				content: '';
				position: absolute;
				display: block;
				width: 100%;
				height: 100%;
				background: #000;
				transform-style: preserve-3d;
				transform: translateX(-25px) scaleY(.5);
			}
			@keyframes animate{
				0%{
					transform: rotate(0deg);
				}
				100%{
					transform: rotate(360deg);
				}
			}
			.box div span:nth-child(1){
				animation-delay: 0s;
			}
			.box div span:nth-child(2){
				animation-delay: 0.2s;
			}
			.box div span:nth-child(3){
				animation-delay: 0.4s;
			}
			.box div span:nth-child(4){
				animation-delay: 0.6s;
			}
			.box div span:nth-child(5){
				animation-delay: 0.8s;
			}
			.box div span:nth-child(6){
				animation-delay: 1s;
			}
			.box div span:nth-child(7){
				animation-delay: 1.2s;
			}
			.box div span:nth-child(8){
				animation-delay: 1.4s;
			}
			.box div span:nth-child(9){
				animation-delay: 1.6s;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
	</body>
</html>

css3各种动画效果合集（一）

一、旋转变色效果

二、毛玻璃效果

三、攀爬效果

四、流体加载效果

五、发光渐变加载环效果

六、3D旋转动画效果

大学生bootstrap框架网页作业成品 web前端大作业期末源码航海王html jquery bootstrap响应式网页制作模板学生海贼王动漫bootstrap框架网站作品 (3)

解决 Vue 使用 Axios 进行跨域请求的方法详解

HTML5--经典案例：名人名言（学生版）

HTML5

541.响应式云服务企业推广网页大学生期末大作业 Web前端网页制作 html5 css js

HTML5 css js实现精仿 Windows 10 桌面主题，高颜值Vue.js，可自定义应用，组件，CSS3，支持HTML，APP，小程序网站

html5期末大作业鲜花花卉主题网页设计html网页模板源码？

5 个最佳的 Rust HTML 解析器

ass文件

（2024最新毕设合集）基于HTML/SSM-智慧养老服务平台-43454|可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C 、python、数据可视化、大数据、全套文案

前端哥

nlohmann/json的介绍和使用详解

使用python读写txt和json（jsonl）大文件

python将字典数据保存为json文件

【geojson 各国数据获取指引】

settings.json：Visual Studio Code的深度定制化核心

如何使用 Python 批量检测和转换 JSONL 文件编码为 UTF-8

执行npm run serve 找不到vite模块 Error: Cannot find module

前端使用 npm install后会报code ERESOLVEERESOLVE unable to resolve dependency tree等导入依赖错误

问题：无法加载文件 C:\Users\ASUS\AppData\Roaming\npm\npm.ps1，因为在此系统上禁止运行脚本。

共享依赖的新选择：探索 PNPM 在低代码开发中的威力

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

3
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

4
vue使用datav echarts

2024-09-06 00:09:381000

5
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

6
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

7
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

8
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

9
npm的使用

2024-08-18 00:08:131000

10
JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000