本文探讨了如何使用CSS创建精细的内阴影效果，通过`.hover`选择器展示了过渡动画，详细介绍了`box-shadow`属性在鼠标悬停时如何改变，以及如何通过`transition`属性实现平滑的颜色和阴影变化。内容涵盖了CSS选择器、样式属性和动态效果的应用。
尝试设置.01px的boxshadow
.hover {
max-width: 400px;
color: red;
background-color: blue;
display: table;
text-align: left;
cursor: pointer;
box-shadow: inset 0 0 0 0.01px white;
transition: all ease 5.5s;
}
.hover:hover {
background-color: blue;
box-shadow: inset 440px 0 0 0 #fff;
color: #000;
}
This is some really looong title!
.hover {
color: #fff;
background: rgba(0, 0, 0, 0.5);
display: block;
display: inline-block;
text-align: left;
cursor: pointer;
box-shadow: inset 0 0 0 0.01px #fff;
-webkit-transition: box-shadow linear 0.5s,color linear 0.5s;
-moz-transition: box-shadow linear 0.5s,color linear 0.5s;
transition: box-shadow linear 0.5s,color linear 0.5s;
}
.hover:hover {
box-shadow: inset 424px 0 0 0.01px #fff;
color: #000;
}
扫一扫
220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
