恭喜发财（学习黑师《房前》效果）
位置:
首页 >
悄然作业[ 发布时间: 2023.5.6 作者: 花飞飞 阅读: 158 ]
:doodle { margin: 20px auto; @grid: 26x1 / 1024px 640px; background: #800080 url('https://s1.ax1x.com/2023/05/06/p9a2Hvn.jpg') no-repeat center / cover; box-shadow: 0 0 8px #800080; pointer-events: none; position: relative; -webkit-box-reflect: below 0px linear-gradient(transparent,transparent 85%,rgba(0,0,0,.8)); --state: paused; } --colors: (#75b9be,#696d7d,#d72638,#f49d37,#140f2d); --color-1: @p(--colors); --color-2: @P; --transform: translateY(@r(2, 90)%); --size: 30px; transform: var(--transform) rotate(0deg); transform-origin: 50% 100%; @random(0.5) { animation: swing @r(3, 5)s ease infinite alternate both; } @random(0.5) { animation: swingLeft @r(3, 5)s ease infinite alternate both; } @keyframes swing { 0% { transform: var(--transform) rotate(0deg); } 100% { transform: var(--transform) rotate(1deg); } } @keyframes swingLeft { 0% { transform: var(--transform) rotate(0deg); } 100% { transform: var(--transform) rotate(-1deg); } } @keyframes rot { 0% { transform: var(--transform) rotate(0deg); } 100% { transform: var(--transform) rotate(360deg); } } ::after { content: ""; position: absolute; top: -15px; left: calc(50% - var(--size) / 2); width: var(--size); height: var(--size); background: @p( radial-gradient(@stripe(@m4(var(--color-@pn(1, 2))), transparent 29.7%)), @doodle( @grid: 1 / 100%; ::after { content: "@p(ஐ,♛,㊒,㊖,㊗,☺,☃,☂,❅)"; position: absolute; top: -4px; left: 50%; transform: translate3d(-50%, 0, 0); font-size: 40px; color: transparent; background-image: radial-gradient(var(--color-1) 20%, var(--color-2) calc(20% + 0.5px)); -webkit-background-clip: text; } ), @doodle( @grid: 1 / 100%; ::after { content: "@p(☣,۞,❅)"; position: absolute; top: 0; left: 50%; transform: translate3d(-50%, 0, 0); font-size: 28px; color: transparent; background-image: radial-gradient(var(--color-1) 20%, var(--color-2) calc(20% + 0.5px)); -webkit-background-clip: text; } ) ); } background: @doodle( @grid: 1x40; background: linear-gradient(90deg, @stripe(transparent, @p(--colors) 2px, transparent)); @nth(1, 2) { ::before { display: none; } } @random(.5) { ::before { content: ""; @place: 10px center; @size: 50% 100%; border-radius: 0 100% 0 100%; background: @p(--colors); -webkit-box-reflect: @p(right, initial); } } ); @at(@X, @Y) { @size: 260px; @shape: star; @place: 32% 15%; background: url('https://pic2.imgdb.cn/item/644539990d2dde57770d9082.gif') no-repeat center / cover; transform-origin: 50% 50%; animation: rot 6s infinite linear var(--state); ::before { display: none; } ::after { display: none; } cursor: pointer; pointer-events: auto; }
前一篇: 传奇——王菲(学习黑师《Recovery》多角花播放效果)
下一篇: 孤勇者（学习黑师《怒放的生命》光盘加底图小播效果）
发表评论:
评论列表 [1条]
#1 | 悄然 于 2023-5-6 21:02 发布: 传说中的魔改又来了。。小花改成特殊符号，有，财，皇冠，雪人，笑脸等。。。。播放器里面加了背景图，有点张牙舞爪。。
