android 动画遮罩层,实现鼠标移入遮罩层动画

鼠标移入遮罩层动画

body{

margin: 0;/*清除浏览器格式*/

}

.wrap{

overflow: hidden;/*溢出隐藏，即当文字content盒子超出wrap盒子范围时进行隐藏*/

width: 351px;

height: 351px;

margin: 100px auto 0 auto;

background-image: url("images/bg-pic.png");

background-size: 100%;/*图片大小*/

transition: 1s;/*过渡*/

}

/*改变背景图片的变化效果*/

.wrap:hover{

background-size: 110%;/*1s时间图片放大*/

}

.content{

width: 100%;

height: 100%;

background-color: rgba(0,0,0,.5);/*rgba,三色，a表示透明度*/

transform: translateX(-351px);/*位移*/

transition: .5s;

}

/*鼠标悬停在图片时，将内容盒子右移351个像素，达到文字出现的效果*/

.wrap:hover .content{

transform: translateX(0);

}

.content h2{

margin-block-start:0;

margin-block-end:0;

height: 105px;

text-align: center;

line-height: 105px;/*行高等于盒子高度，使文字垂直居中*/

color: white;

}

.content ul li{

line-height: 30px;

color: white;

cursor: pointer;/*设置鼠标箭头样式*/

}

.content ul li:hover{

font-weight: bold;

font-size: 18px;

transition: 1s;

}

宝贝描述

• 男神好帅
• 男神可爱
• 男神有才
• 花开再见
• 男神归来