html+css实现会旋转且变大的静态照片墙

打酱油的Spiders?

2024-06-18 帮助1人

拿走一键三连哦

走过路过，不要错过...

简单地使用css动画实现一个当鼠标停在图片上时，图片会旋转且变大的一个效果的照片墙，效果图如下：

学新通

下面是源码，图片的大小和位置可按自己想法设置（图片可以在网上找到）

代码里有注释常用颜色表示方式和图片定位属性。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>莫兰特</title>
<style type="text/css">
body {
/* 常用颜色表示方式：
1、颜色的英文
2、16进制颜色
3、rgb三原色
*/
background: #FFC0CB;
}
#box {
width: 1070px;
height: 480px;
/* 上下60px,左右居中 */
margin: 200px auto;
/* border: 1px solid #000000; */
}
.pic {
width: 150px;
margin: 10px 20px;
padding: 10px;
/* rgba(0~255，0~255，0~255，透明度（0~1）) */
box-shadow: 5px 5px 3px rgba(50, 50, 50, 0.4);
background-color: white;
transition: all 1s;
/* 定位属性 */
position: relative;
}
.pic1 {
transform: rotate(-20deg);
}
.pic2 {
transform: rotate(10deg);
}
.pic3 {
transform: rotate(-5deg);
}
.pic4 {
transform: rotate(5deg);
}
.pic5 {
transform: rotate(-10deg);
}
.pic6 {
transform: rotate(5deg);
}
.pic7 {
transform: rotate(-10deg);
}
.pic8 {
transform: rotate(10deg);
}
.pic9 {
transform: rotate(-5deg);
}
.pic:hover{
transform: rotate(1100deg) scale(1.5);
/* 保证图片在最上层,该属性作用的对象，要有定位属性才能生效 */
z-index: 99;
box-shadow: 5px 5px 3px rgba(50, 50, 50,1);
}
</style>
</head>
<body>
<div id="box">
<img class="pic pic1" src="../img/picwall/1.jpg">
<img class="pic pic2" src="../img/picwall/2.jpg">
<img class="pic pic3" src="../img/picwall/3.jpg">
<img class="pic pic4" src="../img/picwall/4.jpg">
<img class="pic pic5" src="../img/picwall/5.jpg">
<img class="pic pic6" src="../img/picwall/6.jpg">
<img class="pic pic7" src="../img/picwall/7.jpg">
<img class="pic pic8" src="../img/picwall/8.jpg">
<img class="pic pic9" src="../img/picwall/9.jpg">
</div>
</body>
</html>

记得点赞关注评论哦，爱你

这篇好文章是转载于：学新通技术网

html+css实现会旋转且变大的静态照片墙

photoshop保存的图片太大微信发不了怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

《学习通》视频自动暂停处理方法

Android 11 保存文件到外部存储，并分享文件

TikTok加速器哪个好免费的TK加速器推荐

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

微信运动停用后别人还能看到步数吗