HTML&CSS :惊艳!CSS 打造动感圆形图片展示,美到出圈

243 阅读2分钟

这段代码创建了一个动态的圆形图片展示效果,通过 CSS 技术实现了图片的旋转和动态布局,为页面添加了视觉吸引力和动态感。

演示效果

HTML&CSS

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
        rel="stylesheet">
    <title>公众号关注:前端Hardy</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
        }

        @property --memberRotation {
            syntax: "<number>";
            initial-value: 0;
            inherits: true;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }

        ul.team {
            width: 80vmin;
            list-style: none;
            position: relative;
            aspect-ratio: 1/1;
            border-radius: 50%;
            animation: memberRotation 10s linear infinite;

            >li {
                offset-path: border-box;
                offset-distance: calc(100% / var(--member-count) * var(--member-idx) + (var(--memberRotation) * 100%));
                width: calc(100% / (1 + (1 / sin(180deg / var(--member-count)))));
                position: relative;

                >img {
                    position: absolute;
                    width: 100%;
                    border: 5px solid red;
                    scale: .8;

                    aspect-ratio: 1/1;
                    object-fit: cover;
                    border-radius: 50%;
                    rotate: calc(-360deg / var(--member-count) * var(--member-idx) - (360deg * var(--memberRotation)))
                }
            }

            &:has(img:hover) {
                animation-play-state: paused
            }
        }

        @keyframes memberRotation {
            to {
                --memberRotation: 1
            }
        }

        html,
        body {
            height: 100%
        }

        body {
            margin: 0;
            display: grid;
            place-items: center;
            padding: 2rem;
            background-color: black
        }
        .title{
            color: #fff;
            font-size: 14px;
            position: absolute;
            top: 50%;
        }
    </style>
</head>

<body>
    <h4 class="title">谁是你男神?</h4>
    <ul class="team" style="--member-count: 10">
        <li style="--member-idx:0"><img src="https://img1.baidu.com/it/u=3950567684,3147215551&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500" alt=""></li>
        <li style="--member-idx:1"><img src="https://q8.itc.cn/q_70/images03/20240725/a2fc96fbcbff437597ef7b4a0311fa61.jpeg" alt=""></li>
        <li style="--member-idx:2"><img src="https://pic.rmb.bdstatic.com/bjh/down/d287cf32b0b303eedd8c0c81ba29af7c.jpeg" alt=""></li>
        <li style="--member-idx:3"><img src="https://q4.itc.cn/q_70/images03/20240408/a47fcdeb879f4d0db05c9eea2e4e160c.jpeg" alt=""></li>
        <li style="--member-idx:4"><img src="https://p4.itc.cn/images01/20230825/03b7fe89c9514562b8b6ac0ab2b9e917.jpeg" alt=""></li>
        <li style="--member-idx:5"><img src="https://q3.itc.cn/images01/20240226/4bc068392d384fc0b016c31887936fb8.jpeg" alt=""></li>
        <li style="--member-idx:6"><img src="https://q1.itc.cn/images01/20240916/7898f495f2794be293e635e0dc1cdb34.png" alt=""></li>
        <li style="--member-idx:7"><img src="https://q7.itc.cn/q_70/images03/20240202/61f44c9f1b364968a9c83a092bc2890c.jpeg" alt=""></li>
        <li style="--member-idx:8"><img src="https://inews.gtimg.com/news_bt/OEgfyOgObatX6OLS65xzwMVtYFTujll0OC8GPpqjFWSi8AA/641" alt=""></li>
        <li style="--member-idx:9"><img src="https://t11.baidu.com/it/u=2323877419,202029450&fm=30&app=106&f=JPEG?w=640&h=960&s=05F15986C452AFD466CD14B803005002" alt=""></li>
    </ul>
</body>

</html>

HTML 结构

  • body: 包含页面的可见内容。
  • title: 显示标题“谁是你男神?”。
  • team: 创建一个类名为“team”的无序列表,用于包含图片元素。
  • li: 每个 li 代表一个图片元素,通过 style="--member-idx:n"设置不同的索引。
  • img: 显示图片,图片的 src 属性指向不同的图片链接。

CSS 样式

  • *: 重置所有元素的边距、填充,设置 box-sizing 为 border-box,并统一字体为“Poppins”。
  • @property --memberRotation: 定义一个 CSS 属性,用于控制图片的旋转。
  • ul.team: 设置图片列表的样式,包括宽度、布局、位置、圆角和旋转动画。
  • ul.team > li: 设置每个图片元素的样式,包括位置、宽度和旋转角度。
  • ul.team > li > img: 设置图片的样式,包括位置、宽度、边框、缩放、圆角和旋转。
  • @keyframes memberRotation: 定义图片的旋转动画,使图片围绕中心点旋转。
  • html, body: 设置页面的高度。
  • body: 设置页面的显示方式、对齐方式、内边距和背景色。
  • .title: 设置标题的样式,包括颜色、字体大小和位置。