二龙戏珠（学习黑师《归来》变幻彩球效果）

位置: 首页 > 悄然作业[ 发布时间: 2023.5.10 作者: 花飞飞阅读: 281 ]

:doodle {@size: 260px;@shape: circle;left: 390px;top: 260px;cursor: pointer;z-index: 2;animation: rot 6s infinite linear forwards var(--state);}border: @r(2px, 10px) solid hsla(calc(100 * @i()), 80%, 60%, @r(.6));border-radius: 50%;transform: scale(@r(6, 15)); border-radius: linear-gradient(35deg,tan,purple,cyan,orange,red) 4;animation: hue 10s infinite alternate var(--state);transform: scale(@r(6, 15));@keyframes rot { to { transform: rotate(360deg); } }@keyframes hue { to { filter: hue-rotate(360deg); }}

:doodle {@size: 1024px 640px;}position: absolute;left: @r(100)%;top: -20%;:after {position: absolute;content: "@p(➷,㎡,➶,➴,✬，☂，§，۩)"; color: DarkCyan;font-size: @r(10, 35)px;}animation: fall @r(20,8)s @r(-10, 10)s infinite var(--state);@keyframes fall {0% { top: -20%; transform: rotate(0deg); }100% {top: 120%; transform: rotate(360deg); }}@keyframes hue { to { filter: hue-rotate(360deg); }

前一篇: 落花缤纷（学习黑师《落花缤纷》花飞飞效果）
下一篇: 一花一世界（学习黑师《可能》css-doodle player效果）

发表评论:

评论列表 [2条]

#2 | 马黑于 2023-5-10 23:45 发布: 构思巧妙

#1 | 悄然于 2023-5-10 21:43 发布: 给彩球单独加了之前的色彩变幻效果。整贴变幻的话，龙真的没法看了。狰狞可怖。符号电脑看都一个颜色，手机看有的变色了呢