本文介绍了一个使用 CSS3 实现的鼠标悬停动画效果，包括圆形图片的边框旋转及背景遮罩渐显功能。通过简单的 HTML 结构配合 CSS3 的属性如 transform 和 transition，可以轻松实现动态的视觉效果。
.demo,.img,.border,.mask{
width: 300px;
height: 300px;
}
.demo{
display: block;
position: relative;
margin:50px auto;
}
.img{
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
border-radius: 50%;
}
.border{
position: absolute;
border: 10px solid #072256;
border-left-color:#E07514;
border-top-color:#E07514;
top: 0;
left: 0;
border-radius: 50%;
-webkit-transition:all .5s ease-in;
transition:all .5s ease-in;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.mask{
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
-webkit-transition:all .5s ease-in;
transition:all .5s ease-in;
color:rgba(255,255,255,0);
}
.demo:hover .mask{
background-color:rgba(0,0,0,0.5);
color:rgba(255,255,255,1);
}
.demo:hover .border{
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.info{
position: absolute;
width: 100%;
top: 50%;
left: 0;
text-align: center;
-webkit-transform:translateY(-50%);
}
BEATIFUL DAY
Description goes here
扫一扫
1006
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
