网站动画 css transition 应用场景

随心点儿

于 2022-10-20 18:33:04 发布

阅读量533

点赞数 1

分类专栏：前端文章标签： css3 transition

本文链接：https://blog.csdn.net/lifengshu1234/article/details/127430799

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-ms-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 10.5s ease-in-out;

说明：

指定参与的过渡属性：max-height （搭配伪类用的比较多，比如hover、focus，但是也常会用到javascript、@madia触发）默认 all

过度时间：0.5s

过渡延迟时间默认 0s transition-delay过渡效果何时开始（延迟时间）

过渡动画类型 ease-in-out

其他过度类型：（linear：线性过渡。ease：平滑过渡。ease-in：逐渐加速。ease-out：逐渐减速。ease-in-out：先加速后减速。）

hover的动画效果应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="view"></div>
	</body>
	<style type="text/css">
		.view{
			height: 100px;
			width: 100px;
			background:blue;
			transition:all 0.5s ease;
		}
		
		.view:hover{
			height: 200px;
			width: 200px;
			background:red;
		}
	</style>
</html>

@media 应用demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="main">
			
		</div>
	</body>
	<style type="text/css">
		html,body{
			height:100%;
		}
		.main{
			transition:all 1s ease-out;
			background: gray;
			border-radius: 8px;
		}
		@media only screen and (min-width: 1068px){
		    .main {
		        width: 400px;
		        height: 400px;
		    }
		}
		
		@media only screen  and (min-width: 268px) and (max-width: 1068px){
		    .main{
		    	width: 200px;
		    	height: 200px;
		    }
		}
	</style>
</html>

针对width 的动画效果demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="pi-counter-count">
			<p><i class="icon-link pi-icon-left"></i>专业的数据能力评价平台</p>
			<div class="pi-counter-progress" ></div>
		</div>
	</body>
	<style>
		.pi-counter-count{
			position: relative;
			width: 500px;
			height: 38px;
			line-height: 38px;
		    color: #ffffff;
		    background: #f5f8f8;
		    -webkit-box-shadow: inset 0 1px 0 rgb(0 0 0 / 3%);
		    -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.03);
		    box-shadow: inset 0 1px 0 rgb(0 0 0 / 3%);
		}
		
		.pi-counter-count p{
			z-index: 2;
			position: relative;
			margin-left: 4px;
		}
		
		.pi-counter-progress{
			width: 0px;
			background: #0dc0c0;
		    -webkit-box-shadow: 0 2px 15px rgb(0 170 179 / 40%);
		    -moz-box-shadow: 0 2px 15px rgba(0, 170, 179, 0.4);
		    box-shadow: 0 2px 15px rgb(0 170 179 / 40%);
		    
		    -webkit-transition-delay: 1s;
		    -moz-transition-delay: 1s;
		    -ms-transition-delay: 1s;
		    -o-transition-delay: 1s;
		    transition-delay: 1s;
		}

		}
		.pi-counter-progress:hover{
			background: #009ca8;
		    -webkit-box-shadow: 0 2px 15px rgb(0 142 168 / 40%);
		    -moz-box-shadow: 0 2px 15px rgba(0, 142, 168, 0.4);
		    box-shadow: 0 2px 15px rgb(0 142 168 / 40%);
		}
		.pi-counter-count:hover .pi-counter-progress{
			width: calc(100% - 20px);
		}
		.pi-counter-count .pi-counter-progress{
			
			display: block;
		    content: "";
		    position: absolute;
		    top: 0;
		    left: 0;
		    bottom: 0;
		    z-index: 1;
		    -webkit-border-radius: 3px;
		    -moz-border-radius: 3px;
		    border-radius: 3px;
		    -webkit-transition: width 2s cubic-bezier(0.8, 0, 0.1, 1);
		    -moz-transition: width 2s cubic-bezier(0.8, 0, 0.1, 1);
		    -ms-transition: width 2s cubic-bezier(0.8, 0, 0.1, 1);
		    -o-transition: width 2s cubic-bezier(0.8, 0, 0.1, 1);
		    transition: width 2s cubic-bezier(0.8, 0, 0.1, 1);
		}
	</style>
</html>

默认显示条