transition属性的学习与使用

最新推荐文章于 2022-03-01 18:06:57 发布

weixin_34417814

最新推荐文章于 2022-03-01 18:06:57 发布

阅读量309

点赞数

原文链接：https://my.oschina.net/eager/blog/704827

版权

为什么80%的码农都做不了架构师？>>>

因为临近期末，总有太多事情需要处理，间隔了好长时间没有更新博客，你们懂的~~~~

最近实训，接触了下H5，发现还挺好玩的，在此与大家分享一下~~~~

话不多说，直接上例子，对于某些属性，例子中有注释！

例子1：(由于只是小例子，就没有将css属性专门提出来，请见谅！)

<!DOCTYPE html>
<!--过渡(transition)-->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.demo1 {
				top: 200px;
				width: 100px;
				height: 100px;
				background-color: cyan;
			}
			.demo1:hover {
				/*translateX水平向右移动*/
				/*rotate旋转360度*/
				/*transform中的scale放大会无视挤压, 不是宽高的真正放大*/
				transform: translateX(100px) rotate(360deg) scale(2);
				/*Chrome和Safari浏览器适配*/
				-webkit-transform: translateX(100px) rotate(360deg) scale(2);
				/*fixfox*/
				-moz-transform: translateX(100px) rotate(360deg) scale(2);
				/*IE*/
				-ms-transform: translateX(100px) rotate(360deg) scale(2);
				
				/*transition是设置缓慢过渡的,all指的是所有属性都赋予过渡效果,
				过渡时间延续1s,ease表示过渡类型是平滑过渡*/
				transition: all 1s;
				-webkit-transition: all 1s;
				-moz-transition: all 1s;
				-ms-transition: all 1s;
				
				/*阴影*/
				/*横线10px 纵向10px 毛边5px*/
				box-shadow: 10px 10px 5px black;
				-webkit-box-shadow: 10px 10px 5px black;
			}
		</style>
	</head>

	<body>
		<!--过渡:css样式之间的缓慢切换-->
		<div class="demo1"></div>
	</body>
</html>

效果就不截图了，大家可以复制运行看看效果。

例子2：

效果图如上，所以可以将其分为5个div，中间为按钮，四周为线。代码如下：

<!DOCTYPE html>
<!--按钮四周划线-->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background: black;
			}
			.box{
				width:200px;
				height: 50px;
				border:3px solid white;
				margin: 100px auto;
				position: relative;
			}
			.line{
				background-color: white;
				position: absolute;
				transition: all 0.5s;
			}
			.line2 p{
				color: white;
				font-size: 20px;
				font-weight: bolder;
				text-align: center;
				line-height: 50px;
			}
			.lineTop{
				width: 0;
				height: 3px;
				background: white;
				top: -3px;
				left:-200px;
			}
			.box:hover .lineTop{
				width: 200px;
				left: 0px;
				transition: all 1s;
				-webkit-transition: all 1s;
			}
			.lineBottom{
				width: 0;
				height: 3px;
				background: white;
				top:50px;
				right:-200px;
			}
			.box:hover .lineBottom{
				width: 200px;
				right: 0px;
				transition: all 1s;
				-webkit-transition: all 1s;
			}
			
			.lineLeft{
				width: 3px;
				height: 0;
				background: white;
				top:-50px;
				left: 200px;
			}
			.box:hover .lineLeft{
				height: 50px;
				top: 0px;
				transition: all 1s;
				-webkit-transition: all 1s;
			}
			.lineRight{
				width: 3px;
				height: 0;
				background: white;
				bottom:-50px;
				left: -3px;
			}
			.box:hover .lineRight{
				height: 50px;
				bottom: 0px;
				transition: all 1s;
				-webkit-transition: all 1s;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item">
				<div class="line  lineTop"></div>
				<div class="line  lineBottom"></div>
				<div class="line2">
					<p>游戏机</p>
				</div>
				<div class="line  lineLeft"></div>
				<div class="line  lineRight"></div>
			</div>
		</div>
	</body>
</html>

例子3：

相信照片墙大家都不陌生，如图所示：

鼠标滑过照片，照片旋转一定角度放大，实现效果图如下：

代码如下：

<!DOCTYPE html>
<!--照片墙-->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				background-color: linen;
			}
			/*只定义图片宽度或者高度就可以按比例缩小*/
			img{
				width: 200px;
				border: 4px solid lightyellow;
			}
			#img2, #img4{
				transform: rotate(10deg);
			}
			#img1, #img3{
				transform: rotate(-10deg);
			}
			#picture{
				width: 1000px;
				height: 400px;
				margin: 100px auto;
			}
			.demo1{
				position: relative;
				z-index: 4;
			}
			
			/*由于本人使用 的google浏览器所以就不写适配其他浏览器的了*/
			#picture .demo1 img:nth-child(1):hover,
			#picture .demo1 img:nth-child(3):hover{
				/*右移100px,旋转20度,放大1.5倍*/
				transform: translateX(50px) rotate(-20deg) scale(1.2);
				/*chrome和Safari浏览器适配*/
				-webkit-transform: translateX(50px) rotate(-20deg) scale(1.2);
				transition: all 1s;
				-webkit-transition: all 1s;
				position: relative;
				/*z-index越大出现在越上面*/
				z-index: 5;
				
				/*阴影*/
				/*横线5px 纵向5px 毛边2px*/
				box-shadow: 5px 5px 2px lightgray;
				-webkit-box-shadow: 5px 5px 2px lightgray;
			}
			
			#picture .demo1 img:nth-child(2):hover,
			#picture .demo1 img:nth-child(4):hover{
				/*右移100px,旋转20度,放大1.5倍*/
				transform: translateX(-30px) rotate(20deg) scale(1.2);
				/*chrome和Safari浏览器适配*/
				-webkit-transform: translateX(-30px) rotate(20deg) scale(1.2);
				transition: all 1s;
				-webkit-transition: all 1s;
				position: relative;
				/*z-index越大出现在越上面*/
				z-index: 5;
				
				/*阴影*/
				/*横线5px 纵向5px 毛边2px*/
				box-shadow: 5px 5px 2px lightgray;
				-webkit-box-shadow: 5px 5px 2px lightgray;
			}
		</style>
	</head>

	<body>
		<!--过渡:css样式之间的缓慢切换-->
		<div id="picture">
			<div class="demo1">
				<img id="img1" src="img/1.jpg"/>
				<img id="img2" src="img/2.jpg"/>
				<img id="img3" src="img/3.jpg"/>
				<img id="img4" src="img/4.jpg"/>
			</div>
		</div>
	</body>
