今日相逢無酒錢

评论资讯 [ 总 564 则 ]

·飞飞 - 2025-6-19 11:29
·飞飞 - 2025-6-17 18:41
·飞飞 - 2025-6-17 12:23
·悄然 - 2025-6-15 13:13
·悄然 - 2025-6-15 13:12
·悄然 - 2025-6-15 13:09
·悄然 - 2025-6-13 21:11
·小希 - 2025-6-13 17:37
·飞飞 - 2025-6-13 15:17
·飞飞 - 2025-6-12 18:26

友情链接

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

网站统计

·前端三套件 : 154
·JS插件 : 50
·黑石音画 : 385
·代码集锦 : 56
·小工具集合 : 23
·网友作品精选 : 6
·svgdr : 26

·今日访问 : 84
·页面点击 : 89
·当前在线 : 5

今日相逢無酒錢

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

別董大二首·其二

【唐】高適

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

代码

<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%;整成了圆角~~中间字体部分背景和边框之间缝隙里走动，看起来像是线在流动。。