css 动画效果图

已于 2022-01-24 16:04:05 修改
阅读量718 收藏 7
点赞数 1
分类专栏： css 文章标签： 动画 css css3
于 2022-01-24 15:29:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55042716/article/details/122664315
版权

一，心跳

前言;本篇文章为收藏的动画效果以及实现代码
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04心跳</title>
		<style>
			img{
				width: 400px;
				height: auto;
				/* animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 */
				animation: heart 0.5s infinite;
			}
			
			div{
				width: 100px;
				height: 100px;
				background-color: pink;
				margin: 100px auto;
				animation: heart 0.5s infinite;//一个叫heart的动画 每隔0.5s执行动画 无限次
			}
			@keyframes heart{
				0%{
					transform: scale(1);
				}
				50%{
					transform: scale(1.1);
				}
				100%{
					transform: scale(1);
				} 
			}
		</style>
	</head>
	<body>
		<img src="../images/1.jpg" height="744" width="800" alt="loading" />
		<div></div>
	</body>
</html>

二，sea大海

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	html, body {
		width: 100%;
		height: 100%;
		background-color: #0EA9B1;
		overflow: hidden;
	}

	img {
		width: 100%;
		height: auto;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	img:first-child {
		animation: move 2s linear infinite;
	}
	img:last-child {
		animation: move 2s linear 0.3s infinite;
	}


	.sun {
		width: 100px;
		height: 100px;
		/*background-color: pink;*/
		margin: 100px;
		position: relative;
	}
	.sun::before, .sun::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 50px;
		height: 50px;
		transform: translate(-50%, -50%);
		background: rgba(255, 255, 255, 0.8);
		border-radius: 50%;
		animation: sun 2s infinite;
	}
	.sun::after {
		width: 80px;
		height: 80px;
		background: rgba(255, 255, 255, 0.6);
		animation: sun 3s infinite;
	}

    @keyframes move {
		0% {
			bottom: 0;
		}

		50% {
			bottom: -50px;
		}

		100% {
			bottom: 0;
		}
	}

	@keyframes sun {
		0% {
			transform:translate(-50%, -50%) scale(1);
			box-shadow: 0px 0px 5px rgba(255,255,255,0.7);
		}

		50% {
			transform:translate(-50%, -50%) scale(1.1);
			box-shadow: 0px 0px 30px rgba(255,255,255,0.7);
		}

		100% {
			transform:translate(-50%, -50%) scale(1);
			box-shadow: 0px 0px 5px rgba(255,255,255,0.7);
		}
	}
	</style>
</head>
<body>
	<div class="sun"></div>
	<img src="../images/1.png" height="211" width="2000" alt="loading">
	<img src="../images/2.png" height="211" width="2000" alt="loading">
</body>
</html>

三，泡泡

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>15泡泡</title>
		<style>
			div{
				width: 300px;
				height: 80px;
				border-radius: 20px;
				
				background:url(../images/paopao.png) no-repeat top left,url(../images/paopao.png) no-repeat right bottom;
				background-color: blue;
				transition: all 3s; 
			}
			div:hover{
				background-position: right bottom,top left; 
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

四，电池充电动画

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
	<style>
		
	html, body {
  		margin: 0;
  		height: 100%;
	}

	body {
  		display: flex;
  		justify-content: center;
  		align-items: center;
  		background: #ed556a;
	}

section {
  width: 650px;
  height: 300px;
  padding: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

span {
  width: 48px;
  height: 96px;
  display: inline-block;
  position: relative;
  color: white;
  border: 3px solid;
  animation: loading 2s linear infinite alternate;
}

span::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 6px;
  width: 36px;
  height: 12px;
  background-color: white;
}

@keyframes loading {
  0% {
    box-shadow: 0 0 inset
  }
  100% {
    box-shadow: 0 -96px inset
  }
}	
	</style>
<body>
    <section><span></span></section>
</body>
</html>

五，炫酷水波浪Loading过渡动画

在这里插入图片描述

HTML

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>Document</title>
    </head>

    <body>
        <section>
            <div class="circle">
                <div class="wave"></div>
            </div>
        </section>
    </body>

</html>

CSS

/* 
模版css样式
仅供演示使用 
*/

html, body {
	margin: 0;
	height: 100%;
} 

body {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #12383e;
}

section {
	width: 650px;
	height: 300px;
	padding: 10px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20px;
	border: 18px solid white;
	overflow: hidden;
}

section::before {
	content: 'CSS';
	width: 150px;
	height: 150px;
	text-align: center;
	line-height: 250px;
	background-color: #00cec9;
	position: absolute;
	top: -76px;
	right: -76px;
	transform: translate(50%, -50%);
	font-size: 32px;
	font-weight: 500;
	font-family: sans-serif;
	color: white;
	transform: rotate(45deg);
}

section::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	border: 10px solid white;
	border-radius: 20px;
}

/* 实现代码 */

.circle {
	position: relative;
	width: 200px;
	height: 200px;
	background: #b0f4ff;
	border-radius: 50%;
	overflow: hidden;
	animation: loadingBreath 5s infinite linear;
}

