animation、transition、transform、filter各一个示例

最新推荐文章于 2024-02-26 10:27:44 发布

ylnzzl

最新推荐文章于 2024-02-26 10:27:44 发布

阅读量249

点赞数

分类专栏：前端开发网站开发文章标签： css css3 html

本文链接：https://blog.csdn.net/ylnzzl/article/details/124505753

版权

网站开发同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

前端开发

30 篇文章 0 订阅

订阅专栏

公共代码

demo.html

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Knote</title>
		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
		<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
		<!--[if lt IE 9]>
		  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
		  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
		<![endif]-->

		<link type="text/css" rel="stylesheet" href="./css/common.css" />
		<style type="text/css">

		</style>

	</head>
	<body>

	</body>
	<script type="text/javascript">
	</script>
</html>

css/common.css

html,
body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background: #fff;
	color: #000;

}

.wrapper {
	width: 100%;
	margin-bottom: 50px;
}


.clearfix:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

h1,
h2,
h3,
h4{
	text-align: center;
	margin:5px 0;
	padding:0;
}

h1{
	font-size: 32px;
}
h2{
	font-size: 26px;
}
h3{
	font-size: 20px;
}
h4{
	font-size: 14px;
}

animation

反复左右旋转、大小变化、透明度变化的方块

<h1>CSS3 动画效果</h1>
<div class="wrapper clearfix">
	<h2>语法效果展示</h2>
	<h3>反复左右旋转、大小变化、透明度变化的方块</h3>
	<style type="text/css">
		
		@keyframes effect1{
			0%{
				opacity: 0.1;
				left:0;
				transform: rotate(0) scale(1);
			}
			
			50%{
				opacity: 0.5;
				left:calc(50% - 25px);
				transform: rotate(180deg) scale(0.5);
			}
			100%{
				opacity: 1;
				left:calc(100% - 100px);
				transform: rotate(360deg) scale(1);
			}
		}
		.animation1{
			width:1000px;
			height:100px;
			position: relative;
			margin:20px auto;
			padding:20px 0;
		}
		.animation1 .box1{
			width:100px;
			height:100px;
			position: absolute;
			background-color: #3eb370;
			animation:effect1 3s infinite alternate;
		}
		
	</style>
	<div class="animation1 clearfix">
		<div class="box1"></div>
	</div>
</div>

transition

旋转变大、透明变色的方块消失后出现文本

<h1>CSS3 过渡效果</h1>
<div class="wrapper clearfix">
	<h2>语法效果展示</h2>
	<h3>旋转变大、透明变色的方块消失后出现文本</h3>
	<style type="text/css">
		.transition1{
			width:1000px;
			height:500px;
			position: relative;
			margin:20px auto;
			padding:20px 0;
			display: flex;
		}
		.transition1 .box1{
			width:300px;
			height:300px;
			position: relative;
			margin:100px auto;
			transition:all 1.2s;
			background-color: crimson;
			opacity: 0.9;
		}
		.transition1 .box1 p{
			width:100%;
			text-align: center;
			color:#666;
			font-size:16px;
			opacity: 0;
			transition:all 1s cubic-bezier(.61,0,.99,.03) 0.26s;
			line-height:50px;
			margin-top:125px;
		}
		.transition1 .box1:hover{
			transform:rotate(360deg) scale(1.6);
			background-color: rgba(167,168,189,0);
		}
		.transition1 .box1:hover p{
			font-size: 36px;
			opacity: 1;
			color:#ed5a65;
		}
	</style>
	<div class="transition1 clearfix">
		<div class="box1">
			<p>展示的文本信息</p>
		</div>
	</div>
</div>

transform

扭曲效果

<h1>CSS3 变换效果</h1>
<div class="wrapper clearfix">
	<h2>语法效果展示</h2>
	<h3>扭曲（skew）</h3>
	<style type="text/css">
		.transform4{
			width:1000px;
			height:100px;
			position: relative;
			margin:20px auto;
			padding:20px 0;
			display: flex;
		}
		.transform4 .box1,.transform4 .box2,.transform4 .box3,.transform4 .box4{
			flex:1;
			border:2px solid salmon;
			margin:20px;
		}
		.transform4 p{
			border:2px solid slateblue;
		}
		.transform4 .box1 p{
			transform:skewX(30deg);
		}
		.transform4 .box2 p{
			transform:skewY(30deg);
		}
		.transform4 .box3 p{
			transform:skewX(30deg) skewY(30deg);
		}
		.transform4 .box4 p{
			transform:skew(30deg,30deg);
		}
	</style>
	<div class="transform4 clearfix">
		<div class="box1">
			<p>skewX(30deg)</p>
		</div>
		<div class="box2">
			<p>skewY(30deg)</p>
		</div>
		<div class="box3">
			<p>skewX(30deg) skewY(30deg)</p>
		</div>
		<div class="box4">
			<p>skew(30deg,30deg)</p>
		</div>
	</div>
</div>

filter

逐渐清晰的文本

<h1>CSS3 滤镜效果</h1>
<div class="wrapper clearfix">
	<h2>语法效果展示</h2>
	<h3>逐渐清晰的文本</h3>
	<style type="text/css">
		@keyframes clearText{
			0% {
				filter:blur(3px) opacity(0.6);
			}
			100% {
				filter:blur(0) opacity(1);
			}
		}
		.filter1 p{
			width:100%;
			text-align: center;
			animation:clearText 2s;
		}
	</style>
	<div class="filter1 clearfix">
		<p>测试文本测试文本。</p>
	</div>
</div>

ylnzzl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
animation、transition、transform、filter各一个示例

目录公共代码demo.htmlcss/common.cssanimation反复左右旋转、大小变化、透明度变化的方块transition旋转变大、透明变色的方块消失后出现文本transform扭曲效果filter逐渐清晰的文本公共代码demo.html<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <
复制链接

扫一扫