方圆之道(学习黑师《Harmonia》圆形播放效果)二改
位置:
首页 >
悄然作业[ 发布时间: 2023.5.23 作者: 花飞飞 阅读: 350 ]
:doodle {@size: 1024px 640px;background: url('https://s1.ax1x.com/2023/05/23/p9TfSAJ.md.jpg')no-repeat center/cover;;box-shadow: 0 0 6px #000;margin: 20px auto;--state: paused;}@size: @r(60,190)px;position: absolute;background:url('https://pic1.imgdb.cn/item/646e138f0d2dde57775294bf.gif') no-repeat center;clip-path: @shape(points: 300;turn: 16;frame: 10;scale: .5;r: seq(.65, 10, .85););border-radius: 50%;cursor: pointer;offset-path: path('M500 400 Q100 200 920 150');offset-distance: calc((@i - 4) * 100%);animation: rot 8s infinite linear var(--state);@keyframes rot { to { transform: rotate(360deg); } }:doodle { @size: 650px 600px; top:100px;}@size: 120px;:after { content: @pn([方圆之道]); }font-family: '黑体', sans-serif; font-size: 7rem; color: black; text-shadow: 0 8px 9px #696969, 0px -2px 1px #fff; font-weight: 100; letter-spacing: -2px; animation: fall 1s calc((@i - 1) * 2s) linear forwards;@keyframes fall {from { transform: translateY(0); }to { transform: translateY(360px); }}
前一篇: 夏意未满(学习黑师《寻》路径效果)
下一篇: 快乐果农(学习黑师路径课程第一次作业)
发表评论:
评论列表 [1条]
#1 | 飞飞 于 2023-5-23 21:57 发布: 一半先放着。这个字在这个贴子里不会动,只能当标题了