欢迎光临散文网 会员登陆 & 注册

康娜酱说:老爷们,给个赞吧!康纳快没电啦![附代码]

2023-09-16 00:28 作者:泥想什么呢想  | 我要投稿

index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="style.css">

<title>CSS 3D Hover Effects</title>

</head>

<body>

<div class="container">

<div class="box">

<img src="01.jpg">

</div>

<div class="box">

<img src="02.jpg">

</div>

<div class="box">

<img src="03.jpg">

</div>

<div class="box">

<img src="04.jpg">

</div>

<div class="box">

<img src="05.jpg">

</div>

<div class="box">

<img src="06.jpg">

</div>

</div>

</body>

</html>


style.css

*

{

margin: 0;

padding:0;

box-sizing: border-box;

}

body

{

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: #1a252c;

}

.container

{

position: relative;

display: flex;

justify-items: center;

transform-style: preserve-3d;

}

.container .box

{

position: relative;

width: 240px;

height: 240px;

transition: 0.5s;

-webkit-box-reflect:below 1px linear-gradient(transparent,#0002);

}

.container .box img

{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

object-fit: cover;

}

.container:hover > :not(:hover)

{

margin: 0 -40px;

filter: drop-shadow(0 0 25px #000) drop-shadow(0 0 45px #000);

transform: perspective(500px) rotateY(45deg) scale(0.95);

}

.container .box:hover ~ .box

{

transform: perspective(500px) rotateY(-45deg) scale(0.95);

}

.container .box:hover

{

transform: perspective(500px) rotateY(0) scale(1.5);

z-index:1000;

}

素材图片







康娜酱说:老爷们,给个赞吧!康纳快没电啦![附代码]的评论 (共 条)

分享到微博请遵守国家法律