Fish 2d game only CSS
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 - 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 © 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%);
}
Developer | Elena |
Username | semenchenko |
Uploaded | December 17, 2022 |
Rating | 3 |
Size | 9,489 Kb |
Views | 6,072 |
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!
Name | Size |
Pricing Table | 6,784 Kb |
VideoBg | 2,592 Kb |
SVG circle path | 2,031 Kb |
Business card mockup | 4,866 Kb |
Modal | 9,533 Kb |
Fish 2d game only CSS | 9,489 Kb |
3d css cube | 4,578 Kb |
Card | 3,220 Kb |
CSS Animation effect | 5,409 Kb |
A Pen by Elena | 3,573 Kb |
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!
Name | Username | Size |
Vue.js Lazy Loading | Kjbrum | 3,620 Kb |
Preloader | Rikki_Sixx | 2,815 Kb |
CSS Link Zoom On Click | Bryce | 1,960 Kb |
Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
GrcJS | Vino6 | 2,047 Kb |
A Pen by Brendan Skousen | Bskousen | 2,954 Kb |
CircleType | Peterhry | 3,535 Kb |
Resume | Rottingroom | 5,483 Kb |
Vue Transition | Chenming142 | 4,561 Kb |
Navier Stoke Fluid Simulation | Esimov | 8,584 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!