今日相逢無酒錢
位置:
首页 >
前端三套件[发布: 2024.6.1 作者: 马黑 阅读: 53]
別董大二首·其二
【唐】高適
六合飄搖私自憐，一離京洛十餘年。
丈夫貧賤應未足，今日相逢無酒錢。
代码
<style>
#pa {
margin: 60px auto;
width: 400px;
height: 200px;
overflow: hidden;
box-shadow: 2px 2px 6px gray;
position: relative;
--size: 80px;
}
#pa::before, #pa::after {
position: absolute;
content: '';
left: calc(var(--size) / -2);
top: calc(var(--size) / -2);
width: var(--size);
height: var(--size);
border-radius: 40%;
background: green;
animation: move 8s linear infinite;
}
#pa::after {
background: red;
animation-delay: -4s;
}
#son {
position: absolute;
padding: 10px;
background: silver;
inset: 4px;
z-index: 2;
}
#son h3, #son p { margin: 10px 12px; }
@keyframes move {
0%, 100% { left: calc(var(--size) / -2); top: calc(var(--size) / -2); }
30% { left: calc(100% - (var(--size) / 2)); top: calc(var(--size) / -2); }
50% { left: calc(100% - (var(--size) / 2)); top: calc(100% - (var(--size) / 2)); }
80% { left: calc(var(--size) / -2); top: calc(100% - (var(--size) / 2)); }
}
</style>
<div id="pa">
<div id="son">
<h3>別董大二首·其二</h3>
<p>【唐】高適<br><br>六合飄搖私自憐，一離京洛十餘年。<br>丈夫貧賤應未足，今日相逢無酒錢。</p>
</div>
</div>
前一篇: CSS关键帧动画：元素绕椭圆圆周运动的实现（二）
下一篇: Oklab颜色空间演示
发表评论:
评论列表 [1条]
#1 | 悄然 于 2024-6-2 09:19 发布: 下方的红色和绿色，是两个方形被 border-radius: 40%;整成了圆角~~中间字体部分背景和边框之间缝隙里走动，看起来像是线在流动。。
