CSS3旋转照片墙

已于 2022-07-18 10:37:22 修改
阅读量391 收藏 5
点赞数
分类专栏： 前端 文章标签： css3 javascript html
于 2021-08-14 22:13:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45906196/article/details/119706460
版权

效果

在这里插入图片描述

图片要求

小图125px125px
大图750px500px

代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>七夕快乐宝贝子~</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url(img/bg.jpg);
        }

        ul {
            list-style: none;
        }

        li {
            width: 125px;
            height: 125px;
            border: 5px solid #fff;
            position: absolute;
            left: -135px;
            top: -135px;
            /* 过渡  属性  执行时间  运动方式  延迟时间*/
            transition: all 2s ease;
        }

        li span {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: #f00;
            /* background: url(img/1.jpg) 0 0 no-repeat; */
            opacity: 0;
        }
        #next{
            width: 40px;
            height: 80px;
            background: #fff url(img/next.png) center center no-repeat;
            position: absolute;
            right:0;
            top:50%;
            /* 挪元素高度的一半 */
            /* 已知高度 */
            /* margin-top:-40px; */
            /* 未知高度 translateY负元素高度的一半 */
            transform:translateY(-50%);
            border-radius: 5px 0 0 5px;
            display: none;
        }
    </style>
</head>

<body>
    
    <ul>
        <li>
            <img src="img/thumbs/1.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/2.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/3.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/4.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/5.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/6.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/7.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/8.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/9.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/10.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/11.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/12.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/13.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/14.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/15.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/16.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/17.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/18.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/19.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/20.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/21.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/22.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/23.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="img/thumbs/24.jpg" alt="">
            <span></span>
        </li>
    </ul>
    <div id="next">
    </div>

    <script>

        // 1获取到所有li
        var aLi = document.getElementsByTagName('li');
        var nextBtn = document.getElementById('next');
        var liHeight = aLi[0].offsetHeight;
        var liWidth = aLi[0].offsetWidth;
        // 获取屏幕高度和宽度
        var screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
        var screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
        // 计算垂直方向空隙的值
        var spaceY = (screenHeight - 4 * liHeight) / 5;
        // 计算水平方向空隙的值
        var spaceX = (screenWidth - 6 * liWidth) / 7;
        // 合并后左边和上边的空隙值
        var spaceLeft = (screenWidth - 6 * 127) / 2;
        var spaceTop = (screenHeight - 4 * 127) / 2;
        // 记录打开ture|合并false的状态 
        var flag = true;
        // 记录当前显示图片的索引
        var iNow = 0;
        for (var i = 0; i < aLi.length; i++) {
            //根据索引推断所在行 Math.floor(i/6)+1
            // 0-5    1 
            // 6-11   2 
            // 12-17  3
            // 根据索引推断所在列
            // i%6 + 1  
            // 0 6 12 18   1
            // 1 7 13 19   2
            // 设置transiton延迟时间 0-23 

            aLi[i].style.transitionDelay = (23 - i) * 100 + "ms";
            aLi[i].row = Math.floor(i / 6) + 1;
            aLi[i].col = i % 6 + 1;
            // 给每一个li添加索引
            aLi[i].index = i;
            /*
                行    top
                1     1*spaceY
                2     2*spaceY + 1*liHeight
                3     3*spaceY + 2*liHeight
                n     n*spaceY + （n-1)*liHeight

                列    left
                1     1*spaceX
                2     2*spaceX + 1liWidth
                3     3*spaceX + 2liWidth
                n     n*spaceX + (n-1)liWidth
            */
            var row = aLi[i].row;
            var col = aLi[i].col;
            // 设置每个li的left top 和旋转角度
            aLi[i].style.top = row * spaceY + (row - 1) * liHeight + "px";
            aLi[i].style.left = col * spaceX + (col - 1) * liWidth + "px";
            aLi[i].style.transform = "rotate(" + (Math.random() * 40 - 20) + "deg)";
            // 点击事件 = 函数（*不是函数的调用）
            aLi[i].onclick = fn;
        }
        function fn() {
            if (flag) { //如果flag为true 那么当前是散开的状态 ->设置成合并操作
                // 将所有li合并
                for (var i = 0; i < aLi.length; i++) {
                    // 将所有li的延迟时间去掉
                    aLi[i].style.transitionDelay = "0ms";
                    // 合并 
                    // 修改元素的边框为1px
                    aLi[i].style.borderWidth = "1px";
                    aLi[i].style.left = spaceLeft + (aLi[i].col - 1) * 127 + "px";
                    aLi[i].style.top = spaceTop + (aLi[i].row - 1) * 127 + "px";
                    aLi[i].style.transform = "rotate(0deg)";
                    // 获取li中的span
                    var oSpan = aLi[i].getElementsByTagName('span')[0];
                    oSpan.style.opacity = 1;
                    // 如果点击的li的索引 this.index ->显示哪个大图 
                    var num = this.index + 1;
                    var left = -(aLi[i].col - 1) * 125;
                    var top = -(aLi[i].row - 1) * 125;
                    oSpan.style.background = "url(img/" + num + ".jpg) " + left + "px " + top + "px no-repeat";
                    // oSpan.style.background = "url(img/"+(this.index+1)+".jpg) "+(-(col-1)*125)+"px "+(-(row-1)*125)+"px no-repeat";
                }
                // 讲按钮显示
                nextBtn.style.display = "block";
                // 将当前显示图片的索引存在iNow
                iNow = this.index;
                console.log(iNow)
            } else {
                // 散开
                for (var i = 0; i < aLi.length; i++) {
                    // 设置每个li的left top 和旋转角度
                    aLi[i].style.top = aLi[i].row * spaceY + (aLi[i].row - 1) * liHeight + "px";
                    aLi[i].style.left = aLi[i].col * spaceX + (aLi[i].col - 1) * liWidth + "px";
                    aLi[i].style.transform = "rotate(" + (Math.random() * 40 - 20) + "deg)";
                    aLi[i].style.borderWidth = "5px";
                    var oSpan = aLi[i].getElementsByTagName('span')[0];
                    oSpan.style.opacity = "0";
                }
                nextBtn.style.display = "none";
            }
            flag = !flag;
        }

        // 按钮绑定点击事件
        nextBtn.onclick = function(){
            iNow++; //iNow记录索引 0-
            if(iNow == aLi.length){
                iNow = 0;
            }
            // console.log(iNow)
            for(var i=0; i<aLi.length; i++){
                var oSpan = aLi[i].getElementsByTagName('span')[0];
                oSpan.style.transitionDelay = Math.random()*500 +"ms";
                oSpan.style.backgroundImage ="url(img/"+(iNow+1)+".jpg)";
            }
        }

    </script>

