使用CSS制作图片相框以及图片放大旋转效果

最新推荐文章于 2025-01-15 08:00:33 发布

ConStanying

最新推荐文章于 2025-01-15 08:00:33 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： HTML5 CSS 相框图片边框图片旋转

本文链接：https://blog.youkuaiyun.com/ConStanying/article/details/90409674

本文介绍如何利用CSS技术为图片添加精美相框，并实现点击图片后图片放大并旋转的效果。通过实例代码展示具体实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最终效果如图

最终实现效果如图

代码如下：

<html>
	<head>
		<meta charset="utf-8" />
		<title>照片</title>
		<style >
			#box{
				width: 1100px;
				height: 650px;
				
				margin: 100px auto;
				
				
			}
			img{
				
				/*相框*/
               border: 6px solid white;
            box-shadow: 1px 1px 5px #333333;
			}
			
			img:hover{
			/*鼠标悬浮事件*/
				transition: 1s;
				transform: rotate(360deg) scale(1.5);
				
			}
			
			
		</style>
	</head>
	<body>
		
		<div id="box">
			<img src="照片/img/photo01.jpg" alt="" />
			<img src="照片/img/photo02.jpg" alt="" />
			<img src="照片/img/photo03.jpg" alt="" />
			<img src="照片/img/photo04.jpg" alt="" />
			<img src="照片/img/photo05.jpg" alt="" />
			<img src="照片/img/photo06.jpg" alt="" />
			<img src="照片/img/photo07.jpg" alt="" />
			<i