今日相逢無酒錢

评论资讯 [ 总 17 则 ]

·悄然 - 2026-3-26 10:46
·飞飞 - 2026-3-21 10:00
·悄然 - 2026-3-21 10:00
·小白 - 2026-3-21 09:59
·飞飞 - 2026-3-20 14:21
·悄然 - 2026-3-16 16:58
·飞飞 - 2026-3-10 14:32
·飞飞 - 2026-2-25 22:31
·小白 - 2026-2-25 22:11
·飞飞 - 2026-2-25 22:09

友情链接

◇ 午后时光
◇ 花潮论坛
◇ 马黑永硕网盘
◇ ThreeJS中文网
◇ 随意云
◇ hblog
◇ HTML官方文档
◇ Web代码格式化工具
◇ 清音陋屋
◇ cubic-bezier

网站统计

·前端三套件 : 184
·JS插件 : 68
·黑石音画 : 523
·代码集锦 : 79
·小工具集合 : 32
·网友作品精选 : 9
·svgdr : 26
·杂记 : 4

·今日访问 : 1318
·页面点击 : 2145
·当前在线 : 4

今日相逢無酒錢

位置: 首页 > 前端三套件[ 发布时间: 2024.6.1 作者: 马黑阅读: 490 ]

別董大二首·其二

【唐】高適

六合飄搖私自憐，一離京洛十餘年。
丈夫貧賤應未足，今日相逢無酒錢。

代码

<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>

<h3>別董大二首·其二</h3>

<p>【唐】高適<br><br>六合飄搖私自憐，一離京洛十餘年。<br>丈夫貧賤應未足，今日相逢無酒錢。</p>

</div>

前一篇: CSS关键帧动画：元素绕椭圆圆周运动的实现（二）
下一篇: Oklab颜色空间演示

发表评论:

评论列表 [1条]

#1 | 悄然于 2024-6-2 09:19 发布: 下方的红色和绿色，是两个方形被 border-radius: 40%;整成了圆角~~中间字体部分背景和边框之间缝隙里走动，看起来像是线在流动。。