六爻-铜钱桌（学习黑师内切正方形&点星&何以歌落花效果）
位置:
首页 >
悄然作业[发布: 2023.6.22 作者: 花飞飞 阅读: 277]
:doodle { @size: 1024px 640px; position: relative; background: url('https://s1.ax1x.com/2023/06/22/pCJlOiT.jpg') no-repeat center / cover; box-shadow: 0 0 8px #000; opacity: .95; z-index: 1; margin: auto; --state: paused; } @nth(1) { @size: 300px; border-radius: 50%;clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 50%, 66.67% 50%, 50% 66.67%, 33.33% 50%, 50% 33.33%, 66.67% 50%, 100% 50%, 100% 0%); @place: 26% 400px; background: url('https://pic.imgdb.cn/item/6493cf821ddac507cc639b0f.png') no-repeat center / cover; cursor: pointer; z-index: @size; opacity: .99; animation: rot 8s infinite linear var(--state); } @nth(2) {@size: 1024px 640px;background: @doodle(@grid: 10 / 100%;@place: @r(0,100)% -10%;:after {content: '@p(🌸,❀,🏵️,🌺,❄️,💮,🍃)';animation: rot 6s infinite linear;font-size: @r(15,30)px;}animation: fly @r(30,50)s @r(0,-30)s infinite ;@nth(4){ transform: translate(20px); }@keyframes rot { to { transform: rotate(360deg); } }@keyframes fly {from { transform: rotate(0deg) translateY(0); opacity: .9;}to { transform: rotate(@r(-30,30)deg) translateY(800px); opacity: 0; }});} @nth(3) { @size: 100px; border-radius: 50%;clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 50%, 66.67% 50%, 50% 66.67%, 33.33% 50%, 50% 33.33%, 66.67% 50%, 100% 50%, 100% 0%); @place: 16% 100px; background: url('https://pic.imgdb.cn/item/6493cf821ddac507cc639b0f.png') no-repeat center / cover; cursor: pointer; z-index: @size; animation: rot 6s infinite linear var(--state); }@nth(4) { @size: 160px; border-radius: 50%;clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 50%, 66.67% 50%, 50% 66.67%, 33.33% 50%, 50% 33.33%, 66.67% 50%, 100% 50%, 100% 0%); @place: 66% 380px; background: url('https://pic.imgdb.cn/item/6493cf821ddac507cc639b0f.png') no-repeat center / cover; cursor: pointer; z-index: @size; opacity: .95; animation: rot 18s infinite linear var(--state); } @match(i ≥ 5) { @size: @r(3,15)px; @shape: hypocycloid 4; @place: @r(60, 1242)px @r(0,200)px; background: #d73784; opacity: .8; transform: rotate(-30deg); animation: flash .5s @r(-1)s infinite alternate var(--state); } @keyframes rot { to { transform: rotate(360deg); } } @keyframes flash { to { transform: rotate(30deg); opacity: 0; } }
前一篇: 暗夜舞者（学习黑师《猫的舞步》图形裁剪旋转效果）
下一篇: 快乐田野（学习黑师《端午·粽子舞》摇晃效果）
发表评论:
评论列表 [2条]
#2 | 马黑 于 2023-6-22 17:47 发布: 这个有分量
#1 | 悄然 于 2023-6-22 13:44 发布: 或者帖子名字就叫三文钱……
