前端 html和css实现hover图片上浮效果

目录

1、html代码

2、css代码

 完整代码

效果图：

1、html代码

2、css代码

body{

background-color: black;

}

div{

width: 1000px;

height: 400px;

display: inline-flex;

justify-content: center;

align-items: center;

margin: 100px auto;

/* border: 3px solid red; */

}

span{

display: inline-block;

width: 200px;

height: 250px;

margin-right: 50px;

transition: all 0.5s;

}

span:nth-child(1){

background-color: violet;

}

span:nth-child(2){

background-color: lightseagreen;

}

span:nth-child(3){

background-color: orangered;

}

span:hover{

box-shadow: 0px 0px 5px rgba(255, 255, 255,0.2);

transform: translate3d(0,-4px,0);

cursor: pointer;

}

 完整代码

效果图：

推荐链接

 您阅读本篇文章共花了：