叶子和七星瓢虫
位置:
首页 >
代码集锦[发布: 2024.5.26 作者: 马黑 阅读: 361]
效果：
代码：
<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>
前一篇: canvas画布绘制钟摆
下一篇: JS：节点克隆演示
