<style> css-doodle { --color: @p(#010059, #52437b, #ff7a8a, #fcf594)@p([2-9a-d])@lp(); --rule: ( :doodle { @grid: 8 / 120vmin 80vmin; max-width: 100vw; background: linear-gradient(#ff7a8a, #fcf594); filter: hue-rotate(-22deg); overflow: hidden; } @size: @r(4vmin, 15vmin); mix-blend-mode: multiply; transform: translate(@m2(@r(-80%, 100%))); border-radius: 50%; --n: @p(-1, 1); --c: var(--color); box-shadow: @m100( calc(@sin(@n() / 10) * 1.8vmin * @var(--n)) calc(@n() * 1vmin) 0 @var(--c) ); background: @m(@p(0, @ri(500)), ( radial-gradient(var(--color) 50%, transparent 0) @r(100%) @r(100%) / @r(1px, 3px) @lr() no-repeat )); background-color: var(--color); ); } </style> <css-doodle use="var(--rule)" click-to-update></css-doodle>
我也尝试使用这个技巧，做了一副
有几点，有必要提一下的。
1、为什么一定要使用box-shadow，直接堆叠 div 不行么？
可以，使用多重box-shadow只是因为这样可以更省标签，一个 div 搞定。更甚，愿意折腾，使用多重渐变也是可以的。
2、上述两个 Demo 都是纯 CSS 画出来的吗？
是的。虽然借助了 css-doodle 库，但是本质都是 CSS 代码，只是这个库封装好了很多拿来即用的函数。css-doodle
3、有什么用？
额，有没有用是一个哲学问题。至少我觉得还是挺有意思的。
以上就是如何在CSS中绘制曲线图形及展示动画的详细内容，更多关于在CSS中绘制曲线图形及展示动画的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章: