初学HTML——过渡与变形综合应用

最新推荐文章于 2023-11-07 00:15:00 发布

lxl。。

最新推荐文章于 2023-11-07 00:15:00 发布

阅读量1k

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/lxl513513/article/details/105122870

版权

HTML5 专栏收录该内容

18 篇文章 4 订阅

订阅专栏

一.基本要求

1.当鼠标移上第一张图像时，产生直角边框过渡为圆角边框

2.当鼠标移上第二张图像时，产生图片逐渐放大的过渡效果

3.当鼠标移上第三张图像时，产生图片旋转的过渡效果

4.当鼠标移上第四张图像时，产生图片透明度逐渐变暗

5.当鼠标移上四张图像的任一图像时，都伴随着盒子阴影效果

二.代码部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
       #one{
       	width: 1225px;
       	height: 350px;
       	background-color: black;
       }
      
       div[id^=photo]{
       		width: 210px;
       		height: 210px;
			overflow: hidden;
       		border:7px solid white;
       		border-radius: 7px;
       		position:absolute;
			top: 80px;
       }
       div[id^=word]{
       		color: white;
       		font-weight: bold;
       		margin-top: 50px;
       		width: 210px;
			text-shadow: 2px 0px 2px beige;
       		text-align: center;
       		position: absolute;
			top:-10px;
       }
       #word1,#photo1{
       		left: 70px;
       	}
       #word2,#photo2{ 
		   left: 350px;
	   }
       #word3,#photo3{ 
		   left: 630px;
	   }
        #word4,#photo4{	
			left: 910px;
		}
	   #photo1:hover{
		   border-radius: 100%;
		   transition: all 2s ease-in-out;
		   box-shadow: gray 7px 4px 10px;
	   }
	   #two:hover{
			   transform-origin: left;
			   transform: scale(2); 
	   		   transition: all 1s ease-in-out;
	   }
	   #photo3:hover{
	   		   transform: rotate(15deg);
	   		   transition: all 2s ease-in-out;
	   }
	   #photo4:hover{
	   		   filter: grayscale(100%);
	   		   transition: all 2s ease-in-out;
	   }
	   #photo1:hover,#photo2:hover,#photo3:hover,#photo4:hover{
	   		   box-shadow: gray 7px 7px 10px;
			   }
    </style>
</head>
<body>
	<div id="one">
		<div id="word1">SHAPE</div>
		<div id="photo1"><img src="1.png" ></div>
		<div id="word2">DISPLACEMENT</div>
		<div id="photo2"><img src="2.png" id="two"></div>
		<div id="word3">PSOITION</div>
		<div id="photo3"><img src="3.png" ></div>
		<div id="word4">COLOR</div>
		<div id="photo4"><img src="4.png" ></div>
	</div>
</body>
</html>

三.显示效果

1.未点击时：

在这里插入图片描述

2.鼠标停留在第一张图片时

在这里插入图片描述

3.鼠标停留在第二张图片时

在这里插入图片描述

4.鼠标停留在第三张图片时

在这里插入图片描述

5.鼠标停留在第四张图片时

在这里插入图片描述

lxl。。

关注

0
点赞
踩
14

收藏

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

一.基本要求1.当鼠标移上第一张图像时，产生直角边框过渡为圆角边框2.当鼠标移上第二张图像时，产生图片逐渐放大的过渡效果3.当鼠标移上第三张图像时，产生图片旋转的过渡效果4.当鼠标移上第四张图像时，产生图片透明度逐渐变暗5.当鼠标移上四张图像的任一图像时，都伴随着盒子阴影效果二.代码部分<!DOCTYPE html><html><head> ...
复制链接

扫一扫