CSS动画效果

最新推荐文章于 2024-05-23 22:54:35 发布
最新推荐文章于 2024-05-23 22:54:35 发布
阅读量5w 收藏 463
点赞数 66
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dayexiaofan/article/details/90646354
版权

继上篇文章之后，先对之前学的内容进行复习一下
01、过渡

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div {
		width: 100px;
		height: 100px;
		background-color: pink;
		transition: all .3s;    /* 过渡写再本身是 谁做动画写再谁身上  s  ms*/
	}
	div:hover {
		/*background: green no-repeat url();*/
		background: green ;
		/*transform: translate(100px, 100px);   只有 x  y 默认为0 
		transform: scale(1.3);   只有 x  y  默认 等比例缩放  */	
		transform: translate(100px, 100px) scale(0.3) rotate(45deg);  /*顺序有关系 先 移动后缩放*/
	}
	</style>
</head>
<body>
	<div>
		
	</div>
</body>
</html>

在这里插入图片描述
02、体会动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03体会动画</title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background-color: pink;
				position: absolute;
				left: 0;
				/*调用动画 */
				/* animation：动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 */
				animation: move 2s ease 0s infinite alternate;
				-webkit-animation: move 2s ease 0s infinite alternate;
			}
			
			/* 声明动画 关键帧 @keyframes 动画名称{} */
			@keyframes move{
				from{
					left: 0;
					background-color: pink;
				}
				to{
					left: 1000px;
					background-color: yellow;
				}
			}
			@-webkit-keyframes move{
				from{
					left: 0;
					background-color: yellow;
				}
				to{
					left: 1000px;
					background-color: yellow;
				}
			}
			@-ms-keyframes move{
				from{
					left: 0;
					background-color: pink;
				}
				to{
					left: 1000px;
					background-color: yellow;
				}
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述
03、心跳

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

在这里插入图片描述
05、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>

在这里插入图片描述
06、三列等宽布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>07三列等宽布局</title>
		<style>
			section{
				width: 80%;
				height: 150px;
				margin: 100px auto;
			}
			section div{
				width: 30%;
				height: 100%;
				float: left;
				margin: 0 10px;
			}
			section div:nth-child(1){
				background-color: pink;
			}
			section div:nth-child(2){
				background-color: purple;
			}
			section div:nth-child(3){
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<section>
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</section>
	</body>
</html>

在这里插入图片描述
07、css3伸缩布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css3伸缩布局</title>
		<style>
			section{
				width: 80%;
				height: 150px;
				margin: 100px auto;
				/* 父亲添加 伸缩布局 */
				display: flex;
			}
			section div{
				height: 100%;
				flex: 1;//孩子的份数
			}
			section div:nth-child(1){
				background-color: pink;
				flex: 2;
			}
			section div:nth-child(2){
				background-color: purple;
				margin: 0 10px;
			}
			section div:nth-child(3){
				background-color: blue;
				flex: 3;
			}
		</style>
	</head>
	<body>
		<section>
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</section>
	</body>
</html>

在这里插入图片描述
08、css3伸缩布局固定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css3伸缩布局固定宽度</title>
		<style>
			section{
				width: 80%;
				height: 150px;
				margin: 100px auto;
				
				/* 父亲添加 伸缩布局 */
				display: flex;
				min-width: 500px;//section最小的宽度就是500px
			}
			section div{
				height: 100%;
				/* flex:1 孩子的份数 */
			}
			section div:nth-child(1){
				background-color: pink;
				width: 200px;
			}
			section div:nth-child(2){
				background-color: purple;
				margin: 0 10px;
				flex: 2;
			}
			section div:nth-child(3){
				background-color: blue;
				flex: 1;
			}
		</style>
	</head>
	<body>
		<section>
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</section>
	</body>
</html>

在这里插入图片描述
09、css3伸缩布局垂直分布

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css3伸缩布局垂直分布</title>
		<style>
			section{
				width: 80%;
				height: 150px;
				margin: 100px auto;
				/* 父亲添加 伸缩布局 */
				display: flex;
				min-width: 500px; //section最小的宽度就是500px
				flex-direction: column;//垂直分布
			}
			section div{
				flex: 1;//孩子的份数
			}
			section div:nth-child(1){
				background-color: pink;
			}
			section div:nth-child(2){
				background-color: purple;
			}
			section div:nth-child(3){
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<section>
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</section>
	</body>
</html>

在这里插入图片描述
10、携程网

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>11携程网</title>
		<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	html, body {
		min-width: 320px; 
		max-width: 540px;
		margin: 0 auto;
		font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
	}
	header {
		height: 108px;
	}
	header img {
		height: 100%;
		width: auto;
	}
	nav {
		border: 1px solid #ccc;
		padding: 4px;
	}
	nav  a  {
		text-decoration: none;
		color: #fff;
		text-shadow: 0 2px 1px rgba(0,0,0,.2);
		/*text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;*/
	}
	.row {
		height: 90px;
		display: flex; /*伸缩布局*/
		border-radius: 5px; 
		overflow: hidden;
		margin-bottom: 5px;
	}
	.row div {
		height: 100%;
		flex: 1;
		background-color: #FF697A;
		border-right: 1px solid #fff;
	}
	.row div:nth-child(3) {
		border-right: 0;
	}
	.row div a {
		display: block;
		width: 100%;
		height: 100%;
	}
	.row33 {
		display: flex;
		flex-direction: column;
	}
	.row33 a {
		flex: 1;
		text-align: center;
		line-height: 45px;
	}
	.row33 a:first-child {
		border-bottom: 1px solid #fff;
	}
	.row em {
		display: block;
		height: 45px;
		text-align: center;
		line-height: 45px;
		font-style: normal;
	}
	.row i {
		display: block;
		width: 43px;
		height: 43px;
		margin: -5px auto 0;
		background: url(../images/ctrip.png) no-repeat 0 -127px;
		-webkit-background-size: 104px;  /* 前缀 */
		-moz-background-size: 104px;  /* 前缀 火狐 */
		-ms-background-size: 104px;  /* 前缀 ie */
		-o-background-size: 104px;  /* 前缀 ie */
		background-size: 104px;

	}
	.row .icon-flight {
		background-position: 0 -288px;
	}

	</style>

	</head>
	<body>
		<header>
			<img src="../images/banner.jpg" height="307" width="1536" alt="">
		</header>
		<nav>
			<div class="row">
				<div>
					<a href="#">
						<em>酒店</em>
						<i></i>
					</a>
				</div>
				<div class="row33">
					<a href="#">海外酒店</a>
					<a href="#">特价酒店</a>
				</div>
				<div class="row33">
					<a href="#">团购</a>
					<a href="#">同福客栈</a>
				</div>
				
			</div>
			<div class="row">
				<div>
					<a href="#">
						<em>酒店</em>
						<i class="icon-flight"></i>
					</a>
				</div>
				<div class="row33">
					<a href="#">海外酒店</a>
					<a href="#">特价酒店</a>
				</div>
				<div class="row33">
					<a href="#">团购</a>
					<a href="#">同福客栈</a>
				</div>
				
			</div>
			<div class="row">
				<div>
					<a href="#">
						<em>酒店</em>
						<i></i>
					</a>
				</div>
				<div class="row33">
					<a href="#">海外酒店</a>
					<a href="#">特价酒店</a>
				</div>
				<div class="row33">
					<a href="#">团购</a>
					<a href="#">同福客栈</a>
				</div>
				
			</div>
			<div class="row">
				<div class="row33">
					<a href="#">海外酒店</a>
					<a href="#">特价酒店</a>
				</div>
				<div class="row33">
					<a href="#">海外酒店</a>
					<a href="#">特价酒店</a>
				</div>
				<div class="row33">
					<a href="#">团购</a>
					<a href="#">同福客栈</a>
				</div>
				
			</div>
		</nav>

	</body>
</html>

在这里插入图片描述
11、背景缩放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>12背景缩放</title>
		<style>
			div{
				width: 400px;
				height: 400px;
				background: url(../images/x.jpg) no-repeat;
				/* 颜色 图片 平铺 位置 滚动 */
				border: 1px solid red;
				/* background-size: w h 规定背景图像的尺寸; */
				/* background-size:100px 100px;  */
				/* background-size:100px; 如果只有一个值 后面一个值默认为auto 等比例缩放 */
				/* background-size:cover; */
				background-size: contain;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述
12、背景渐变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>13背景渐变</title>
		<style>
			div{
				width: 300px;
				height: 100px;
				/* background:-webkit-linear-gradient(渐变的起始位置，颜色位置，颜色位置) */
				background: -webkit-linear-gradient(top,red 0%,green 50%,blue 100%);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述
13、多背景

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>14多背景</title>
		<style>
			div{
				border: 1px solid #000;
				width: 600px;
				height: 600px;
				background: url(../images/2.jpg) no-repeat top left,url(../images/3.jpg) no-repeat bottom right;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述
14、泡泡

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

在这里插入图片描述
15、透明度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>16透明度</title>
		<style>
			div{
				width: 100px ;
				height: 100px;
				background-color: red;
				/* background:rgba(255,0,0,.2) 盒子的背景透明*/
				opacity: 0.2;//盒子半透明
				/* filter:alpha(opacity=20) ie 6写法*/
			}
		</style>
	</head>
	<body>
		<div></div>
		<p>12312312</p>
	</body>
</html>

在这里插入图片描述
16、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>

在这里插入图片描述
17、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>

b
18、两面翻转的盒子

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

在这里插入图片描述
好用的话，关注一下我的公众号支持一下吧
在这里插入图片描述

a little peanut
关注
  • 66
    点赞
  • 踩
  • 463
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
CSS的动画特效（animation）
githubcurry
12-09 1万+
今天来讲一下css中很实用的一个效果-动画（animation）。 动画就是使元素从一种样式逐渐变化为另一种样式的效果。我们可以改变任意多的样式任意多的次数（很官方的回答）。 为了方便大家和我自己理解这个概念，我们可以想像一下准备拍电影的时候，我们需要一个电影名吧，需要设置电影的时间吧。而且拍电影就是一帧一帧，叫做关键帧。所以我们设置动画的时候要讲清楚电影名（animation-name），电影时长（animation-duration），电影啥时候开始（animation-delay），播放或者暂停（a.
20款前端特效动画及源码
qq_50594742的博客
12-21 6209
最近优化项目时看到一些实用的特效 感觉还不错 下面就分享给大家 代码量过长的我就不展示了 可以去在这里资源站源码部分预览下载。
CSS动画技术（css-animation）
最新发布
Zarathusa的博客
05-23 1305
CSS Transition是一种用于实现元素状态变化平滑过渡的CSS技术。它允许你在元素从一种状态到另一种状态的过渡中添加动画效果，例如改变颜色、大小、位置等属性。过渡属性：在transition属性中指定需要过渡的属性（如颜色、宽度、高度等）。持续时间：使用时间单位（秒或毫秒）定义过渡的持续时间，控制动画的速度。缓动函数：指定过渡效果的缓动函数，它定义了动画过程中属性值的变化速度。过渡属性是你希望在元素状态变化时产生动画效果的CSS属性。这些属性定义了在过渡期间发生变化的元素属性。
css实现自动滚动效果
weixin_43410094的博客
06-02 3929
css实现自动无限滚动+悬浮停止滚动效果
分享几个可以学习css动画案例的网站～
山高路远·顶峰相见
03-07 402
CSS动画
CSS几种常见的文字动态效果
是个非常热爱生活、乐观、奋斗、努力的逗比青年
05-29 8225
不啰嗦了,酷酷的字体，希望能够帮助到那个你！
纯css动画效果
09-06
本文将深入探讨“纯css动画效果”这一主题，讲解如何利用CSS3来创建如图片缩放、移动、文字变形、平衡和旋转等视觉效果。 首先，我们来了解CSS3的核心特性——动画（Animations）。CSS3动画是通过关键帧（Keyframes...
纯css动画效果520表白信封
05-20
资源基于博主https://blog.csdn.net/weixin_44009656?type=blog的文章内容修改，感谢博主提供的优质资源，我上传的版本修复了页面初始化的时候信封触发关闭动画的问题。
css-animation-effect:CSS动画效果
03-20
CSS动画效果是CSS3引入的一个强大特性，它允许开发者创建动态、交互式和富有表现力的用户体验，而无需依赖JavaScript或者其他外部库。在本篇文章中，我们将深入探讨CSS动画效果，包括其基本概念、语法、关键帧动画、...
css3动画效果
12-13
通过简单的配置，Wow.js可以与Animate.css等CSS动画库配合，轻松添加“哇”效果，当用户滚动页面时，元素会突然出现或者以特定方式进入视线。 5. **CSS3动画在网站中的应用** CSS3动画广泛应用于网页加载指示器、...
css有哪些动画效果怎么实现的
luoxiaonuan_hi的博客
07-06 3633
css实现动画主要有三种方式： transition实现渐变动画 transform转变动画 animation实现自定义动画 1. 语法: 1. transition: 属性是个复合属性 。 2. transition: property duration timing-function delay 3. 默认值为: transition: all 0 ease 0; 2. 属性介绍: 1. transition-property: 规定设置过渡效果的 css 属性.
CSS各种动画效果
qq_29606255的博客
08-01 626
CSS各种动画效果
鼠标在图片上移动，图片实现微动的效果
Christine
06-15 1659
wrapNode.find('.banner').on("mousemove",function(e) { var ax = -($(window).width()/2- e.pageX)/100; var ay = ($(window).height()/2- e.pageY)/50; $(this).find('.scene').a...
css3之动画
weixin_54443782的博客
07-21 265
ease-out规定缓慢结束的过渡效果，ease-in-out规定开始和结束较慢的过渡效果，如果这几个属性你都不想用，那么你也可以自己定义自己的值,使用cubic-bezier(n,n,n,n)允许你在三次贝塞尔函数中定义自己的值。需要先给动画定义一个样式和名字，使用@keyframes动画名称{from{开始时的样式}to{结束时的样式}}，在这里面定义动画的样式，如果需要用动画，那么就要在要是有动画的地方写上animation-name动画名称；reverse-动画以反方向播放；...
css动画（transition，translate，rotate，scale）
爱玩亚索的程序员
04-24 2185
序言 为什么会用css动画呢 通过CSS3过渡，我们可以在不使用 Flash 动画或 JavaScript 的情况下， 使元素从一种样式变换为另一种样式时为元素添加效果。 css动画可以做很多特效，特点就是体积小，与js相比不需要操作DOM，下面正式讲解下常用对的css的动画属性。 transition 规定应用过渡效果的属性名称 transition-property 属性值为 指定的css属性名称，默认值为 all 全部，none 没有 注：仅属性值为数值型或颜色的属性可以应用过渡效果，其他
CSS3（三）Animation 入门详解
热门推荐
CSDN前端知识共享
04-17 7万+
Animation 前言 好的前端工程师，会更注重用户的体验和交互。那么动画就是将我们的静态页面，变成具有灵动性，为我们的界面添加个性的一种方式。 下面是七喜的官方主页，它就是很好的富交互样例。鼠标移动到导航栏，就会播放多种动效，给用户一种酷炫的体验。我觉得用户体验，才是前端工程师更加关注的问题，而不是一味追求Javascript的编码技能。 七喜官方网站 A...
Html+css3动画效果
weixin_44540196的博客
01-18 1万+
Html+css3动画效果 开发工具与关键技术：DW 作者：彭春怡 撰写时间：2019/1/16 1.下面是通过html+css3完成的一个动画效果，“跳跳球”。实现的代码如图所示： Html代码： Css3 代码： 通过“@keyframes” 元素完成css3的动画效果。 下面便是代码实现的效果：...
整理css（三）动态效果样式
farmerXU的博客
04-11 551
方式一： html <figure> <h6 class="hr demo-hr"><span>标题水平线</span></h6> <div class="hr align-center demo-hr"><span>分隔水平线</span></div> </figure> css .hr { margin: 1em 0 1.5em 0; backg.
css动画效果 淡入
03-27
CSS动画效果可以通过使用CSS的`@keyframes`规则和`animation`属性来实现。淡入效果可以通过改变元素的透明度来实现。 以下是一个简单的CSS代码示例，展示了如何创建一个淡入动画效果： ```css @keyframes fadeIn {...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值