css布局实现一个鮟鱇鱼灯光悬浮出现的效果代码-html代码-BFW代码库

css布局实现一个鮟鱇鱼灯光悬浮出现的效果代码

代码语言：html

所属分类：悬停

代码描述：css布局实现一个鮟鱇鱼灯光悬浮出现的效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
:root {
  --color:goldenrod;
}

html {
  display:grid;
  place-items:center;
  min-height:100vh;
  background:#111;
  overflow:hidden;
  font-family:sans-serif;
  color:#333;
}
#fish_box {
  width:200px;
  height:200px;
  position:relative;
  transform-origin:center top;
  transform:scale(2);
  animation:bob 5s linear infinite;
}
@keyframes bob {
  50% { transform:scale(2) translateY(5%); }
}

.light {
  content:'';
  width:20px;
  height:20px;
  background:var(--color);
  position:absolute;
  left:14px;
  top:-36px;
  border-radius:1px 50% 50% 50%;
  box-shadow:
    inset 3px 3px 3px rgba(0,0,0,.25),
    0 0 100px 50px var(--color);
  transform:rotate(45deg);
  z-indeX:9999;
  opacity:.5;
  transition:.5s;
  filter:blur(1px);
}

.light:hover {
  opacity:1 !important;
  filter:blur(0px);
}
.light:hover ~ div {
  opacity:1 !important;
}

#fish {
  width:200px;
  height:200px;
  position:relative;
  transform:rotate(45deg);
  opacity:0;
  transition:1s;
}
#fish:before {
  content:'';
  width:200px;
  height:200px;
  background:
    radial-gradient(circle at 25% 35%, var(--color) 7px, transparent 10px),
    #333;
  border-radius:100px 10px 100px 100px;
  position:absolute;
  left:0;
  top:0;
  clip-path:polygon(0% 100%, 50% 65%, 0% 35%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
  box-shadow:inset -20px 0 rgba(0,0,0,.15);
  animation:mouth 5s linear infinite;
}
@keyframes mouth {
  50% { clip-path:polygon(0% 85%, 50% 65%, 0% 45%, 0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}

.light_dongle {
  width:75px;
  height:50px;
  background:transparent;
  border-radius:40px 0 0 40px;
  position:absolute;
  top:25px;
  left:-55px;
  box-shadow:inset 3px 3px #333;
  transform:rotate(15deg);
}

.fin {
  width:75px;
  height:40px;  
  position:absolute;
}

.top {
  right:30px;
  top:-40px;
  background:
    linear-gradient(to right, white 6%, transparent 6%, transparent 94%, white 94%),
    linear-gradient(to bottom, transparent 30px, rgba(0,0,0,.25) 30px),
    linear-gradient(to bottom, transparent 5px, var(--color) 5px);
  background-size:25% 100%, 100% 100%, 100% 100%;
  background-position:0 0, 0 0;
  background-repeat:repeat-x, no-repeat;
}
.bottom {.........完整代码请登录后点击上方下载按钮下载查看