沿途的风景美不胜收，真是让人流连忘返。人生就像一场旅行，不知道在下一站邂逅什么样的人，发生怎么样的故事!
由于hover伪类添加的动画效果，仅当鼠标放在元素上时会被触发，而当鼠标离开时，效果会中断，会显得很生硬。
大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦，CSS3便可以帮你解决这些问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>离开时效果生硬</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border:1px solid;
margin:0px auto;
margin-top: 200px;
}
div:hover{
transform: scale(2);
transition: all 1s linear;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
由于div元素只有在:hover伪类触发的时候，效果才能加到div元素上。
当鼠标离开div元素的时候，:hover伪类将不再生效，瞬间丢掉hover里写的动画效果。
此时，我们应当在原本元素上再写一个一模一样的transition效果，将离开断掉的动画效果续接上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单解决</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border:1px solid;
margin:0px auto;
margin-top: 200px;
/* 在原本元素上再加一个transition */
transition: all 1s linear;
}
div:hover{
transform: scale(2);
transition: all 1s linear;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
此时，不管鼠标在什么时候离开元素，都会原样返回。
到此这篇关于CSS3如何实现伪类hover离开时平滑过渡效果示例就介绍到这了。缺乏一种自信的精神，这往往导致一些本来是萌芽了的天才走向自我扼杀。更多相关CSS3如何实现伪类hover离开时平滑过渡效果示例内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
