1. Python技术站首页
  2. css

JS+CSS3实现超炫的散列画廊特效

• css

让我来为您详细讲解一下“JS+CSS3实现超炫的散列画廊特效”的完整攻略。

一、项目背景

散列画廊特效是一种非常流行的网页动效，可以增强用户对网站内容的关注度，提升用户体验。

二、实现思路

该特效的实现主要分为三个部分：

  1. 利用CSS3的transform属性对图片进行平移和旋转；
  2. 利用JavaScript实现图片的散列排列和鼠标悬浮时的效果变化；
  3. 利用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技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • 利用class、id对元素进行分类、标识实例

    当我们在编写HTML文档时，需要将文档中的每个元素进行分类和标识，以便后续的CSS和JavaScript代码可以方便地针对它们进行样式和行为的控制。而在HTML中，我们可以使用class和id属性来对元素进行分类和标识。 利用class属性对元素进行分类 class属性可以为元素定义一个或多个类名，这些类名用空格分隔。一个元素可以同时拥有多个类名，这些类名可…

    css 2023年6月10日
    00

  • JavaScript实现下拉列表

    请看下面的文章，我将为您讲解如何使用JavaScript实现下拉列表的完整攻略。 1. 什么是下拉列表 下拉列表也被称为“下拉菜单”，它通常是在网页中展示多个选项的最佳方式之一。下拉列表最常见的用途是在网页中显示选项供用户选择，一旦用户选择其中一个选项，选择就会被自动填充到输入框或文本框中。 2. 实现下拉列表的步骤 2.1. 创建HTML结构 创建下拉列表…

    css 2023年6月10日
    00

  • jquery 中多条件选择器,相对选择器,层次选择器的区别

    下面我来详细讲解 “jQuery 中多条件选择器、相对选择器、层次选择器的区别”。 1. 多条件选择器 多条件选择器可以根据多个条件来选择目标元素，使用逗号（,）分隔不同的条件。多条件选择器中，每个条件都可以使用任意一种选择器。 示例： <!– HTML 结构 –> <div> <p class="sample&q…

    css 2023年6月9日
    00

  • 简单明了带你了解CSS Modules

    简单明了带你了解CSS Modules CSS Modules是一种用于解决CSS全局作用域问题的技术。它可以将CSS样式文件中的类名和选择器进行局部作用域，避免了全局作用域带来的样式冲突问题。本攻略将详细讲解CSS Modules的原理、使用方法和示例。 CSS Modules的原理 CSS Modules的原理是通过在类名和选择器前添加哈希值，将它们进行…

    css 2023年5月18日
    00

  • 页面出现滚动条的时候如何让滚动条不影响页面宽度

    要让页面出现滚动条的时候不影响页面宽度，我们可以采用以下几种方法： 一、使用 overflow: hidden; 可以在需要限制宽度的容器上设置 overflow: hidden;。这样就能阻止滚动条的出现，同时保持页面的宽度不变。 .container { max-width: 1000px; overflow: hidden; } 二、使用 overfl…

    css 2023年6月10日
    00

  • Vue中使用Tailwind CSS的具体方法

    当我们使用Vue.js进行前端开发时，很多时候我们需要使用CSS框架来提高开发效率并实现更漂亮的界面。而Tailwind CSS是一款基于Utility-First（以下简称UF）设计的CSS框架，可以让我们快速地构建HTML界面。本文将介绍如何在Vue项目中使用Tailwind CSS。 1. 安装Tailwind CSS 首先，我们需要在Vue项目中安装…

    css 2023年6月10日
    00

  • 第一篇初识bootstrap

    初识Bootstrap Bootstrap是Twitter公司开发的一个前端开发框架，具有响应式设计和易于使用的特点。本文介绍Bootstrap的初步使用。 安装 Bootstrap的最新版本可以从官方网站得到（https://getbootstrap.com/）。在下载页面中，可以选择下载完整的源代码或者只下载预编译的文件来使用。 如果你想在HTML页面中…

    css 2023年6月11日
    00

  • 一个css与js结合的下拉菜单支持主流浏览器

    实现一个下拉菜单可以使用CSS和JavaScript相结合的方法，同时支持主流浏览器的话，可以按以下步骤进行： 第一步：HTML 结构设计 首先，我们需要设计一下 HTML 结构，这里我们使用一个简单的无序列表的结构，每个子菜单项都是一个列表项 li，其中标题部分是一个带有子菜单的 a 标签，子菜单则将放置在一个 div 中： <ul class=&q…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部