css鼠标经过从不同角度的过度动画案例
<!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>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.first,
.second,
.third {
width: 200px;
height: 60px;
text-align: center;
line-height: 60px;
font-size: 32px;
margin: 20px;
transition: color .5s;
position: relative;
}
div .inner {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 60px;
background-color: deeppink;
z-index: -1;
}
div:hover {
color: #fff;
}
.inner {
transition: transform 1s;
}
.first .inner {
transform: scale(0, 1);
transform-origin: 100% 50%;
}
.second .inner {
transform: scale(0, 0);
transform-origin: 100% 100%;
}
.third .inner {
transform: scale(0, 0);
transform-origin: 50% 100%;
}
.first:hover .inner {
transform-origin: 0 50%;
transform: scale(1, 1);
transition: transform 1s;
}
.second:hover .inner {
transform-origin: 0 0;
transform: scale(1, 1);
}
.third:hover .inner {
transform-origin: 50% 0;
transform: scale(1, 1);
}
</style>
</head>
<body>
<div class="first">
Hello word
<div class="inner"></div>
</div>
<div class="second">
Hello word
<div class="inner"></div>
</div>
<div class="third">
Hello word
<div class="inner"></div>
</div>
</body>
</html>
本篇文章适合刚接触css动画的同学用来作为一个练手的小案例, 本案例包含了从左边进入、从左上角进入、从中间进入的三组动画。 大家可以用来借鉴学习,高手请绕行。