2024年6月1日 星期六
別董大二首·其二
【唐】高適
六合飄搖私自憐，一離京洛十餘年。
丈夫貧賤應未足，今日相逢無酒錢。
代码
<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>
| 
发表于 2024-5-31 20:42
发表于 2024-6-2 11:18
