初学习 HTML 和 CSS，求问 CSS 已经实现鼠标移上去有阴影动画，如何加上鼠标移出也有动画？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 2309 天前的主题，其中的信息可能已经有所发展或是发生改变。

预览地址： http://wangyifang.com/web/xiaofu/2.2/

CSS

动画

鼠标

HTML

12 条回复 • 2018-08-09 11:01:35 +08:00

InternetExplorer

2018-08-09 10:33:15 +08:00

不要用动画，用“过渡”就好了。

rabbbit

2018-08-09 10:33:57 +08:00

<div></div>
<style>
div {width: 200px;height: 150px;border: 1px solid black;transition: 1s;}
div:hover {box-shadow: 0 0 20px 0px rgba(0,0,0,1)}
</style>

wxsm

2018-08-09 10:33:58 +08:00

你这种应该用 transition，而不是 animation

rabbbit

2018-08-09 10:37:10 +08:00

CSGO

2018-08-09 10:50:42 +08:00

@rabbbit 那如果我要初始值，是不是把初始值放入上面那个样式里就行。比如： box-shadow: 0 0 0 0 rgba(0,0,0,0);

v2xiaolang

2018-08-09 10:52:02 +08:00

学了多久到这了

CSGO

2018-08-09 10:55:16 +08:00

@v2xiaolang 2 天了

whitegerry

2018-08-09 10:55:46 +08:00

css3 动画选择 position、scale、rotation、opacity。

.banner {
position: relative;
flex: 1;
height: 350px;
background: rgba(0, 144, 255, 0.10);
margin: 18px 10px;
box-sizing: border-box;
border-radius: 10px;
}

.banner::after {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: '';
border-radius: 10px;
box-shadow: 0 8px 55px rgba(0, 0, 0, .12);
opacity: 0;
transition: opacity .3s;
}

.banner:hover::after {
opacity: 1;
}

chenno9

2018-08-09 10:56:03 +08:00

你给 banner 写一个相反的动画，
@keyframes banner_animation1 {
from {
box-shadow: 0 8px 55px 0 rgba(0,0,0,0.12);
}
to {
box-shadow: 0 0 0 0 rgba(0,0,0,0.00);
}
}
#banner1,#banner2{
animation: banner_animation1 1s forwards;
}

rabbbit

2018-08-09 10:57:43 +08:00

CSGO

2018-08-09 11:01:07 +08:00

@rabbbit 嗯，谢谢，已经成功了。

CSGO

2018-08-09 11:01:35 +08:00

@chenno9 谢谢