</html>

例子4：

经常在商品展示的时候可以看到如图所示的展示方式：

鼠标移至某一商品上，该商品所占宽度会拉伸，图片也会随之放大，同时出现一些介绍话语之类。实现效果图如下：

代码如下：

<!DOCTYPE html>
<!--商品展示-->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.box {
				display: inline-block;
				border: 2px solid lightgray;
			}
			.box .item {
				width: 200px;
				height: 200px;
				float: left;
				background-color: lightyellow;
				border-right: 2px dashed lightgray;
				position: relative;
				transition: all 1s;
				-webkit-transition: all 1s;
			}
			.box .item:last-child {
				border-right: none;
			}
			/*第1个元素*/
			.box .item p:nth-child(1) {
				position: absolute;
				color: blue;
				top: 10px;
				left: 10px;
			}
			/*第2个元素*/
			.box .item p:nth-child(2) {
				position: absolute;
				color: red;
				top: 30px;
				left: 10px;
			}
			/*第3个元素*/
			.box .item p:nth-child(3) {
				position: absolute;
				color: green;
				top: 50px;
				left: 10px;
			}
			/*第4个元素*/
			.box .item p:nth-child(4) {
				position: absolute;
				color: palevioletred;
				top: 70px;
				left: 10px;
				/*透明度*/
				opacity: 0;
			}
			.box .item img {
				position: absolute;
				width: 50%;
				bottom: 0;
				right: 0;
				transition: all 0.5s;
				-webkit-transition: all 0.5s;
			}
			.box .item:hover {
				width: 300px;
				background-color: white;
			}
			.box .item:hover img {
				width: 70%;
			}
			.box .item p {
				transition: all 0.5s;
				-webkit-transition: all 0.5s;
			}
			.box .item:hover p:nth-child(4) {
				opacity: 1;
				top: 150px;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="item">
				<p>时装团</p>
				<p>节日礼品</p>
				<p>一折起</p>
				<p>全场甩卖</p>
				<img src="img/1.png" />
			</div>
			<div class="item">
				<p>时装团</p>
				<p>节日礼品</p>
				<p>一折起</p>
				<p>全场甩卖</p>
				<img src="img/1.png" />
			</div>
			<div class="item">
				<p>时装团</p>
				<p>节日礼品</p>
				<p>一折起</p>
				<p>全场甩卖</p>
				<img src="img/1.png" />
			</div>
		</div>
	</body>
</html>

其中所有代码需要的图片，你们可以找其他图片代替，看看运行效果。

写在最后：若有错误，望指正。

写给自己：不能因为自己忙，而放弃学习，慢慢积累的过程才最重要。

转载于:https://my.oschina.net/eager/blog/704827