萬水千山總是情
本帖最后由 马黑黑 于 2024-5-31 22:09 编辑 <br /><br /><style>#mydiv {
margin: auto;
margin-top: 200px;
width: fit-content;
font: bold 50px sans-serif;
}
#mydiv:hover { animation: chg 4s; }
@keyframes chg {
0, 100% { transform: rotate(60deg) scale(.6); }
25% { transform: rotate (-120deg) scale(1); }
50% { transform: rotate(3000deg) scale(1.2); }
75% { transform: rotate(-300deg) scale(1.5); }
}
</style>
<div id="mydiv">萬水千山總是情</div>
本帖最后由 马黑黑 于 2024-5-31 23:23 编辑
代码：
<style>
.mydiv {
margin: auto;
margin-top: 200px;
width: fit-content;
font: bold 50px sans-serif;
}
.mydiv:hover { animation: chg 4s; }
@keyframes chg {
0, 100% { transform: rotate(60deg) scale(.6); }
25% { transform: rotate (-120deg) scale(1); }
50% { transform: rotate(3000deg) scale(1.2); }
75% { transform: rotate(-300deg) scale(1.5); }
}
</style>
<div class="mydiv">萬水千山總是情</div>
或者直接使用过渡效果：
<style>
.mydiv {
margin: auto;
margin-top: 200px;
width: fit-content;
font: bold 50px sans-serif;
transition: transform 1s, color 1s;
}
.mydiv:hover { transform: rotate(720deg) scale(1.2); color: green; }
</style>
<div class="mydiv">萬水千山總是情</div>
太好玩啦！先生风流！{:4_191:} 小文 发表于 2024-5-31 23:14
太好玩啦！先生风流！
{:4_172:} 这个转起来像八卦图一样{:4_173:} 那个过渡效果也有趣，连颜色也能变化{:4_187:} 祝楼上二位先生六一节快乐！{:4_204:}{:4_191:} 万水千山总是情，问你没钱行不行 山人 发表于 2024-6-1 09:28
万水千山总是情，问你没钱行不行
我看行 又一个特好玩的。。
风车一样的疯转。。。
这个放到贴子里，如果不说，谁碰到会不会吓一跳{:4_170:} 南无月 发表于 2024-6-1 12:29
又一个特好玩的。。
风车一样的疯转。。。
这个放到贴子里，如果不说，谁碰到会不会吓一跳
{:4_203:} 马黑黑 发表于 2024-6-1 13:51
{:4_187:}突然发奇想的念头。。
南无月 发表于 2024-6-1 16:30
突然发奇想的念头。。
有么 马黑黑 发表于 2024-6-1 18:12
有么
有的呀有。。我整了个贴子，天上飘了个大字，碰到可以变化的。。{:4_170:} 南无月 发表于 2024-6-1 23:29
有的呀有。。我整了个贴子，天上飘了个大字，碰到可以变化的。。
感觉挺美妙的样纸 马黑黑 发表于 2024-6-1 23:30
感觉挺美妙的样纸
{:4_170:}本来应该在画布里面跟原字重合的，碰到画布就不灵了。。
索性放远点，上天去好了。。 南无月 发表于 2024-6-1 23:34
本来应该在画布里面跟原字重合的，碰到画布就不灵了。。
索性放远点，上天去好了。。
也好 马黑黑 发表于 2024-6-1 23:38
也好
没办法的办法。。 南无月 发表于 2024-6-2 11:58
没办法的办法。。
也是办法 马黑黑 发表于 2024-6-2 13:37
也是办法
{:4_170:}这也行。。今天跟这一贴开裂的，发现小播图片大小也会影响开裂位置