CSS 鼠标悬浮动画暂停效果

2019-6-11 14:40| 作者: admin| 查看: 3424| 评论: 0|来自: 蚂蚁部落

CSS3新增了强大的动画功能,具体可以参阅CSS3 animation 动画一章节。

本文单独分享一段代码实例,实现了鼠标悬浮元素停止动画效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>????</title>
<style type="text/css">
.antzone {
  width: 100px;
  height: 100px;
  margin: 40px;
  text-align: center;
  line-height: 94px;
  border: 1px solid blue;
  border-radius: 50%;
  animation: play-state 3s linear infinite;
  cursor: pointer;
}
.antzone:hover {
  animation-play-state: paused;
}

@keyframes play-state {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: 200px;
  }
}
</style>
</head>
<body>
  <div class="antzone"></div>
</body>
</html>

代码分析如下:

(1).圆形默认状态下具有往复循环动画效果。

(2).当鼠标悬浮于元素之上时,会暂停动画效果。

(3).实现原理很简单,通过伪类选择器:hover规定当鼠标悬浮于div元素之上时,为其添加animation-play-state属性,并将其值设置为paused,于是元素动画停止,鼠标离开,那么动画继续执行。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部