8个图片,每行四个,不管屏幕大小,都是四个,需要让它进入页面的时候自动一个图片进行360°旋转,,旋转完成再显示第下一个图片并进行360°旋转,依次旋转完

2024-07-17 192 0

为实现每行四个图片的布局,并且在页面加载时每个图片依次进行360°旋转,可以使用以下HTML和CSS代码,并且添加一些JavaScript来控制动画的顺序。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Rotation</title>
    <style>
        .flex {
            display: flex;
            flex-wrap: wrap;
        }

        .flex img {
            width: 25%; /* 每行四个图片,即宽度为 25% */
            opacity: 0; /* 初始透明度 */
            visibility: hidden; /* 初始隐藏 */
            transition: transform 1s ease-in-out, opacity 1s ease-in-out, visibility 1s; /* 过渡效果 */
        }

        .flex img.visible {
            visibility: visible; /* 显示图片 */
            opacity: 1; /* 完全不透明 */
        }

        .flex img.rotated {
            transform: rotate(360deg); /* 旋转360度 */
        }
    </style>
</head>
<body>
    <div class="flex flex-wrap">
        <img src="/static/images/icon/website_icon_1.png" loading="lazy">
        <img src="/static/images/icon/website_icon_2.png" loading="lazy">
        <img src="/static/images/icon/website_icon_3.png" loading="lazy">
        <img src="/static/images/icon/website_icon_4.png" loading="lazy">
        <img src="/static/images/icon/website_icon_5.png" loading="lazy">
        <img src="/static/images/icon/website_icon_6.png" loading="lazy">
        <img src="/static/images/icon/website_icon_7.png" loading="lazy">
        <img src="/static/images/icon/website_icon_8.png" loading="lazy">
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const images = document.querySelectorAll(".flex img");
            let delay = 0;

            images.forEach((img, index) => {
                setTimeout(() => {
                    img.classList.add("visible"); // 显示图片
                    setTimeout(() => {
                        img.classList.add("rotated"); // 添加旋转效果
                    }, 50); // 在显示图片后稍微延迟添加旋转效果
                }, delay);
                delay += 1000; // 每个图片延迟1秒开始旋转
            });
        });
    </script>
</body>
</html>

 

    相关文章

    PC+移动双端页面自适应屏幕缩放适配JS代码
    前端使用 margin 上下间距的问题处理解决方法
    vue项目中 执行npm install 报错 sh: husky: command not found  ELIFECYCLE  Command failed的解决方法
    js 获取当前域名带https 或者http 的函数,返回https://www.hzjcp.com
    学习Vue的流程图
    多设备兼容CSS

    发布评论