叶子和七星瓢虫

评论资讯 [ 总 11 则 ]

友情链接

网站统计

·前端三套件 : 178
·JS插件 : 68
·黑石音画 : 512
·代码集锦 : 77
·小工具集合 : 32
·网友作品精选 : 9
·svgdr : 26
·杂记 : 4

·今日访问 : 319
·页面点击 : 381
·当前在线 : 19

叶子和七星瓢虫

位置: 首页 > 代码集锦[ 发布时间: 2024.5.26 作者: 马黑阅读: 511 ]

效果：

代码：

<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>

发表评论:

评论列表 [0条]