序
今夜的风甚是喧嚣，我百无聊赖的刷着沸点，突然我被眼前旋转的avatar所吸引。在一阵眩目中，我看到的是它的嘲讽。它在嘲笑着身为单身狗的我，它在用爱的魔力转圈圈彰显着自己的地位。
事已至此，一场大战在所难免，为了狗子的荣耀！
情报
所谓知己知彼，百战不殆。只有深入敌营，才能打探到最真实的情报。所以我决定偷摸的在他大本营的外面三十公里，用望远镜一探究竟。
不过距离稍稍有点远，我也只能看个大概。
- 我看到avatar在旋转。
初战
情报已有，事情变的简单明了，我掏出了许久未战的html。
<div id="avatar" class="turn"></div>
给它加上了css的buff
- 定义一个
turn的小动画，然后让他无限旋转就好了
#avatar {
background-image: url(https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/6/5/172837416d0fe434~tplv-t2oaga2asx-image.image);
width: 7.5rem;
height: 7.5rem;
background-color: #f9f9f9;
border-radius: 50%;
}
.turn {
animation: turn 0.5s linear infinite;
}
/*
turn : 定义的动画名称
1s : 动画时间
linear : 动画以何种运行轨迹完成一个周期
infinite :规定动画应该无限次播放
*/
@keyframes turn {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
这场胜利我势在必得，我站在avatar的大本营面前喊道，‘宵小之徒，胆敢跟本大爷一战！’。
他慢步走出来，脸上甚是不屑。‘就这？垃圾！’，他甚至都没有正眼看我，只做了一个简单的动作，我就知道自己是败得多么彻底、多么可笑。
他轻轻的把鼠标移开了
- avatar竟然停止了旋转！
再战
看来我是时候要掏出js这个大杀器了
- 鼠标移入加上class
- 鼠标移出删除class
window.onload = function() {
const avatar = document.getElementById('avatar');
let time = 0;
avatar.onmouseenter = function() {
avatar.classList.add('turn');
}
avatar.onmouseleave = function() {
avatar.classList.remove('turn');
}
}
然后把html稍加修改，绝世神兵就此铸成。
这次我神挡杀神，佛挡杀佛！
<div id="avatar"></div>
他看着我这拙劣的技巧又笑了笑，说道“一个
hover, 可以解决的事，你还整上了js，你这不是核弹打苍蝇，大材小用吗”
我突然明白过来，只需要在css上加一个
hover伪元素就好啊。
.turn:hover {
animation: turn 0.5s linear infinite;
}
井底之蛙
我看着眼前的一切，觉得自己可笑至极。没有掌握精髓，却试图挑战他，两人根本不是一个层次。
也许现在，虚心学习才是自己最需要的东西。我低着头喃喃道，“是我班门弄斧了，失败失败，失败啊”。
他看我如此沮丧，说道“小伙子，你要学习的还有很多啊，你抬头再仔细看看avatar“。
看到眼前这一幕我瘫坐在了地上，张大嘴一句话都说不出来。
因为avatar竟然越转越快！！！！！！！！！！！
