Fish 2d game only CSS

Developer
Elena
Size
9,489 Kb
Views
6,072
  1. Fish 2d game only CSS Previews
  2. Fish 2d game only CSS HTML Codes
  3. Fish 2d game only CSS CSS Codes

How do I make an fish 2d game only css?

2d game "Catching fish" Only CSS. What is a fish 2d game only css? How do you make a fish 2d game only css? This script and codes were developed by Elena on 17 December 2022, Saturday.

Fish 2d game only CSS Previews
IQ Test

Fish 2d game only CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>fish 2d game only CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> - for (var i = 0; i < 5; i++) input(type="checkbox" id="f-"+(i+1) class="f-input" name="fishName")
.box - for (var f = 0; f < 5; f++) label(class="fish" for="f-"+(f+1) id="l-"+(f+1)) svg(xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="500" height="500" id="svg2" version="1.1" inkscape:version="0.48.1 " sodipodi:docname="New document 1") g(transform="translate(0,-552.36218)") g(transform="matrix(1.3453243,0,0,1.3453243,-258.05563,40.050124)") path(inkscape:connector-curvature="0" id="path2991" d="m 460.62956,574.56003 c 0,0 -63.63961,-95.96449 -132.32998,-87.88327 -68.69038,8.08122 -105.05587,94.95434 -105.05587,94.95434 0,0 33.33504,34.34518 74.75129,45.45686 41.41626,11.11168 67.68022,10.10153 114.14724,-16.16244 46.46702,-26.26397 116.16754,-87.88327 121.2183,-94.95434 5.05077,-7.07107 -15.15228,30.30458 -17.17259,63.63961 -2.0203,33.33504 8.08122,68.69037 8.08122,68.69037 z" style="fill:none;stroke:#000000;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none") path(d="m 291.9341,543.2453 c 0,6.6947 -4.97487,12.12183 -11.11168,12.12183 -6.13681,0 -11.11168,-5.42713 -11.11168,-12.12183 0,-6.6947 4.97487,-12.12183 11.11168,-12.12183 6.13681,0 11.11168,5.42713 11.11168,12.12183 z" sodipodi:ry="12.121831" sodipodi:rx="11.111678" sodipodi:cy="543.2453" sodipodi:cx="280.82242" id="path2993" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:5;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" sodipodi:type="arc") path(inkscape:connector-curvature="0" d="m 493.82864,611.36299 c -14.96429,-17.31078 -27.72802,-32.19819 -28.36384,-33.08312 -0.97786,-1.36098 0.79549,-3.15016 11.50527,-11.608 14.69126,-11.60213 39.52877,-32.69538 48.12941,-40.87389 3.29792,-3.13605 5.6035,-4.758 5.17186,-3.63834 -16.44767,42.66499 -18.95368,69.01496 -10.51077,110.51777 1.0632,5.22639 1.78522,9.65039 1.60448,9.83112 -0.18073,0.18074 -12.57212,-13.83476 -27.53641,-31.14554 z" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none") path(inkscape:connector-curvature="0" id="path3007" d="m 274.26448,550.87129 c -2.54984,-2.54985 -3.10816,-3.92471 -3.10816,-7.65385 0,-12.23044 15.91902,-14.67957 19.04924,-2.93071 2.79031,10.47307 -8.53367,17.99196 -15.94108,10.58456 z" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke: deepskyblue; stroke-width: 7;") path(inkscape:connector-curvature="0" id="path3779" d="m 322.77511,629.16357 c -19.57754,-2.99713 -33.67423,-7.36079 -49.04992,-15.18357 -15.74063,-8.00845 -36.20718,-22.35304 -44.20765,-30.98425 l -2.34385,-2.52863 3.06816,-6.07799 c 16.82608,-33.33228 43.37774,-62.57216 68.2896,-75.20356 33.16261,-16.8149 65.0648,-11.80079 102.22922,16.0675 15.03397,11.27345 37.5622,34.52268 51.71836,53.37359 l 5.31005,7.07107 -3.36229,2.85305 c -4.3925,3.72721 -23.63895,17.15787 -32.64624,22.78135 -39.68349,24.77544 -67.63738,32.63356 -99.00544,27.83144 z m -32.27985,-75.38626 c 9.57992,-10.45351 1.36085,-27.32673 -12.33211,-25.31703 -6.87227,1.00864 -12.48907,10.07529 -11.03693,17.81585 0.74454,3.96873 4.81138,9.40848 8.08933,10.82015 1.15649,0.49805 4.34735,0.74088 7.09081,0.53962 4.16046,-0.30521 5.51919,-0.94544 8.1889,-3.85859 z" style="fill:orangered;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none") path(inkscape:connector-curvature="0" d="m 511.15026,630.0423 c -23.26274,-26.25031 -45.17476,-52.32862 -44.76815,-53.28023 0.25012,-0.58539 8.22262,-7.4283 17.71665,-15.20648 9.49403,-7.77817 23.13564,-19.30136 30.31469,-25.60708 7.17905,-6.30572 13.22724,-11.29052 13.44043,-11.07733 0.21319,0.21319 -1.42987,6.05427 -3.65124,12.98018 -10.34514,32.25456 -11.941,56.47079 -5.9088,89.66245 1.15214,6.33955 1.94397,11.6773 1.75961,11.86165 -0.18436,0.18436 -4.19079,-4.01556 -8.90319,-9.33316 l 0,0 z" style="fill:tomato;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none") .bubble-wrap - for (var x = 0; x < 20; x++) .a svg(xmlns:svg="http://www.w3.org/2000/svg") g(transform="translate(-320.71429,-438.79074)") path(style="fill: transparent; stroke:#ffffff; stroke-width:2; stroke-opacity:1; stroke-miterlimit:4; stroke-dasharray:none; fill-opacity:1" sodipodi:cx="65" sodipodi:cy="65" sodipodi:rx="65" sodipodi:ry="65" d="M 130,65 A 65,65 0 1 1 0,65 65,65 0 1 1 130,65 z" transform="matrix(0.92307693,0,0,0.92307692,325.71429,443.79074)") path(style="opacity:1; fill:#ffffff; fill-opacity:1; stroke:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:4; stroke-opacity:1; stroke-dasharray:none; stroke-dashoffset:0" d="m 72.000004,19.000001 c 0,-4 -3,-5 -8,-5 -17,0 -39,16 -39,26 0,5 1,8 5,8 5,0 10,-7 20,-15 10,-8 21.999999,-8.439748 22,-14 z" transform="translate(320.71429,438.79074)") .total Total: .res Ураааа!!! .info &copy; a(href="https://semenchenkov.github.io/" class="author") Semenchenko Helen = 2016 a(href="https://codepen.io/semenchenko/full/YWNKmG/" class="restore") <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 12l-4.463 4.969-4.537-4.969h3c0-4.97 4.03-9 9-9 2.395 0 4.565.942 6.179 2.468l-2.004 2.231c-1.081-1.05-2.553-1.699-4.175-1.699-3.309 0-6 2.691-6 6h3zm10.463-4.969l-4.463 4.969h3c0 3.309-2.691 6-6 6-1.623 0-3.094-.65-4.175-1.699l-2.004 2.231c1.613 1.526 3.784 2.468 6.179 2.468 4.97 0 9-4.03 9-9h3l-4.537-4.969z"/></svg>
</body>
</html>

Fish 2d game only CSS - Script Codes CSS Codes

html,
body,
.box,
.bubble-wrap { width: 100%; height: 100%; min-height: 500px; min-width: 500px; background: #2196F3; position: relative;
}
body { overflow: hidden; counter-reset: game;
}
.total { position: absolute; top: 0rem; right: 0; font-size: 3rem; color: #fff; font-family: cursive; font-weight: bold; padding-right: 3rem;
}
.total:after { content: counter(game);
}
.f-input { opacity: 0; position: absolute; left: -1000px;
}
.f-input:checked ~ .box .fish:after { display: block; position: absolute; right: 0; top: 0; color: #111; font-size: 5rem; color: #fff; font-family: cursive; font-weight: bold; padding-right: 3rem;
}
@keyframes show { from { opacity: 1; } to { opacity: 0; transform: translateY(-500%); }
}
@-moz-keyframes show { from { opacity: 1; } to { opacity: 0; transform: translateY(-500%); }
}
@-webkit-keyframes show { from { opacity: 1; } to { opacity: 0; transform: translateY(-500%); }
}
@keyframes hide { from { opacity: 1; } to { opacity: 0; transform: translateX(-500%); }
}
@-moz-keyframes hide { from { opacity: 1; } to { opacity: 0; transform: translateX(-500%); }
}
@-webkit-keyframes hide { from { opacity: 1; } to { opacity: 0; transform: translateX(-500%); }
}
.a { position: absolute; animation-name: a; animation-iteration-count: infinite; animation-timing-function: linear; transform: scale(0.5) translateY(1000%);
}
.a:nth-of-type(1) { left: 53%; animation-duration: 23s; animation-delay: 3s;
}
@keyframes a { 0% { transform: translateY(150%) scale(0.1); } 100% { transform: translateY(-937%) scale(0.8); }
}
.a:nth-of-type(2) { left: 322%; animation-duration: 8s; animation-delay: 4s;
}
@keyframes a { 0% { transform: translateY(150%) scale(0.1); } 100% { transform: translateY(-973%) scale(0.9); }
}
.a:nth-of-type(3) { left: 480%; animation-duration: 3s; animation-delay: 4s;
}
@keyframes a { 0% { transform: translateY(150%) scale(0.1); } 100% { transform: translateY(-950%) scale(1); }
}
.a:nth-of-type(4) { left: 136%; animation-duration: 7s; animation-delay: 2s;
}
@keyframes a { 0% { transform: translateY(150%) scale(0.1); } 100% { transform: translateY(-974%) scale(1.5); }
}
.a:nth-of-type(5) { left: 101%; animation-duration: 26s; animation-delay: 4s;
}
@keyframes a { 0% { transform: translateY(150%) scale(0.1); } 100% { transform: translateY(-975%) scale(1.2); }
}
.a:nth-of-type(6) { left: 188%; animation-duration: 30s; animation-delay: 9s;
}
@keyframes a { 0% { transform: translateY(150%) scale(0.1); } 100% { transform: translateY(-909%) scale(1.5); }
}
.a:nth-of-type(7) { left: 66%; animation-duration: 21s; animation-delay: 3s;
}
@keyframes a { 0% { transform: translateY(150%) scale(0.1); } 100% { transform: translateY(-991%) scale(1.4); }
}
.a:nth-of-type(8) { left: 323%; animation-duration: 3s; animation-delay: 9s;
}
@keyframes a { 0% { transform: translateY(150%) scale(0.1); } 100% { transform: translateY(-928%) scale(1.4); }
}
.a:nth-of-type(9) { left: 102%; animation-duration: 15s; animation-delay: 6s;
}
@keyframes a { 0% { transform: translateY(150%) scale(0.1); } 100% { transform: translateY(-960%) scale(0.7); }
}
.a:nth-of-type(10) { left: 497%; animation-duration: 14s; animation-delay: 9s;
}
@keyframes a { 0% { transform: translateY(150%) scale(0.1); } 100% { transform: translateY(-910%) scale(0.4); }
}
.a:nth-of-type(11) { left: 387%; animation-duration: 12s; animation-delay: 8s;
}
@keyframes a { 0% { transform: translateY(150%) scale(0.1); } 100% { transform: translateY(-985%) scale(0.3); }
}
.a:nth-of-type(12) { left: 59%; animation-duration: 8s; animation-delay: 7s;
}
@keyframes a { 0% { transform: translateY(150%) scale(0.1); } 100% { transform: translateY(-998%) scale(1.3); }
}
.a:nth-of-type(13) { left: 338%; animation-duration: 29s; animation-delay: 5s;
}
@keyframes a { 0% { transform: translateY(150%) scale(0.1); } 100% { transform: translateY(-919%) scale(1.1); }
}
.a:nth-of-type(14) { left: 174%; animation-duration: 16s; animation-delay: 3s;
}
@keyframes a { 0% { transform: translateY(150%) scale(0.1); } 100% { transform: translateY(-912%) scale(0.5); }
}
.a:nth-of-type(15) { left: 181%; animation-duration: 15s; animation-delay: 6s;
}
@keyframes a { 0% { transform: translateY(150%) scale(0.1); } 100% { transform: translateY(-909%) scale(1.4); }
}
.a:nth-of-type(16) { left: 355%; animation-duration: 10s; animation-delay: 5s;
}
@keyframes a { 0% { transform: translateY(150%) scale(0.1); } 100% { transform: translateY(-935%) scale(0.7); }
}
.a:nth-of-type(17) { left: 496%; animation-duration: 7s; animation-delay: 1s;
}
@keyframes a { 0% { transform: translateY(150%) scale(0.1); } 100% { transform: translateY(-947%) scale(0.8); }
}
.a:nth-of-type(18) { left: 263%; animation-duration: 6s; animation-delay: 2s;
}
@keyframes a { 0% { transform: translateY(150%) scale(0.1); } 100% { transform: translateY(-902%) scale(0.6); }
}
.a:nth-of-type(19) { left: 492%; animation-duration: 10s; animation-delay: 6s;
}
@keyframes a { 0% { transform: translateY(150%) scale(0.1); } 100% { transform: translateY(-981%) scale(0.9); }
}
.a:nth-of-type(20) { left: 418%; animation-duration: 12s; animation-delay: 6s;
}
@keyframes a { 0% { transform: translateY(150%) scale(0.1); } 100% { transform: translateY(-939%) scale(0.9); }
}
.fish { position: absolute; right: 0; cursor: -webkit-grab; animation-name: go; animation-iteration-count: infinite; animation-timing-function: ease-in-out;
}
#f-1:checked { counter-increment: game 5;
}
#f-1:checked ~ .box #l-1:after { content: "'+5'"; animation: show 1.5s .25s ease-in-out both;
}
#f-1:checked ~ .box #l-1 svg { animation: hide 2s ease-in-out both;
}
#f-1:checked ~ .box #l-1 { animation: hide 2s .75s ease-in-out both;
}
.fish:nth-of-type(1) { z-index: 5; transform: scale(0.35); top: -1rem; animation-duration: 29s; animation-delay: 6s;
}
@-webkit-keyframes go { 45% { transform: scale(0.35) rotate3d(0, 1, 0, 0deg); } 50% { right: 50%; transform: scale(0.35) rotate3d(0, 1, 0, 180deg); } 95% { transform: scale(0.35) rotate3d(0, 1, 0, 180deg); }
}
#f-2:checked { counter-increment: game 10;
}
#f-2:checked ~ .box #l-2:after { content: "'+10'"; animation: show 1.5s .25s ease-in-out both;
}
#f-2:checked ~ .box #l-2 svg { animation: hide 2s ease-in-out both;
}
#f-2:checked ~ .box #l-2 { animation: hide 2s .75s ease-in-out both;
}
.fish:nth-of-type(2) { z-index: 4; transform: scale(0.35); top: 4rem; animation-duration: 23s; animation-delay: 10s;
}
@-webkit-keyframes go { 45% { transform: scale(0.35) rotate3d(0, 1, 0, 0deg); } 50% { right: 50%; transform: scale(0.35) rotate3d(0, 1, 0, 180deg); } 95% { transform: scale(0.35) rotate3d(0, 1, 0, 180deg); }
}
#f-3:checked { counter-increment: game 15;
}
#f-3:checked ~ .box #l-3:after { content: "'+15'"; animation: show 1.5s .25s ease-in-out both;
}
#f-3:checked ~ .box #l-3 svg { animation: hide 2s ease-in-out both;
}
#f-3:checked ~ .box #l-3 { animation: hide 2s .75s ease-in-out both;
}
.fish:nth-of-type(3) { z-index: 3; transform: scale(0.35); top: -4rem; animation-duration: 1s; animation-delay: 10s;
}
@-webkit-keyframes go { 45% { transform: scale(0.35) rotate3d(0, 1, 0, 0deg); } 50% { right: 50%; transform: scale(0.35) rotate3d(0, 1, 0, 180deg); } 95% { transform: scale(0.35) rotate3d(0, 1, 0, 180deg); }
}
#f-4:checked { counter-increment: game 20;
}
#f-4:checked ~ .box #l-4:after { content: "'+20'"; animation: show 1.5s .25s ease-in-out both;
}
#f-4:checked ~ .box #l-4 svg { animation: hide 2s ease-in-out both;
}
#f-4:checked ~ .box #l-4 { animation: hide 2s .75s ease-in-out both;
}
.fish:nth-of-type(4) { z-index: 2; transform: scale(0.35); top: 13rem; animation-duration: 13s; animation-delay: 10s;
}
@-webkit-keyframes go { 45% { transform: scale(0.35) rotate3d(0, 1, 0, 0deg); } 50% { right: 50%; transform: scale(0.35) rotate3d(0, 1, 0, 180deg); } 95% { transform: scale(0.35) rotate3d(0, 1, 0, 180deg); }
}
#f-5:checked { counter-increment: game 25;
}
#f-5:checked ~ .box #l-5:after { content: "'+25'"; animation: show 1.5s .25s ease-in-out both;
}
#f-5:checked ~ .box #l-5 svg { animation: hide 2s ease-in-out both;
}
#f-5:checked ~ .box #l-5 { animation: hide 2s .75s ease-in-out both;
}
.fish:nth-of-type(5) { z-index: 1; transform: scale(0.35); top: 4rem; animation-duration: 8s; animation-delay: 4s;
}
@-webkit-keyframes go { 45% { transform: scale(0.35) rotate3d(0, 1, 0, 0deg); } 50% { right: 50%; transform: scale(0.35) rotate3d(0, 1, 0, 180deg); } 95% { transform: scale(0.35) rotate3d(0, 1, 0, 180deg); }
}
.res { display: block; position: fixed; z-index: 8000; top: 0; left: 0; right: 0; bottom: 0; background: rgba(17, 17, 17, 0.82); color: #fff; font-family: cursive; font-size: 7rem; text-align: center; padding-top: 7rem; transition: all .5s ease-in-out; transform: scale(0.1) translateY(1000%);
}
.info { font-size: 2rem; color: #eee; margin: 4rem auto;
}
.info .author { display: inline-block; padding: 0 .5rem 0 .25rem; color: orangered; text-decoration: none; transition: all .17s ease-in-out;
}
.info .author:hover { animation: s .27s ease-in-out both;
}
.info .restore { display: block; margin: 3rem auto; transition: all .17s ease-in-out;
}
.info .restore svg { fill: yellowgreen; width: 3rem; height: 3rem; transition: all .52s ease-in-out;
}
.info .restore:hover svg { animate: none; transform: rotate(360deg);
}
@-webkit-keyframes s { 50% { transform: translateY(-10px); }
}
@keyframes s { 50% { transform: translateY(-10px); }
}
#f-1:checked + #f-2:checked + #f-3:checked + #f-4:checked + #f-5:checked ~
.box .res { transform: scale(1) translateY(0%);
}
Fish 2d game only CSS - Script Codes
Fish 2d game only CSS - Script Codes
Home Page Home
Developer Elena
Username semenchenko
Uploaded December 17, 2022
Rating 3
Size 9,489 Kb
Views 6,072
Do you need developer help for Fish 2d game only CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Elena (semenchenko) Script Codes
Name
Slider CSS Only
Css piramide
Animation countdown
Responsive HTML Email template
Pricing Table
CSS hover effect
Walking skeleton only css
3d css cube
Zen cube
Calc.js
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!