过渡与变形的综合应用

最新推荐文章于 2020-06-25 22:14:27 发布

溪栎

最新推荐文章于 2020-06-25 22:14:27 发布

阅读量199

点赞数

本文链接：https://blog.csdn.net/whyshuaige/article/details/105118266

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				background-color: black;//将背景的颜色设为黑色
			}
			//使图片在一排
			.boss div{
				float: left;
				margin: 100px;
			}
			//设置一个盒子，将图片平铺在盒子里并添加转场属性
			.one{
				width: 150px;
				height: 150px;
				border:2px solid white;
				padding: 10px;
				border-radius: 10px;
				background-image: url(one.jpg);
				background-size: cover;
				transition: all 2s;
			}
			
			.tow{
				width: 150px;
				height: 150px;
				border:2px solid white;
				padding: 10px;
				border-radius: 10px;
				background-image: url(tow.jpg);
				background-size: cover;
				transition: all 2s;
			}
			
			.three{
				width: 150px;
				height: 150px;
				border:2px solid white;
				padding: 10px;
				border-radius: 10px;
				background-image: url(three.jpg);
				background-size: cover;
				transition: all 2s;
			}
			
			.four{
				width: 150px;
				height: 150px;
				border:2px solid white;
				padding: 10px;
				border-radius: 10px;
				background-image: url(four.jpg);
				background-size: cover;
				transition: all 2s;
			}
			//转场后的样式（鼠标停放在图片上是实现转场）
			div:hover.one{
				border-radius: 50%;//直角边框过渡为圆角边框
			}
			div:hover.tow{
				transform: scale(1.4);//图片放大为1.4倍			
				}			
			div:hover.three{
				transform: rotate(30deg);//图片旋转30度
			}
			div:hover.four{
				opacity:0.5;//图片透明度变暗
			}
		</style>
	</head>
	<body>
		<div class="boss">
		<div class="one"></div>
		<div class="tow"></div>
		<div class="three"></div>
		<div class="four"></div>
		</div>
	</body>
</html>

溪栎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
过渡与变形的综合应用

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> body{ background-color: black;//将背景的颜色设为黑色 } //使图片在一排 .bos...
复制链接

扫一扫