.circle::before {
	content: 'Loading...';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 18px;
	letter-spacing: 2px;
	color: #10a789;
	font-family: sans-serif;
	z-index: 2;
}

.circle::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 25%;
	bottom: 0;
	background-image: linear-gradient(to top, #12c8e0, #36e9ff, #5ffbf1);
	animation: loadingRun 5s linear infinite;
}

.wave::before {
	content: '';
	position: absolute;
	left: -50%;
	width: 200%;
	height: 200%;
	z-index: 1;
	background-color: #85f7fb;
	border-radius: 52% 25% 62% 69%/25% 38%;
	animation: loadingWave 5s linear infinite;
}

.wave::after {
	content: '';
	position: absolute;
	left: -50%;
	width: 200%;
	height: 200%;
	z-index: 1;
	background-color: #d0f4ff;
	border-radius: 42% 38% 40% 62%/28% 35%;
	animation: loadingWave 5s ease-in-out infinite;
}

/* 呼吸灯动画 */

@keyframes loadingBreath {
	0% {
		box-shadow: 0 0 5px 0 #85f7fb;
	}
	25% {
		box-shadow: 0 0 20px 0 #85f7fb;
	}
	50% {
		box-shadow: 0 0 5px 0 #85f7fb;
	}
	75% {
		box-shadow: 0 0 20px 0 #85f7fb;
	}
	100% {
		box-shadow: 0 0 5px 0 #85f7fb;
	}
}

/* 底部液体上升动画 */

@keyframes loadingRun {
	0% {
		height: 25%;
	}
	100% {
		height: 100%;
	}
}

/* wave动画 */

@keyframes loadingWave {
	0% {
		top: -100%;
		transform: rotate(0);
	}
	100% {
		top: -200%;
		transform: rotate(360deg);
	}
}

六，卡通齿轮效果

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>Document</title>
    </head>
    <body>
        <section>
            <div class="gear">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="hole"></div>
        </section>
    </body>
</html>

html, body {
	margin: 0;
	height: 100%;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	background: gainsboro;
	/* background: #222f3e; */
}

section {
	width: 650px;
	height: 300px;
	padding: 10px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid orange;
}

.gear {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background-color: #f98db9;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: rotate 12s infinite linear;
}

.gear div {
	position: absolute;
	width: 30px;
	height: 150px;
	background: #f98db9;
	border-radius: 8px;
}

.gear div:nth-child(1) {
	transform: rotate(0deg);
}

.gear div:nth-child(2) {
	transform: rotate(45deg);
}

.gear div:nth-child(3) {
	transform: rotate(90deg);
}

.gear div:nth-child(4) {
	transform: rotate(135deg);
}

