「兔了个兔」玉兔踏青，纯CSS实现瑞兔日历
warning:
这篇文章距离上次修改已过185天，其中的内容可能已经有所变动。
以下是一个简化版的纯CSS实现“兔了个兔”日历的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rabbits Calendar</title>
<style>
:root {
--rabbit-color: #e99121;
--rabbit-size: 10em;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #2d3e50;
font-family: Arial, sans-serif;
}
.calendar {
position: relative;
width: calc(var(--rabbit-size) * 2);
height: calc(var(--rabbit-size) * 2);
transform: rotate(-45deg);
}
.calendar::before,
.calendar::after {
content: '';
position: absolute;
width: var(--rabbit-size);
height: var(--rabbit-size);
background-color: var(--rabbit-color);
border-radius: 50%;
}
.calendar::before {
top: 0;
left: 0;
background: conic-gradient(var(--rabbit-color), transparent 60%, var(--rabbit-color));
animation: rotate-ear 2s infinite linear;
}
.calendar::after {
bottom: 0;
right: 0;
background: conic-gradient(var(--rabbit-color), transparent 60%, var(--rabbit-color));
animation: rotate-ear 4s infinite linear;
}
@keyframes rotate-ear {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="calendar"></div>
</body>
</html>这段代码使用了CSS中的::before和::after伪元素来创建兔子的两只耳朵，并使用conic-gradient来实现耳朵旋转的效果。通过调整animation属性中的时长和次数，可以控制耳朵的旋转速度和频率。
评论已关闭