鼠标悬停头像旋转动画
本文最后更新于 857 天前,其中的信息可能已经有所发展或是发生改变。

0x01 越转越快

CSDN学来的[1]

把鼠标放到头像上看效果
/**头像属性**/
#avatar{
    border-radius: 50%;
    width: 200px;
    height: 200px;
    margin: auto;
    background-position: center;
    background-size: cover;
}
/**旋转头像**/
#avatar:hover {
    transform: rotate(100turn);
    transition-delay: 0s;
    transition-property: all;
    transition-duration: 60s;
    transition-timing-function: cubic-bezier(.34,0,.84,1);
}

头像属性就不解释了

其中 cubic-bezier() 是生成贝塞尔速度曲线的函数

transform: rotate(100turn); 定义transform旋转圈数

transition-delay: 0s; 定义延迟开始的时间

transition-property: all; 指定具有过渡效果的css属性

transition-duration: 60s; 定义持续时间

transition-timing-function: cubic-bezier(.34,0,.84,1); 定义执行速度

0x02 转一圈后回弹

/**头像属性**/
#avatar2{
    border-radius: 50%;
    width: 200px;
    height: 200px;
    margin: auto;
    background-position: center;
    background-size: cover;
    transform: rotate(-360deg);
    transition: all 0.5s;
}
/**旋转头像**/
#avatar2:hover {
    transform: rotate(360deg);
    transition: all 0.5s;
}

其实就是把 transform: rotate(360deg); 的参数改成了度数,以及在avatar加一个初始transform

参考

  1. ^https://blog.csdn.net/a1669000102/article/details/107686399
-EOF-
这篇文章的作者Shennoter祝你心情愉快ღゝ◡╹)ノ♡♪(^∇^)
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