.hole {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	background-color: white;
	border-radius: 50%;
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

七，翻转

1.rotateX

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>17rotateX</title>
		<style>
			img{
				transition: all 2s;
			}
			img:hover{
				transform: rotateX(360deg);
			}
		</style>
	</head>
	<body>
		<img src="../images/x.jpg" height="226" width="300" alt="loading" />
	</body>
</html>

2.rotateY

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>18rotateY</title>
		<style>
			body{
				perspective: 500px;
			}
			img{
				transition: all 2s;
			}
			img:hover{
				transform: rotateY(360deg);
			}
		</style>
	</head>
	<body>
		<img src="../images/1498446043198.png" alt="loading" />
	</body>
</html>

3.两面翻转的盒子

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>18rotateY</title>
		<style>
			body{
				perspective: 500px;
			}
			img{
				transition: all 2s;
			}
			img:hover{
				transform: rotateY(360deg);
			}
		</style>
	</head>
	<body>
		<img src="../images/1498446043198.png" alt="loading" />
	</body>
</html>

参考：https://haihong.blog.csdn.net/category_9815600.html
https://blog.csdn.net/dayexiaofan/article/details/90646354

王小王和他的小伙伴
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
纯CSS绘制电池充电水波纹动效(uni-app|view组件版)
12-05
纯CSS绘制电池充电水波纹动效源码，请下载后使用HbuilderX打开，直接运行即可，建议在最新版的谷歌浏览器中运行动效
纯 CSS 实现波浪效果！
diaoleiluomulaojin的博客
08-07 3030
而使用纯 CSS 的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。     当然，借助其他力量（SVG、CANVAS），是可以很轻松的完成所谓的波浪效果的，先看看，非 CSS 方式实现的波浪效果。     使用 SVG 实现波浪效果     借助 SVG ，是很容易画出三次贝塞尔曲线的。     看看效果：     代码如下：         50.0%        
CSS3+DIV很酷的渐变波浪网页js特效
ICode联盟
08-12 264
很酷的CSS3+DIV渐变波浪网页特效，使用纯CSS实现的动效没有使用任何JavaScript代码。
纯css实现电池波浪充电特效
weixin_44243056的博客
12-25 2328
实现原理: 主要利用css的transform变换与animation属性，通过使用translate(x,y) 实现元素位移、rotate(deg) 实现元素旋转、@keyframes实现关键帧动画。css知识点附于本文底部。 展现效果 HTML部分: <div class="container"> <div class="header"></div&gt...
通过css将多张图片绘制成帧动画
Adoro的博客
06-30 2583
通过css将多张图片绘制成帧动画 使用关键：@keyframes、animation 1.定义一个容器 <div class="img-box"></div> 这个容器用于放置背景图片 2.编写css @keyframes gif { 0% { background-image: url('图片路径'); } 25% { background-image: url('图片路径'); } 50% { background-image: url('图片路径')
3D效果CSS柱状图动画特效
06-24
动画效果通常是通过CSS3的transition或animation属性来完成的。transition可以实现元素在特定属性改变时的平滑过渡，而animation则允许我们定义更复杂的动画序列，包括动画的持续时间、延迟、重复次数以及关键帧（@...
CSS3图片HOVER炫酷动画效果
09-13
本主题将深入探讨“CSS3图片HOVER炫酷动画效果”，这是一种通过CSS3实现的当鼠标悬停在图片上时触发的动态效果，能够大大提升用户体验和网站的吸引力。 首先，我们要了解CSS3中的`:hover`伪类选择器。`:hover`是...
css3滑动图片动画效果
11-05
在现代网页设计中，CSS3（层叠样式表第三版）已经成为了不可或缺的一部分，它带来了许多新特性，其中就包括丰富的动画效果。本教程将详细讲解如何利用CSS3实现滑动图片的动画效果，帮助你为网站增添动态美感。 首先...
CSS3卫星信息传送图形动画特效
07-24
本主题聚焦于"CSS3卫星信息传送图形动画特效"，这是一种利用CSS3特性实现的创新性动画效果，能够模拟卫星旋转并传递信息的场景，为网站增添科技感和互动性。 首先，我们来深入理解CSS3的核心概念。CSS3是 Cascading...
CSS3图片动画.zip
08-09
在Web开发中，CSS3（层叠样式表第三版）引入了许多新特性，其中动画效果是提升用户体验的重要手段之一。本教程将深入探讨如何使用CSS3来实现图片动画，特别是PNG序列图动画，通过模仿腾讯网LOGO的动态效果来阐述这一...
三角形旋转css_好玩儿的css
weixin_33469623的博客
01-02 529
引言其实很早就想写一篇关于 css 的文章了。(拖延症，一直没写。。。)css 发展到今天已经越来越强大了。其语法的日新月异，让很多以前完成不了的事情，现在可以非常轻松的做到。今天带大家看几个用css(部分会用到canvas和js)实现的好玩儿的效果(不好好琢磨下，还真写不出来)本篇文章有参考一些css大佬的杰作，具体参考链接在文末有提及超能陆战队-大白超能陆战队中的大白，相信你一定不陌...
前端必学的CSS3波浪效果演示
风中追风
06-14 1万+
随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css3动画,这里作者给大家分享一个前端开发必掌握的一个CSS3波浪效果，赶紧学起来吧，加在自己开发网页的底部，给页面增加一点活泼的气息~......
分享180个美美的CSS渐变样式效果图
hello
12-06 1505
为180个渐变颜色取了自己的颜色名字也是让我脑洞大开。链接：http://color.oulu.me
CSS中的动画效果
一个非常Cool的人
01-29 1万+
介绍了css中的动画,包括动画的定义,动画的动作,动画的属性以及动画的实际应用。还有热点图等动画案例。
28个炫酷的纯CSS特效动画示例（含源代码）
热门推荐
大剑师兰特的GIS世界
01-15 2万+
CSS是网页的三驾马车之一，是对页面布局的总管家，2024年了，这里列出28个超级炫酷的CSS动画示例，让您的网站更加炫目多彩。
前端css样式常见图形效果展示（直接上手）
杨爽
11-23 1466
简单写一下常见的基础图形，以及一些遇到的样式小图标 下图是css效果⬇： 各个图形的代码如下： Square(正方形) /*正方形*/ .square { width: 60px; height: 60px; background: red; } Circle(圆形) /*圆形*/ /* 可以使用百分比值(大于30%)，但是低版本的Android不支持 */ .circle { width: 60px; height:
css实现图片动画悬停效果
m0_58406287的博客
04-18 720
css实现图片动画悬停效果
基于css实现动画效果
qq_37011724的博客
01-11 771
本文将会基于css，实现各种动画效果，接下来会从简单几个例子入手。
CSS动图效果
qq_22645881的博客
09-28 1432
:-: 过度 /* transition 过度动画 作用属性 -- transition-property 时间间隔 -- transition-duration 动图效果 -- transition-timing-function 等待延时 ...
css文字旋转动画效果图
最新发布
07-13
CSS的文字旋转动画可以创建出动态、有趣的视觉效果，常用于网页设计中的标题特效、按钮转换或其他需要吸引眼球的部分。以下是制作文字旋转动画的基本步骤和示例： 1. **设置基础样式**： ```css .text-rotate { ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王小王和他的小伙伴

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值