</body>

</html>
二琳爱吃肉
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
16个实用的CSS样式之3D照片墙
Web_boom的博客
09-23 1490
到此为止一个简单的3D照片墙就做好啦，当然在常见的网站中不会这样去配色哈，还是要简约大气为主。但是学习阶段好看就完事了。如果觉得不错的话记得哈。整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享部分文档展示：文章篇幅有限，后面的内容就不一一展示了有需要的小伙伴，可以点下方卡片免费领取。
css动态照片墙.rar
09-01
这是一个动态的照片墙网页,可以修改照片连接替换成自己的照片 这是一个动态的照片墙网页,可以修改照片连接替换成自己的照片 这是一个动态的照片墙网页,可以修改照片连接替换成自己的照片
前端 CSS 3D 照片墙自动旋转案例（详细步骤）
卡尔特斯
12-26 1381
前端 CSS 3D 照片墙自动旋转案例（详细步骤），案例 DEMO 源码地址 ，仅供参考。
3D旋转照片墙的CSS
09-24
网页制作中3D旋转照片墙的CSS,搭配同名html代码可以呈现出，3D旋转的酷炫照片效果，照片可以自己设置
3D旋转照片墙
phrtre的博客
02-12 3290
&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta charset="utf-8" /&gt;        &lt;title&gt;photo&lt;/title&gt;    &lt;/head&gt;    &lt;style&gt;        #imgWrap{    
css 实现旋转照片墙自动旋转
twinkle的博客
05-10 2118
<style> * { margin: 0; padding: 0; } :root, html, body { height: 100%; width: 100%; } body { perspective: 3000px; transform-style: preserve-3d; } @keyframes img..
二维旋转照片墙的CSS
09-24
网页制作中二维旋转照片墙，呈现出来的效果是：可以旋转不容角度的多张照片，照片自己放进去，有模板
CSS3 中3D转换--旋转正方体，滚动照片墙的写法
D321xiaoding的博客
08-16 3622
首先给父元素加两个属性，把父元素变成3D空间。 (1)transform-style:preserve-3d; （观察的场所 3D空间） (2)perspective:1000px;（近大远小–景深prespective，元素距离观察点的距离也就是物体和眼睛的距离，通常在900-1200之间。） 然后利用3D转换的属性 transform &amp;lt;!DOCTYPE html&amp;gt...
纯css3实现照片墙效果
09-25
主要介绍了纯css3实现照片墙效果，鼠标悬浮时旋转放大并摆正，主要使用到的css3属性有：transition、transform（scale、rotateZ）、box-shadow以及z-index，推荐给小伙伴们
二维旋转照片墙的html
09-24
网页制作中二维旋转照片墙，搭配同名的CSS,呈现出来的效果是：可以旋转不容角度的多张照片，照片自己放进去，有模板
CSS3 transform制作漂亮的照片墙特效
12-13
一款利用css3的transform属性制作的照片墙特效，配合角度变化，渲染出照片级的效果。
3D旋转照片墙html
12-26
由14张照片环绕而成的照片墙，可以通过鼠标左右拉实现左右查看照片的功能，也可以往上下移动，可俯视或仰视照片墙
超酷CSS3相册照片墙动画特效
12-13
这是一款使用CSS3 transform属性制作的炫酷相册照片墙动画特效。该照片墙特效将一组图片旋转打乱排放在屏幕中，鼠标滑过照片时，照片会动画旋转并现在在所有照片的最上方。
旋转照片墙---不熟悉的知识点
scwMason的博客
08-24 371
1.css3弹性盒子,用于布局多个子元素 display:flex   2.CSS justify-content 属性 结合弹性盒子进行布局   3.$(this).index() index()方法是获取当前的索引值，可以用再点击事件上   4.CSS3 transform属性 可以进行不同方向不同角度的转动   5.CSS3 transition 属性  ...
CSS照片墙
liugaoyuans的博客
12-13 415
直接ctrl+c用 我是在哔哩哔哩看一个作者现场直接盲敲的，我就没有那么厉害了，看了好几遍，才敲完了 html代码 <body> <div class="main"> <div class="images"> <div style="--img:1"><img src="./img/ (1).jpg" alt=""></div> <div style.
html旋转墙壁效果,css3实现照片墙效果，鼠标悬浮时旋转放大并摆正
weixin_35915828的博客
06-03 1039
一张张照片散乱的撒在一起，鼠标悬浮时旋转放大并摆正，效果如下图(所有图片均来自网络)，主要使用到的css3属性有：transition、transform(scale、rotateZ)、box-shadow以及z-index。复制代码代码如下:*{margin:0;padding:0;}html,body{background:#eee;}/*设置场景居中*/.wall{width:1000px;...
第二十六章CSS3基础
最新发布
J3259392566的博客
06-02 785
对我们来说，CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果(譬如动态和渐变)，而且可以很简单的设计出现在的设计效果(比如说使用分栏)。书写顺序是先写私有的CSS3属性，再写标准的 CSS3属性。区别:优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。4.：nth-last-child()选择器：匹配属于其元素的第n个子元素的每个元素，不论元素的类型，从最后的一个子元素开始计数。
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1193
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
html3d旋转照片墙
08-13
- *1* *2* *3* [如何用css实现一个3D旋转照片墙](https://blog.csdn.net/qq_53983648/article/details/127853616)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

二琳爱吃肉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值