新年将至，用代码送上一份特别的祝福吧！今天，我们用 HTML 和 CSS 创作一张充满动感的新年贺卡。通过 CSS 动画技术，贺卡上的装饰元素仿佛被赋予了生命，为节日增添了一份灵动的氛围。
{mtitle title=”演示效果”/}
HTML&CSS
<!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>
body {
margin: 0;
padding: 0;
background: #e8e8e8;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.card {
width: 200px;
height: 200px;
transition: all 0.2s;
position: relative;
cursor: pointer;
}
.card-inner {
width: inherit;
height: inherit;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0010pxrgba(0, 0, 0, 0.25);
backdrop-filter: blur(10px);
border-radius: 8px;
text-align: center;
line-height: 200px;
font-size: 18px;
}
.card:hover {
transform: scale(1.04) rotate(0deg);
}
.circle {
width: 100px;
height: 100px;
background: repeating-linear-gradient(48deg, #3023ae 0%, #ff0099 100%);
border-radius: 35%30%75%30% / 49%30%70%51%;
position: absolute;
animation: move-up6 2s ease-in infinite alternate-reverse;
}
.circle:nth-child(1) {
top: -25px;
left: -25px;
}
.circle:nth-child(2) {
bottom: -25px;
right: -25px;
animation-name: move-down1;
}
@keyframes move-up6 {
to {
transform: translateY(-10px);
}
}
@keyframes move-down1 {
to {
transform: translateY(10px);
}
}
</style>
</head>
<body>
<div class="card">
<div class="circle"></div>
<div class="circle"></div>
<div class="card-inner">
新年快乐
</div>
</div>
</body>
</html>HTML 结构
- card: 创建一个类名为“card”的 div 元素，用于包含卡片的内容。
- circle: 创建两个类名为“circle”的 div 元素，用于显示动画效果的圆圈。
- card-inner: 包含“新年快乐”文本的 div 元素，类名为“card-inner”。
CSS 样式
- .body: 设置页面的边距、填充、背景色、显示方式和高度。
- .card: 设置卡片的尺寸、过渡效果、位置和鼠标指针样式。
- .card-inner: 设置卡片内部元素的尺寸、背景、阴影、模糊效果、边框半径、文本对齐、行高和字体大小。
- .card:hover: 设置鼠标悬停在卡片上时的变换效果。
- .circle: 设置圆圈的尺寸、背景、边框半径和位置。
- .circle:nth-child(1) 和 .circle:nth-child(2): 分别设置两个圆圈的位置。
- @keyframes move-up6 和 @keyframes move-down1: 定义两个关键帧动画，分别用于控制圆圈上下移动的效果。
- .circle: 通过 animation 属性应用了 move-up6 动画，使第一个圆圈向上移动。
- .circle:nth-child(2): 通过 animation-name 属性应用了 move-down1 动画，使第二个圆圈向下移动。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![思博虚拟主机销售系统2.6.1[持续更新]-支持对接梦奈宝塔、EasyPanel、支持实名认证-梦云博客](https://www.mengyunblog.com/wp-content/uploads/2025/02/352888325.jpeg)
![表情[yinxian]-梦云博客](https://www.mengyunblog.com/wp-content/themes/zibll/img/smilies/yinxian.gif)
暂无评论内容