让我来为您详细讲解一下“JS+CSS3实现超炫的散列画廊特效”的完整攻略。
一、项目背景
散列画廊特效是一种非常流行的网页动效，可以增强用户对网站内容的关注度，提升用户体验。
二、实现思路
该特效的实现主要分为三个部分：
- 利用CSS3的transform属性对图片进行平移和旋转；
- 利用JavaScript实现图片的散列排列和鼠标悬浮时的效果变化；
- 利用CSS3的transition属性实现平滑的过渡效果。
三、示例说明
示例1
下面为一个简单的案例展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>散列画廊特效示例</title>
<style>
/* 基本样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #252525;
}
.container {
width: 1000px;
margin: 50px auto;
display: flex;
flex-wrap: wrap;
}
.box {
width: 200px;
height: 200px;
overflow: hidden;
transition: transform 0.5s, box-shadow 0.5s;
}
.box img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
transition: transform 0.5s;
}
.box:hover {
transform: scale(1.1);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
/* JS实现散列排列 */
.box.short {
height: 100px;
}
.box.landscape {
width: 400px;
}
.box.portrait {
width: 100px;
}
.box.tall {
height: 400px;
}
.container.js {
align-items: flex-start;
}
.container.js .box {
position: absolute;
}
</style>
</head>
<body>
<div class="container">
<div class="box short"><img src="https://picsum.photos/id/1/400/300" alt=""></div>
<div class="box landscape"><img src="https://picsum.photos/id/2/400/300" alt=""></div>
<div class="box"><img src="https://picsum.photos/id/3/400/400" alt=""></div>
<div class="box short"><img src="https://picsum.photos/id/4/400/300" alt=""></div>
<div class="box tall"><img src="https://picsum.photos/id/5/300/400" alt=""></div>
<div class="box portrait"><img src="https://picsum.photos/id/6/300/400" alt=""></div>
<div class="box landscape"><img src="https://picsum.photos/id/7/400/300" alt=""></div>
<div class="box"><img src="https://picsum.photos/id/8/400/400" alt=""></div>
<div class="box short"><img src="https://picsum.photos/id/9/400/300" alt=""></div>
</div>
<script>
var container = document.querySelector('.container.js');
var boxes = container.querySelectorAll('.box');
// 重新排序盒子
function reArrange() {
// 获取盒子的宽度和高度
var width = boxes[0].offsetWidth;
var height = boxes[0].offsetHeight;
// 获取窗口的宽度和高度
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
// 计算需要多少列
var cols = Math.floor(windowWidth / width);
// 列的位置存储在数组中
var colY = [];
for (var i = 0; i < cols; i++) {
colY[i] = 0;
}
// 遍历所有盒子
boxes.forEach(function(box) {
// 获取盒子的新位置
var newTop = Math.min.apply(null, colY);
var newLeft = colY.indexOf(newTop) * width;
// 更新盒子的位置
box.style.top = newTop + 'px';
box.style.left = newLeft + 'px';
// 保存列的高度
colY[colY.indexOf(newTop)] += height + 10;
})
}
// 页面加载完成和窗口大小发生变化时重新排序盒子
window.onload = reArrange;
window.onresize = reArrange;
</script>
</body>
</html>
通过创建一个容器和一些盒子来模拟散列排列的画廊效果，可以看到每个盒子通过 CSS3 的“transform”属性实现了平移和旋转之后，在鼠标悬浮时也产生了效果变化。并且通过 JavaScript 在窗口加载完成和窗口大小发生变化时重新排序盒子，实现的效果更加精细。
示例2
下面我们来看一下更加炫酷的一个案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>散列画廊特效示例</title>
<style>
/* 基本样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
}
.container {
width: 80%;
margin: 50px auto;
perspective: 1000px;
}
.box-wrapper {
position: relative;
display: flex;
flex-wrap: wrap;
transform-style: preserve-3d;
transition: transform 0.5s;
}
.box {
width: 200px;
height: 200px;
margin: 10px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
transition: transform 0.5s;
text-align: center;
}
.box img {
width: 100%;
height: 100%;
transform: translateZ(100px);
backface-visibility: hidden;
}
.box-front {
position: relative;
transform: translateZ(-1px);
}
.box-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateZ(-100px) rotateY(180deg);
}
.box-wrapper.hover .box {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="container">
<div class="box-wrapper">
<div class="box">
<div class="box-front"><img src="https://picsum.photos/id/1/400/300" alt=""></div>
<div class="box-back">BACK</div>
</div>
<div class="box">
<div class="box-front"><img src="https://picsum.photos/id/2/400/300" alt=""></div>
<div class="box-back">BACK</div>
</div>
<div class="box">
<div class="box-front"><img src="https://picsum.photos/id/3/400/300" alt=""></div>
<div class="box-back">BACK</div>
</div>
<div class="box">
<div class="box-front"><img src="https://picsum.photos/id/4/400/300" alt=""></div>
<div class="box-back">BACK</div>
</div>
<div class="box">
<div class="box-front"><img src="https://picsum.photos/id/5/400/300" alt=""></div>
<div class="box-back">BACK</div>
</div>
<div class="box">
<div class="box-front"><img src="https://picsum.photos/id/6/400/300" alt=""></div>
<div class="box-back">BACK</div>
</div>
<div class="box">
<div class="box-front"><img src="https://picsum.photos/id/7/400/300" alt=""></div>
<div class="box-back">BACK</div>
</div>
<div class="box">
<div class="box-front"><img src="https://picsum.photos/id/8/400/300" alt=""></div>
<div class="box-back">BACK</div>
</div>
<div class="box">
<div class="box-front"><img src="https://picsum.photos/id/9/400/300" alt=""></div>
<div class="box-back">BACK</div>
</div>
</div>
</div>
<script>
var boxWrapper = document.querySelector('.box-wrapper');
boxWrapper.addEventListener('mouseover', function() {
this.classList.add('hover');
});
boxWrapper.addEventListener('mouseout', function() {
this.classList.remove('hover');
});
</script>
</body>
</html>
通过创建一个容器和多个盒子来模拟一个 3D 效果的散列画廊，可以看到每个盒子都可以通过鼠标悬停时翻转显示正反两面。并且通过 CSS3 的 transition 属性和 JavaScript 中监听事件来实现动效的过渡效果。
通过以上两个示例，相信您已经对“JS+CSS3实现超炫的散列画廊特效”的产生有了更加详细的了解。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS+CSS3实现超炫的散列画廊特效 - Python技术站
微信扫一扫 
支付宝扫一扫 