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日

相关文章

  • CSS数字列表实现方法

    下面就是详细讲解CSS数字列表实现方法的完整攻略。 什么是CSS数字列表 CSS数字列表（也叫CSS计数器）是指CSS中的一个功能，可以按照指定格式生成一系列连续的数字，并将这些数字与指定的HTML元素相连，用来实现元素的自动编号。 例如： 第一步 第二步 第三步 HTML代码为： <ol> <li>第一步</li> &l…

    css 2023年6月10日
    00

  • 关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦

    关于IE、Firefox、Opera页面呈现异同写脚本很痛苦，主要原因是不同浏览器的页面呈现方式存在差异，导致相同的HTML、CSS代码在不同浏览器下呈现效果不同，导致需要编写兼容性代码。以下是详细攻略： 1. 熟悉各浏览器的特点 了解每个浏览器的特性，可以使我们更好地编写兼容性代码。 Internet Explorer Internet Explorer（…

    css 2023年6月10日
    00

  • 利用纯css实现table固定列与表头中间横向滚动的思路和实例

    下面我来详细讲解“利用纯CSS实现table固定列与表头中间横向滚动”的思路和实现步骤。 思路 要实现表头和固定列的横向滚动，需要将表格分为三部分：左侧固定列、中间表头、右侧内容。而为了保证左侧固定列的位置不会改变，需要给该列添加固定的宽度。 在滚动时，需要通过对表头和右侧内容的scroll事件进行监听，来同步滚动位置，保证左侧固定列的位置不变。 实现步骤 …

    css 2023年6月10日
    00

  • CSS网页制作教程:浏览器与CSS选择器对应表

    CSS网页制作教程：浏览器与CSS选择器对应表是一篇介绍CSS选择器以及它们在不同浏览器中对应效果的文章。这篇文章主要目的是帮助用户了解CSS选择器，并且对于每个选择器列出了它们在各个浏览器中的表现。 以下是攻略： 概述 选择器能够帮助我们在页面中选择特定的HTML元素来对它们应用CSS样式。这篇文章会介绍常见的选择器，以及它们在不同浏览器中的效果。 ID选…

    css 2023年6月9日
    00

  • 浅谈pc和移动端的响应式的使用

    下面是关于“浅谈PC和移动端响应式的使用”的完整攻略。 什么是响应式设计？ 响应式设计是一种设计方法，它能够使网站在不同的设备上展现不同的样式和布局。这种方法可以通过媒体查询、弹性网格布局和图片自适应等方式实现。 响应式设计的原理 响应式设计基于媒体查询，能够让网站在不同的设备上自动适应不同的样式。 媒体查询是CSS3的一个新功能，它根据不同的设备分别应用不…

    css 2023年6月10日
    00

  • 详解CSS中的z-index属性在层叠布局中的用法

    当我们在网页中使用CSS来进行页面布局时，经常会遇到重叠的部分，这时就需要使用CSS中的层叠布局来控制各元素的显示层次。z-index就是控制层叠顺序的一个重要属性，本文将详解CSS中的z-index属性在层叠布局中的使用方法。 什么是z-index z-index是CSS中一个用来控制层叠顺序的属性，它决定了一个元素在重叠的情况下被显示在其他元素上方还是下…

    css 2023年6月10日
    00

  • 详解Angular2表单-模板驱动的表单(Template-Driven Forms)

    详解Angular2表单-模板驱动的表单(Template-Driven Forms) 在 Angular2 中，表单是一个常用的元素，我们经常通过表单来收集用户的数据。Angular2 提供了两种方式处理表单：模板驱动的表单和响应式表单。本文将详细讲解模板驱动的表单。 模板驱动的表单 模板驱动的表单使用模板来处理表单，这意味着我们在 HTML 中定义表单，…

    css 2023年6月9日
    00

  • CKEditor4配置与开发详细中文说明文档

    下面是关于“CKEditor4配置与开发详细中文说明文档”的完整攻略。 1. CKEditor简介 CKEditor是一款优秀的开源的在线 WYSIWYG HTML 编辑器。 CKEditor提供了非常丰富的功能，可以快速开发Web应用中的富文本编辑器，比如博客、论坛、邮件编辑等应用场景。 2. 安装与配置 2.1 下载与安装 下载CKEditor的最新版本…

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