悬停图片旋转加速

HTML代码：

<img src="图片网址" width=200 class="img-zzz">

CSS代码：

<!-------------图片旋转 + 悬停加速---------------->
<style type="text/css">
.img-zzz {
display: block;
animation: rotate 30s linear infinite;
transform-origin:center;
}
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
<style>
.img-zzz:hover {
animation-duration: 1.4s;
}
.img-zzz {
transition: 5.5s;
}
</style>
<!-------------图片旋转 + 悬停加速---------------->

如果要将旋转的图片居中，那就添加下面代码（一般不需要）：

<!-------------让元素强制居中---------------->
<style>
.Parallel {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-bottom:10px
}
</style>
<!-------------让元素强制居中---------------->