div+css实现给鱼缸加水养活小鱼互动小游戏代码
代码语言:html
所属分类:游戏
代码描述:div+css实现给鱼缸加水养活小鱼互动小游戏代码,一旦鱼缸没水,就要点击水龙头加水,否则鱼儿就死了。
代码标签: div css 鱼缸 加水 养活 小鱼 互动 小游戏 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { font-size: 5vh; } @media screen and (min-height: 400px) { html { font-size: 19px; } } body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #eb80b1; } @keyframes swimming { 0%, 100% { transform: translateX(0); } 22.5% { transform: translateX(2.5rem) skewY(-5deg); } 45% { transform: translateX(6rem) translateY(-1rem) skewY(5deg); } 55% { transform: translateX(5rem) translateY(-0.5rem) scaleX(-1); } 95% { transform: translateX(0) scaleX(-1) skewY(10deg); } } @keyframes dead { 0%, 100% { transform: translateX(2.5rem); } 22.5% { transform: translateX(2.5rem) translateY(-1rem) skewY(-5deg); } 45% { transform: translateX(2.5rem) skewY(5deg); } 55% { transform: translateX(2.5rem) translateY(-1rem) skewY(-5deg); } 95% { transform: translateX(2.5rem) skewY(5deg); } } .fishbowl { position: relative; width: 15rem; height: 15rem; } .fishbowl__background { position: relative; width: 100%; height: 100%; border-radius: 50% 50% 40% 40%; background: linear-gradient(transparent 10%, #FFF 150%); border-bottom: 1px solid #FFF; } .fishbowl:before { content: ""; position: absolute; bottom: 9.5rem; left: 2rem; width: 100%; height: 30%; border-radius: 50%; box-shadow: -4rem 10rem 1rem 0 rgba(0, 0, 56, 0.3); transform: rotate(5deg); } .fishbowl:after { content: ""; position: absolute; top: 12.5%; left: 2.5%; width: 95%; height: 85%; border-radius: 40%; background: linear-gradient(135deg, transparent 50%, #FFF 150%); } .fishbowl__bottom { position: absolute; bottom: 5%; left: 17.5%; width: 65%; height: 20%; border-radius: 50%; background: linear-gradient(#F5FCCD, #ff7d66 200%); } .fishbowl__decoration { position: absolute; top: 20%; left: 5%; width: 90%; height: 75%; } .fishbowl__seaweed { position: absolute; width: 0; height: 0; border-left: 0.5rem solid transparent; border-right: 0.5rem solid transparent; border-bottom: 5rem solid #80c0a1; } .fishbowl__seaweed--1 { bottom: 15%; right: 20%; border-bottom: 5rem solid #80c0a1; } .fishbowl__seaweed--2 { bottom: 10%; right: 30%; border-bottom: 8rem solid #80c0a1; } .fishbowl__seaweed--3 { bottom: 15%; right: 40%; border-bottom: 6rem solid #80c0a1; } .fishbowl__water { position: absolute; bottom: 5%; left: 5%; width: 90%; height: 80%; border-radius: 40% 40% 4.8rem 4.8rem; transition: height 0.3s ease; overflow: hidden; } .fishbowl__water-color { position: absolute; bottom: 0; left: 0; width: 100%; height: calc(1% * var(--filling, 90)); background: linear-gradient(transparent -50%, #419197 250%); border-radius: 20% 20% 4rem 4rem; transition: height 0.5s linear; } .fishbowl__water-color:after { content: ""; position: absolute; top: 0; left: 5%; width: 90%; height: 3rem; border-radius: 50%; background: linear-gradient(transparent 0%, #419197 250%); box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.5); } .fishbowl__top { position: absolute; top: 5%; left: 15%; width: 70%; height: 20%; border-radius: 50%; box-shadow: 0 2px 2px 3px rgba(255, 255, 255, 0.3); } .fishbowl__fish { position: absolute; bottom: 25%; left: 18%; width: 2rem; height: 1rem; border-radius: 50%; background: linear-gradient(#FFF -200%, orange); box-shadow: 0 2rem 4px -2px rgba(0, 0, 56, 0.3); transition-property: bottom, transform, box-shadow; transition-duration: 1s; transition-timing-function: ease; animation: swimming; animation-duration: 5s; animation-iteration-count: infinite; animation-fill-mode: forwards; } .fishbowl__fish:after { content: ""; position: absolute; top: 15%; right: 15%; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: radial-gradient(circle at 0 0, #FFF -100%, #12486B); transition: height 0.5s ease; } .fishbowl__fish--dying { bottom: 10%; box-shadow: 0 1rem 4px -2px rgba(0, 0, 56, 0.3); } .fishbowl__fish--dying .fishbowl__fish-tail { box-shadow: 0 1rem 4px -2px rgba(0, 0, 56, 0.3); } .fishbowl__fish--dead { animation: dead; animation-duration: 2s; animation-iteration-count: 2; animation-fill-mode: forwards; box-shadow: none; } .fishbowl__fish--dead .fishbowl__fish-tail { box-shadow: none; } .fishbowl__fish--dead:after { height: 0.125rem; } .fishbowl__fish--floating { bottom: max(calc(var(--filling, 0) * 1% - 15%), 10%); transform: translateX(2.5rem); animation: none; box-shadow: none; } .fishbowl__fish--floating:after { height: 2px; } .fishbowl__fish--floating .fishbowl__fish-tail { box-shadow: none; } .fishbowl__fish-tail { position: absolute; top: 0; left: -0.75rem; width: 0; height: 0; border-top: 0.5rem solid transparent; border-bottom: 0.5rem solid transparent; border-left: 0.94rem solid orange; box-shadow: 0 2rem 4px -2px rgba(0, 0, 56, 0.3); transition: box-shadow 1s ease; } .fishbowl__pool { position: absolute; right: 0; bottom: -5%; width: 50%; height: 15%; border-radius: 50%; background: linear-gradient(#FFF -100%, #419197); opacity: 0.5; } .fishbowl__pool:after { content: ""; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; border-right: 2px solid #FFF; border-radius: 50%; animation: wave; animation-duration: 3s; animation-iteration-count: infinite; opacity: 0.5; } @keyframes wave { from { top: 25%; left: 25%; width: 50%; height: 50%; } to { top: 10%; left: 10%; width: 80%; height: 80%; } } .fishbowl__tap { position: absolute; bottom: 0; left: -3rem; width: 12rem; height: 15.9rem; cursor: pointer; } .fishbowl__tap--active .fishbowl__tap-stream { ani.........完整代码请登录后点击上方下载按钮下载查看
网友评论0