春（学习黑师《非洲大象》图片碰触旋转效果）

位置: 首页 > 悄然作业
[发布: 2023.5.8 作者: 花飞飞阅读: 230]

:doodle {@size: 580px 386px;margin: 20px auto;box-shadow: 0 0 8px #000;--state: paused;} background: url('https://pic2.imgdb.cn/item/6458e78a0d2dde5777e64f87.gif'); background-position: calc((@col - 1) * 580 / @size-col * -1px) calc((@row - 1) * 386 / @size-row * -1px); :hover { transform: rotate(360deg); } transition: 3s; @row(1) { @shape: circle;:after {content: ''; @shape: @p(heart, clover 4, infinity,bicorn); @size: @r(100,80)%;background: darkred;cursor: pointer; animation: rot @r(4,8)s infinite linear var(--state);}} @keyframes rot { to { transform: rotate(360deg); } }

前一篇: 乘风破浪（学习黑师小船图案和嵌套效果）
下一篇: 青衫隐（学习黑师《崛起》星月笋效果）

发表评论:

评论列表 [2条]

#2 | 马黑于 2023-5-8 23:06 发布: 是图片都成。GIF分割后，它也是动的

#1 | 悄然于 2023-5-8 20:33 发布: 试了下动图，还好，也能够正常显示。可惜手边没有足够大的动图。