今日相逢無酒錢

评论资讯 [ 总 424 则 ]

·了了 - 2024-12-18 21:32
·悄然 - 2024-12-17 15:19
·悄然 - 2024-12-15 15:12
·悄然 - 2024-12-9 12:32
·飞飞 - 2024-12-9 12:31
·小希 - 2024-12-7 11:50
·飞飞 - 2024-12-5 15:53
·飞飞 - 2024-12-3 16:42
·悄然 - 2024-12-3 16:41
·飞飞 - 2024-12-1 18:27

友情链接

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

网站统计

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

·今日访问 : 60
·页面点击 : 61
·当前在线 : 20

今日相逢無酒錢

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

別董大二首·其二

【唐】高適

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

代码

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