鼠标滑过旋转360

1.标签中给定id,鼠标滑过和鼠标离开的方法

<p class="p1" onmouseover="zhuan()" onmouseleave="buzhuan()" id="p1">散文集</p>

2.设置class样式(2个)

.p1{
color: brown;
font-size: 35px;
position: absolute;
top: -10px;
left:500px;
}

.p1zhuan{
color: brown;
font-size: 35px;
position: absolute;
top: -10px;
left:500px;
animation-name: name1;
animation-duration: 3s;
}
@keyframes name1{
from{}
to{
transform: rotate(360deg);
}
}

3.在js中写函数设置切换class

function zhuan(){
var p1 = document.getElementById("p1");
p1.setAttribute("class","p1zhuan");
}
function buzhuan(){
var p1 = document.getElementById("p1");
p1.setAttribute("class","p1");
}