<!DOCTYPE html><html><style>
.box {
margin: 30vh auto 0 auto;
width: 200px;
height: 200px;
background: #eee;
display: flex;
align-items: center;
justify-content: center;
transition: .5s;
}
.box:hover h2 {
opacity: .1;
transition: .5s;
}
.box:hover {
box-shadow: 0 40px 0 -20px #19b73e,
0 -40px 0 -20px #dc002b,
40px 0px 0 -20px #1328db,
-40px 0px 0 -20px #ff560b,
inset 0 40px 0 -20px #19b73e,
inset 0 -40px 0 -20px #dc002b,
inset 40px 0px 0 -20px #1328db,
inset -40px 0px 0 -20px #ff560b
}
</style><body>
<div class="box">
<h2>box</h2>
</div>
</body></html>
css动效集合
最新推荐文章于 2024-05-14 05:58:31 发布