这段代码创建了一个动态的圆形图片展示效果,通过 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: 设置标题的样式,包括颜色、字体大小和位置。