CSS3 transition 实战Demo

最新推荐文章于 2023-01-02 21:27:42 发布

crper

最新推荐文章于 2023-01-02 21:27:42 发布

阅读量2.6k

点赞数 1

分类专栏：笔记-HTML4&amp;amp;5/CSS2.1&amp;amp;3 CSS3及HTML5折腾记文章标签： css3 css 实例 transition

本文链接：https://blog.csdn.net/crper/article/details/48289511

版权

CSS3及HTML5折腾记同时被 2 个专栏收录

23 篇文章 25 订阅

订阅专栏

笔记-HTML4&amp;5/CSS2.1&amp;3

4 篇文章 0 订阅

订阅专栏

基础理论

transition 有五个属性：
- property : 属性，可以指定哪个CSS属性进行过渡，也能使用all全部属性生效
- duration ：持续时间
- timing-function：过渡函数，有linear（匀速），ease-in（渐现）,ease-out（渐隐） ,ease-in-out（渐显渐隐）等。
- delay ：是延迟，就是开始执行前等待的时间

综合写法：transition: <property> <duration> <timing-function> <delay>

直接上例子，代码自己新建一个html保存，在主流的浏览器运行即可

LiveDemo

代码块

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>transition Demo</title>
		<style>
		/* transition: <property> <duration> <timing-function> <delay>;*/
			.demobox {
				position: relative;
				left: 25%;
				top:300px;
				border-style: solid;
				border-width: 1px;
				display: block;
				width: 100px;
				height: 100px;
				background-color: #56A892;
				-webkit-transition: all 1s ease-in-out .5s;
				        transition: all 1s ease-in-out .5s;
			}

			.demobox:hover {
				background-color: #fcc;
				width: 200px;
				height: 200px;
				border-radius: 10px;
				background-color: #2AA2E6;
				-webkit-transform: rotate(180deg) skew(-5deg,150deg) scale(.5);
				-ms-transform: rotate(180deg) skew(-5deg,150deg) scale(.5);
				transform: rotate(180deg) skew(-5deg,150deg) scale(.5);
			}

			.btn{
				width:200px;
				height:50px;
				box-shadow: 2px 2px 2px rgba(38,55,64,.9);
				-webkit-transition: all 2s ease-in-out ;
				        transition: all 2s ease-in-out ;
			}

			.btn:hover{
				color:#F5F5F5;
				font-size:bolder;
				background: linear-gradient(-45deg, #36C783, #2A9DC8 );
				box-shadow: 2px 2px 5px #ABABB4 inset;
				-webkit-transform: translateX(250px) translateY(100px) rotate(45deg);
				    -ms-transform: translateX(250px) translateY(100px) rotate(45deg);
				        transform: translateX(250px) translateY(100px) rotate(45deg);
			}
		</style>
	</head>
	<body>
		<p>盒子和按钮的多个属性一起动画.hover触发</p>
		<div class="demobox"></div>

		<button type="button" class="btn">啦啦啦德玛西亚</button>
	</body>
</html>