这段 HTML 和 CSS 代码实现了一个具有动态效果的网页布局，主要展示了一只"飞虫"在引号中的文字旁"飞舞"的效果。
大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。
演示效果
HTML&CSS
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公众号关注：前端Hardy</title>
<style>
@layer base, demo;
@import url(https://fonts.bunny.net/css?family=aleo:300,400) layer(demo);
@layer demo {
.wrapper {
width: 360px;
display: grid;
gap: 0.75rem;
}
p {
margin: 0;
}
blockquote {
position: relative;
font-family: "Aleo", serif;
margin: 0;
display: grid;
grid-template-columns: 2fr 1fr;
place-items: center;
width: 100%;
background: rgba(163 230 53 / 0.1);
font-size: 1.1rem;
font-weight: 300;
line-height: 1.6;
border: 1px solid rgba(255 255 255 / 0.25);
padding: 1rem 2rem;
text-wrap: balance;
&::before {
content: "\201C";
position: absolute;
top: -2rem;
left: 1rem;
color: white;
font-size: 8rem;
font-family: serif;
opacity: 0.15;
}
}
.wrapper>p {
font-size: 0.85rem;
text-align: right;
}
.bug {
width: 130px;
height: 130px;
color: white;
background-color: rgb(132, 204, 22);
mask-image: url(#fly);
z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
.bug {
animation: hue-rotate 10s linear;
}
}
svg .wing {
animation-name: wings;
animation-duration: 300ms;
animation-iteration-count: infinite;
animation-fill-mode: linear;
animation-direction: forwards;
transform-origin: left center;
color: #475569;
&:first-child {
transform-origin: right center;
}
}
@keyframes wings {
0% {
transform: rotateX(40deg);
}
100% {
transform: rotateX(-40deg);
}
}
@keyframes hue-rotate {
to {
filter: hue-rotate(360deg);
}
}
}
@layer base {
* {
box-sizing: border-box;
}
body {
min-height: 100svh;
display: grid;
place-content: center;
background-color: #000;
color: white;
line-height: 1.5;
font-family: system-ui;
padding: 1rem;
}
}
</style>
</head>
<body>
<div class="wrapper">
<blockquote>
<p>The fly that was buzzing around inside the room</p>
<div class="bug"></div>
</blockquote>
</div>
<svg viewBox="0 0 128 128" width="0" height="0">
<defs>
<mask id="fly" viewBox="0 0 128 128">
<g>
<g id="left-wing" class="wing left">
<path
d="M46.83 13.55c-.63-.47-4.1-3.41-5.09-4.46C39.39 6.59 36.95 4 32.43 4c-5.89 0-9 8.24-9.27 24.5c-.2 12.04 6.22 29.03 6.22 29.03s1.48-.52 2.39-.75c.82-.21 1.83-.4 1.83-.4s1.61-3.62 3.74-6.05c1.01-1.15 2.09-2.06 3.24-2.85c1.36-.93 2.19-1.32 2.5-1.51c1.99-1.5 3.66-3.07 5.31-4.39c10.7-8.64 8.66-14.87 7.87-17.54c-1.42-4.84-5.66-7.72-9.43-10.49zM45 16.03c1.45 1.07 2.86 2.12 4.11 3.26c-1.7.89-4.35 2.39-6.35 3.98c-1.85 1.47-3.52 2.91-4.84 4.08c.11-2.7.42-5.18.94-7.57c.52-2.45 1.88-4.98 2.75-6.43c.46.41 2.74 2.2 3.39 2.68zM32 54.44c-1.38-3.93-5.91-16.36-5.76-25.89c.22-13.24 2.58-21.46 6.18-21.46c3.13 0 4.84 1.75 6.95 3.99c-.9 1.42-2.82 4.72-3.54 8.05c-.88 4.1-1.2 8.39-1 13.51c.18 4.71 1.66 14.1 1.91 15.7c-.62.69-4.74 6.1-4.74 6.1zm14.39-15.21c-2.04 1.73-4.6 4.05-6.94 6.35c-.8-5.08-1.54-13.7-1.55-14.03c1.21-1.13 3.78-3.48 6.78-5.87c2.1-1.67 5.14-3.3 6.59-4.03c.73.98 1.33 2.05 1.68 3.26c.78 2.6.94 7.93-6.56 14.32z"
opacity=".8" fill="currentColor"></path>
<path
d="M32.01 54.44c-1.38-3.93-5.91-16.36-5.76-25.89c.22-13.24 2.58-21.46 6.18-21.46c3.13 0 4.84 1.75 6.95 3.99c-.9 1.42-2.82 4.72-3.54 8.05c-.88 4.1-1.2 8.39-1 13.51c.18 4.71 1.66 14.1 1.91 15.7c-.63.69-4.74 6.1-4.74 6.1z"
opacity=".5" fill="#7bb1ba"></path>
<path
d="M45.01 16.03c1.45 1.07 2.86 2.12 4.11 3.26c-1.7.89-4.35 2.39-6.35 3.98c-1.85 1.47-3.52 2.91-4.84 4.08c.11-2.7.42-5.18.94-7.57c.52-2.45 1.88-4.98 2.75-6.43c.45.41 2.74 2.2 3.39 2.68z"
opacity=".5" fill="#7bb1ba"></path>
<path
d="M46.4 39.23c-2.04 1.73-4.6 4.05-6.94 6.35c-.8-5.08-1.54-13.7-1.55-14.03c1.21-1.13 3.78-3.48 6.78-5.87c2.1-1.67 5.14-3.3 6.59-4.03c.73.98 1.33 2.05 1.68 3.26c.77 2.6.94 7.93-6.56 14.32z"
opacity=".5" fill="#7bb1ba"></path>
</g>
<path
d="M63.3 84.21l-10.48 7.58s2.96 4.32 2.8 5.6c-.1.77-9.32 3.43-10.62 5.41c-1.3 1.98-3.09 12.07-3.09 12.07s-5.7 7.15-2.66 8.74c4.02 2.1 8.21-4.88 8.93-6.9c.72-2.03 2.46-8.64 3.09-8.98c2.27-1.22 8.5-2.51 11.59-5.41c2.69-2.52 4.63-11.68 4.63-11.68l7.56 5.31s1.49 15.21 2.2 17.86c.92 3.43 4.02 6.71 6.28 8.59c2.9 2.41 6.08-.19 4.92-2.41c-2.04-3.91-5.12-8.01-5.12-8.01s.58-17.09-.77-19.94c-.73-1.53-9.08-7.29-9.08-7.29s5.41-.43 8.01-.29c2.61.14 5.36.14 6.08 1.16c.72 1.01.56 17.9 2.32 19.5c1.54 1.41 2.97 2.08 5.6 3.48c3.28 1.74 6.18 2.03 7.15.58c1.18-1.76-.39-4.4-2.99-5.89c-2.61-1.5-4.83-2.32-4.83-2.32s.41-18.35-.68-20.37c-1.09-2.03-3.67-2.95-10.04-3.96c-6.37-1.01-14.15.19-14.15.19l-6.65 7.38z"
fill="#868686"></path>
<path
d="M39.78 96.43l-7.7-4.61s-6.88 3.16-6.93 7.57c-.05 3.8.24 11.72 0 13.46c-.24 1.74-3.66 5.75-1.39 7.68c2.72 2.32 7.46-3.43 8.11-7.1c.58-3.28.19-9.65.19-12.36c0-2.13 7.72-4.64 7.72-4.64z"
fill="#868686"></path>
<path
d="M47.49 49.58s1.59-9.27 6.52-15.35S70.08 23.8 82.83 23.8s20.18 11.15 19.58 22.16c-.6 11.01-6.4 17.6-13.06 23.86c-6.66 6.26-20.83 13.94-20.83 13.94l-2.37 1.45s-6.52 21.16-35.26 10.82c-16.28-5.84-14.54-23.53-11.5-29.64c3.01-6.05 8.36-9.49 17.53-10.57c1.39-.17 10.57-6.24 10.57-6.24z"
fill="#5e6366"></path>
<path
d="M67.2 29.34c-.65 0-1.18-.53-1.18-1.18v-8.4c0-.65.53-1.18 1.18-1.18s1.18.53 1.18 1.18v8.4c.01.65-.52 1.18-1.18 1.18z"
fill="#858585"></path>
<path
d="M73.87 28.48c-.65 0-1.18-.53-1.18-1.18v-7.53c0-.65.53-1.18 1.18-1.18s1.18.53 1.18 1.18v7.53c0 .65-.53 1.18-1.18 1.18z"
fill="#858585"></path>
<path
d="M62.57 30.79c-.42 0-.83-.22-1.04-.62l-3.62-6.66c-.31-.57-.1-1.29.47-1.6c.57-.31 1.29-.1 1.6.47l3.62 6.66c.31.57.1 1.29-.47 1.6c-.18.11-.37.15-.56.15z"
fill="#858585"></path>
<path
d="M101.1 65.26c-.11 0-.23-.02-.34-.05l-5.79-1.74c-.63-.19-.98-.85-.79-1.47c.19-.63.85-.98 1.47-.79l5.79 1.74c.63.19.98.85.79 1.47c-.16.51-.63.84-1.13.84z"
fill="#858585"></path>
<path
d="M99.07 72.07c-.22 0-.45-.06-.65-.19l-7.1-4.63a1.18 1.18 0 0 1-.34-1.64c.36-.55 1.09-.7 1.64-.34l7.1 4.63c.55.36.7 1.09.34 1.64c-.23.34-.61.53-.99.53z"
fill="#858585"></path>
<path
d="M33.6 56.37c-.01-.05 2.03-5.02 5.79-8.01c5.03-4 11.3-5.21 14.87-5.12c3.97.11 6.38 1.56 7.34 2.22c2.8 1.93 6.47 4.92 8.69 10.33s2.15 14.43 1.83 16.8c-1.16 8.59-3.48 11.84-6.08 12.81c1.57-3.81 1.54-7.74.97-11.21c-.45-2.68-2.46-7.46-5-9.85c-3.89-3.66-7.67-6.71-17.12-8.06c-6.91-1-11.28.14-11.29.09z"
fill="#868686"></path>
<path
d="M29.76 63.5l-1.23 7.53s-3.97 1.56-4.27 2.68c-.29 1.09 2.46 4.27 7.31 3.4c5.52-.99 8.1-8.07 7.17-12.17c-.58-2.53-3.19-6.3-7.17-5.43c-3.73.82-1.81 3.99-1.81 3.99z"
fill="#a22918"></path>
<path
d="M50.4 74.36s-4.04 3.42-4.11 4.65c-.07 1.23.6 3.65 5.28 4.44c4.63.79 9.22-2.23 10.35-7.72c.76-3.72-1.2-10.65-8.38-10.65c-5.36.02-3.14 9.28-3.14 9.28z"
fill="#a22918"></path>
<path
d="M22.95 65.38c-1.34 3.44-.76 8.13 1.59 9.92c3.45 2.63 8.83-.43 10.4-5.87c1.83-6.32-.14-9.99-4.03-10.43c-1.97-.21-5.93 1.17-7.96 6.38z"
fill="#000000"></path>
<path
d="M45.4 70.96c-1.34 3.44-1.04 8.99 2.39 10.36c4.81 1.92 9.56-1.67 10.5-7.24c.94-5.58-2.15-8.55-4.76-8.98c-2.9-.49-6.1.65-8.13 5.86z"
fill="#000000"></path>
<path
d="M32.85 78.85c-1.26.56-1.68 2.65.07 5.22c1.84 2.71 6.93 3.18 9.2 1.2c2.64-2.3 2.23-4.01 1.11-4.59c-2.01-1.04-3.22 2.08-5.67 1.61c-2.1-.41-1.64-4.8-4.71-3.44z"
fill="#0a0a0a"></path>
<g id="right-wing" class="wing right">
<path
d="M118.41 33.04c-.87-2.97-4.88-4.67-12.27-5.19c-5.93-.42-12.74.14-12.74.14c-3.94.33-14.4 1.22-19.82 7.35c-5.04 5.71-4.06 17.77-3.64 19.65c1.21 2.63 1.71 5.63 2 7.84c.09.67.34 4.14.36 5.62c.04 2.81-.29 5.53-.79 7.77c.03.13 23.34-14.53 30.1-20.23c12.51-10.55 18.16-18.27 16.8-22.95zm-24.52-1.99c2.29-.2 7.92-.29 8.41-.28c-1.51 2.67-4.19 7.18-6.43 9.81c-1.63 1.92-3.61 3.58-5.67 5.14c.08-2.17.18-5.21.18-7.13c0-2.33.05-5.62.08-7.18c1.32-.18 3.43-.36 3.43-.36zm-18 6.34c2.77-3.13 7.46-4.68 11.47-5.48c-.03 1.71-.07 4.58-.07 6.68c0 2.88-.24 8.58-.28 9.46c-2.94 2.11-5.95 4.3-8.32 7c-1.57 1.79-4.82 5.42-4.83 5.41c-.09-1.03-.53-2.17-.71-3.61c-.56-4.4-1.42-14.75 2.74-19.46zm23.73 16.24C94.43 58 80.15 67.16 74.18 70.93c.46-1.83.31-6.42.31-6.42s3.86-4.39 6.52-7.43c2.18-2.49 5-4.52 7.99-6.67c3.22-2.32 6.55-4.71 9.21-7.83c2.89-3.41 6.29-9.41 7.53-11.66c5.21.37 9.23 1.36 9.7 2.98c.73 2.48-3.05 8.97-15.82 19.73z"
opacity=".8" fill="currentColor"></path>
<path
d="M75.89 37.39c2.77-3.13 7.46-4.68 11.47-5.48c-.03 1.71-.07 4.58-.07 6.68c0 2.88-.24 8.58-.28 9.46c-2.94 2.11-5.95 4.3-8.32 7c-1.57 1.79-4.82 5.42-4.83 5.41c-.45-1.47-.55-2.23-.71-3.61c-.56-4.62-1.42-14.75 2.74-19.46z"
opacity=".5" fill="#7bb1ba"></path>
<path
d="M93.89 31.05c2.29-.2 7.92-.29 8.41-.28c-1.51 2.67-4.19 7.18-6.43 9.81c-1.63 1.92-3.61 3.58-5.67 5.14c.08-2.17.18-5.21.18-7.13c0-2.33.05-5.62.08-7.18c1.32-.18 3.43-.36 3.43-.36z"
opacity=".5" fill="#7bb1ba"></path>
<path
d="M99.62 53.63C94.43 58 80.15 67.16 74.18 70.93c.46-1.83.31-6.42.31-6.42s3.86-4.39 6.52-7.43c2.18-2.49 5-4.52 7.99-6.67c3.22-2.32 6.55-4.71 9.21-7.83c2.89-3.41 6.29-9.41 7.53-11.66c5.21.37 9.23 1.36 9.7 2.98c.73 2.48-3.05 8.97-15.82 19.73z"
opacity=".5" fill="#7bb1ba"></path>
</g>
</g>
</mask>
</defs>
</svg>
</body>
</html>HTML 结构
- wrapper 容器，用于布局。
- blockquote 元素，包含一段文字和一个 bug 元素，后者用来展示"飞虫"。
- 在页面底部定义了一个 svg 元素，用于创建"飞虫"的遮罩 mask 效果。SVG 中定义了复杂的路径 path，这些路径组成了"飞虫"的形状。
CSS 样式
@layer base：
- 定义了全局的基础样式，如 box-sizing、body 的背景颜色、字体、行高等。
- 设置了 body 的最小高度为视口高度（100svh），并居中对齐内容。
@layer demo：
- .wrapper：设置为网格布局，用于排列内容。
- blockquote：定义了样式，包括背景颜色、边框、字体大小等，并使用伪元素::before 添加了一个大引号。
- .bug：定义了"飞虫"的样式，包括大小、背景颜色、遮罩（mask-image）等。
- .bug：使用@keyframes hue-rotate 实现了颜色的色调旋转动画。
- SVG 中的.wing 类：定义了翅膀的动画 wings，使翅膀上下摆动。
- 媒体查询@media (prefers-reduced-motion: no-preference)：仅在用户不偏好减少动画的情况下启用动画效果。
各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！