CSS小温泉

花简静

凡哥 发表于 2024-5-24 07:59
2024年5月24日 星期五
《半妖倾城》代码：

老师最近给的代码都不彩色了。

花简静

期待下一个CSS设计。。

凡哥

花简静 发表于 2024-5-24 21:28
老师最近给的代码都不彩色了。

代码不一定是彩色的

凡哥

花简静 发表于 2024-5-24 21:27
原来那个时候已有半成品了
小图标变贴子，老师这出贴速度够快的。。

如果不加克制可以立马出帖

花简静

凡哥 发表于 2024-5-24 21:53
如果不加克制可以立马出帖

还是克制了的。。
忍到第二天才发。。找图花的时间最长吧，这么妖的图不好找

花简静

凡哥 发表于 2024-5-24 21:53
代码不一定是彩色的

是可以随意变色儿的

凡哥

花简静 发表于 2024-5-24 22:41
是可以随意变色儿的

有时间就弄弄彩色的，时间紧就随意点了

凡哥

花简静 发表于 2024-5-24 22:40
还是克制了的。。
忍到第二天才发。。找图花的时间最长吧，这么妖的图不好找 ...

有照妖镜找啥一找一个准

凡哥

2024年5月25日 星期六

叶子·七星瓢虫

<style> .leaf {     margin: auto;     margin-top: 100px;     width: 200px;     height: 200px;     background: linear-gradient(-45deg,lightgreen,darkgreen,green);     border-radius: 100% 0;     overflow: hidden;     transform: scale(1.2);     position: relative; } .pic {     position: absolute;     width: 30px;     top: 0;     left: 0;     transform: rotate(90deg) skew(-5deg);     offset-path: path('M0,200 L200,0');     offset-distance: 0;     animation: move 10s linear infinite, skew .2s linear infinite alternate; } @keyframes move { to { offset-distance: 100%; } } @keyframes skew { to { transform: rotate(90deg) skew(5deg); } } </style>   <div class="leaf">     <img class="pic" src="https://638183.freep.cn/638183/t23/bug/ladybug01.webp" alt="" /> </div>

效果

凡哥

叶子的尺寸固定为 200*200，因为 offset-path 描述的路径是实的。所以，如果想让演示的图样变大或变小一些，可以使用 transform: scale(倍数) 来控制，详见第 10 行代码