我正在处理带有悬停效果的圆形头像,默认情况下,背景图片顶部有一个半透明的叠加层,它会在悬停时显示图像。
问题是,是否有可能在悬停时让叠加层从盒子的中心消失?现在正好相反。
.avatar {
position: relative;
background: url("https://i.stack.imgur.com/zBjxW.jpg") center / cover no-repeat;
border-radius: 50%;
width: 200px;
height: 200px;
}
.avatar:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: rgba(0, 0, 255, .5);
transition: width .5s, height .5s;
}
.avatar:hover:before {
width: 0;
height: 0;
}
<div class="avatar"></div>
答案 0 :(得分:4)
是的,您可以使用插入阴影来实现这种效果:
<RelaytiveLayout
android:layout_height="match_parent">
<MapView
android:id="@+id/map_view"
android:layout_height="match_parent">
</MapView>
<FloatingActionButton
android:id="@+id/button_top"
android:layout_height="wrap_content"
alignParentRight = true />
<FloatingActionButton
android:id="@+id/button_bottom"
android:layout_height="wrap_content"
alignParentRight = true
alignParentBottom = true />
</RelaytiveLayout>
&#13;
.avatar {
position: relative;
background: url("https://i.stack.imgur.com/zBjxW.jpg") center / cover no-repeat;
border-radius: 50%;
width: 200px;
height: 200px;
box-shadow:inset 0 0 0 105px rgba(0, 0, 255, .5);
transition:0.25s
}
.avatar:hover {
box-shadow:inset 0 0 0 0 rgba(0, 0, 255, .5);
}
&#13;