hover的功能
开发工具与关键技术：DW-hover属性
作者：徐晶旗
撰写时间：2019年2月11日
在html中插入一张图片,给它的样式加上关键帧和”animation”动画函数,设置它的动画时长,使它无限循环,再给图片设置伪类hover,当鼠标移入图片中图片停止动画,即暂停转动,当鼠标移出图片时,动画继续执行,图片立即转动.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪元素hover</title>
</head>
<style>
img{
height:200px;
width:200px;
border-radius:50%;
top:100px;
left:100px;
position: absolute;
animation: picture 10s linear infinite;
}
img:hover{
animation:none;
}
@keyframes picture{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
<body>
<img src="../images/timg-14.jpeg" alt="">
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
