div+css实现鼠标悬浮点亮路灯引来萤火虫动画效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现鼠标悬浮点亮路灯引来萤火虫动画效果代码
代码标签: div css 鼠标 悬浮 点亮 路灯 引来 萤火虫 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.container {
background-color: #f3f3f3;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
.wrapper {
display: flex;
position: absolute;
background-color: #272727;
height: 100vh;
}
.sq {
background: #333333;
background: linear-gradient(0deg, #323232 0%, #111111 100%);
position: relative;
width: calc(100vw / 5);
height: 50%;
z-index: 1;
}
.sq:before {
content: "";
height: 100%;
width: 100%;
position: absolute;
background-image: url(//repo.bfw.wiki/bfwrepo/icon/64bdf28fc7d10.png);
background-position: center bottom;
background-repeat: no-repeat;
background-size: contain;
opacity: 0.24;
left: 0;
right: 0;
margin: 0 auto;
max-width: 225px;
transition: opacity 0.12s ease-in, filter 0.05s ease-out;
}
.sq:hover:before {
opacity: 1;
filter: brightness(1.15);
transition: opacity 0.48s, filter 0.52s ease-out;
}
.ac {
position: absolute;
width: calc(100vw / 5);
max-height: calc(100vw / 2.5);
height: calc(100vh / 1.5);
top: 0;
bottom: 0;
left: 0;
margin: auto 0;
transition: transform cubic-bezier(0.075, 0.82, 0.165, 1) 4.4125s;
z-index: 2;
pointer-events: none;
}
.pin {
transition: 23.62s 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pin1 {
transform: translate(-5%);
}
.sq1:hover ~ .ac .pin1 {
transition: 5.52s 0.23s cubic-bezier(0.23, 1, 0.32, 1);
}
.sq2:hover ~ .ac .pin1 {
transition: 3.52s 0.23s cubic-bezier(0.23, 1, 0.32, 1);
}
.sq3:hover ~ .ac .pin1 {
transition: 4.15s 0.42s cubic-bezier(0.23, 1, 0.32, 1);
}
.sq4:hover ~ .ac .pin1 {
transition: 2.82s 0.15s cubic-bezier(0.23, 1, 0.32, 1);
}
.sq5:hover ~ .ac .pin1 {
transition: 3.25s 0.63s cubic-bezier(0.23, 1, 0.32, 1);
}
.pin2 {
transform: translate(35%);
}
.sq1:hover ~ .ac .pin2 {
transition: 3.92s 0.61s cubic-bezier(0.23, 1, 0.32, 1);
}
.sq2:hover ~ .ac .pin2 {
transition: 2.76s 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.sq3:hover ~ .ac .pin2 {
transition:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0