Cute animated swimming Squid made in pure CSS

Developer
Vijay Gupta
Size
4,121 Kb
Views
8,096
  1. Cute animated swimming Squid made in pure CSS Previews
  2. Cute animated swimming Squid made in pure CSS HTML Codes
  3. Cute animated swimming Squid made in pure CSS CSS Codes

How do I make an cute animated swimming squid made in pure css?

Animated swimming Squid made in pure CSS.. What is a cute animated swimming squid made in pure css? How do you make a cute animated swimming squid made in pure css? This script and codes were developed by Vijay Gupta on 08 November 2022, Tuesday.

Cute animated swimming Squid made in pure CSS Previews
IQ Test

Cute animated swimming Squid made in pure CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cute animated swimming Squid made in pure CSS </title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <h1>Please view in Full Screen</h1> <div class="wave"></div> <div class="wave-2"></div> <div class="bubbles"> </div> <div class="squid"> <div class="squid__tail"></div> <div class="squid__head"> <div class="squid__eyes"></div> <div class="squid__mouth"></div> <div class="squid__legs"></div> </div> </div>
</div>
</body>
</html>

Cute animated swimming Squid made in pure CSS - Script Codes CSS Codes

* { margin: 0; padding: 0; box-sizing: border-box;
}
body { max-width: 100vw; max-height: 100vh; overflow: hidden;
}
h1 { font-family: sans-serif; position: absolute; top: 10px; font-size: 16px; text-align: center;
}
.wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: #8fd2fe; min-height: 350px;
}
@-webkit-keyframes anim-tail { 0% { top: -25px; } 20% { top: -20px; } 40% { -webkit-transform: translateX(-50%) rotate(-10deg); transform: translateX(-50%) rotate(-10deg); } 60% { -webkit-transform: translateX(50%) rotate(-50deg); transform: translateX(50%) rotate(-50deg); } 100% { top: -25px; }
}
@keyframes anim-tail { 0% { top: -25px; } 20% { top: -20px; } 40% { -webkit-transform: translateX(-50%) rotate(-10deg); transform: translateX(-50%) rotate(-10deg); } 60% { -webkit-transform: translateX(50%) rotate(-50deg); transform: translateX(50%) rotate(-50deg); } 100% { top: -25px; }
}
@-webkit-keyframes anim-leg-center { 0% { bottom: -90px; } 50% { bottom: -100px; } 100% { bottom: -90px; }
}
@keyframes anim-leg-center { 0% { bottom: -90px; } 50% { bottom: -100px; } 100% { bottom: -90px; }
}
@-webkit-keyframes anim-leg-left { 0% { left: -30px; -webkit-transform: rotate(35deg); transform: rotate(35deg); -webkit-transform-origin: top; transform-origin: top; } 50% { left: -20px; -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top; transform-origin: top; } 100% { left: -30px; -webkit-transform: rotate(35deg); transform: rotate(35deg); -webkit-transform-origin: top; transform-origin: top; }
}
@keyframes anim-leg-left { 0% { left: -30px; -webkit-transform: rotate(35deg); transform: rotate(35deg); -webkit-transform-origin: top; transform-origin: top; } 50% { left: -20px; -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top; transform-origin: top; } 100% { left: -30px; -webkit-transform: rotate(35deg); transform: rotate(35deg); -webkit-transform-origin: top; transform-origin: top; }
}
@-webkit-keyframes anim-leg-right { 0% { left: 50%; -webkit-transform: rotate(-35deg); transform: rotate(-35deg); -webkit-transform-origin: top; transform-origin: top; } 50% { left: 50%; -webkit-transform: rotate(-60deg); transform: rotate(-60deg); -webkit-transform-origin: top; transform-origin: top; } 100% { left: 50%; -webkit-transform: rotate(-35deg); transform: rotate(-35deg); -webkit-transform-origin: top; transform-origin: top; }
}
@keyframes anim-leg-right { 0% { left: 50%; -webkit-transform: rotate(-35deg); transform: rotate(-35deg); -webkit-transform-origin: top; transform-origin: top; } 50% { left: 50%; -webkit-transform: rotate(-60deg); transform: rotate(-60deg); -webkit-transform-origin: top; transform-origin: top; } 100% { left: 50%; -webkit-transform: rotate(-35deg); transform: rotate(-35deg); -webkit-transform-origin: top; transform-origin: top; }
}
@-webkit-keyframes anim-eye-left { 0% { left: 30px; } 50% { left: 60px; } 100% { left: 30px; }
}
@keyframes anim-eye-left { 0% { left: 30px; } 50% { left: 60px; } 100% { left: 30px; }
}
@-webkit-keyframes anim-float { 0% { top: 0; } 50% { top: 20px; } 100% { top: 0; }
}
@keyframes anim-float { 0% { top: 0; } 50% { top: 20px; } 100% { top: 0; }
}
@-webkit-keyframes anim-wave { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes anim-wave { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
.squid { position: relative; -webkit-animation: anim-float 2s infinite; animation: anim-float 2s infinite; position: relative;
}
.squid__tail { width: 25px; height: 45px; border-radius: 25px; background: #8fd2fe; position: absolute; left: 50%; -webkit-transform: translateX(-50%) rotate(-30deg); transform: translateX(-50%) rotate(-30deg); top: -25px; box-shadow: #FD3265 -6px -5px 0 3px; -webkit-animation: anim-tail 2s infinite; animation: anim-tail 2s infinite;
}
.squid__tail:after { content: ''; width: 14px; height: 14px; border-radius: 7px; position: absolute; background: #FD3265; top: -1px; left: 8px;
}
.squid__head { width: 200px; height: 200px; background-image: -webkit-linear-gradient(#F8268F, #FD3265); background-image: linear-gradient(#F8268F, #FD3265); border-radius: 100px; position: relative;
}
.squid__eyes { width: 40px; height: 40px; border-radius: 30px; background: #000; position: absolute; top: 80px; left: 40px; box-shadow: #fff 0 0 0 10px, rgba(0, 0, 0, 0.2) -20px 30px 0 -5px, #000 80px 0 0 0px, #fff 80px 0 0 10px, rgba(0, 0, 0, 0.2) 90px 30px 0 -5px, rgba(255, 255, 255, 0.3) -10px -60px 0 -15px, rgba(255, 255, 255, 0.3) 10px -70px 0 -10px; -webkit-animation: anim-eye-left 2s infinite; animation: anim-eye-left 2s infinite;
}
.squid__mouth { position: absolute; bottom: 20px; width: 30px; height: 15px; background: #F8268F; border-radius: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 50px; box-shadow: #000 0 7px 0 5px;
}
.squid__legs { width: 50px; height: 120px; border-radius: 25px; background: #FD3265; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: -90px; -webkit-animation: anim-leg-center 2s infinite; animation: anim-leg-center 2s infinite;
}
.squid__legs:after, .squid__legs:before { content: ''; width: 50px; height: 110px; border-radius: 25px; background: #FD3265; position: absolute; left: 30px; -webkit-transform: rotate(-35deg); transform: rotate(-35deg); -webkit-animation: anim-leg-right 2s infinite; animation: anim-leg-right 2s infinite;
}
.squid__legs:before { left: -30px; -webkit-transform: rotate(35deg); transform: rotate(35deg); -webkit-animation: anim-leg-left 2s infinite; animation: anim-leg-left 2s infinite;
}
.wave, .wave-2 { position: absolute; height: 3000px; width: 3000px; bottom: -2900px; background: #28a9ff; opacity: .5; border-radius: 40%; -webkit-animation: anim-wave 10s infinite; animation: anim-wave 10s infinite; z-index: 2;
}
.wave-2 { background: #007dd1; opacity: .2; height: 3050px; width: 3500px; bottom: -3200px;
}
@-webkit-keyframes anim-bubble { to { opacity: 1; box-shadow: #fff -50px -200px 0 2px, #fff 50px -300px 0 7px, #fff 160px -400px 0 5px, #fff 100px -500px 0 3px; }
}
@keyframes anim-bubble { to { opacity: 1; box-shadow: #fff -50px -200px 0 2px, #fff 50px -300px 0 7px, #fff 160px -400px 0 5px, #fff 100px -500px 0 3px; }
}
.bubbles { width: 5px; height: 5px; border-radius: 2.5px; background: #fff; opacity: 0; -webkit-animation: anim-bubble 3s infinite linear; animation: anim-bubble 3s infinite linear; box-shadow: #fff -50px -50px 0 2px, #fff 50px -110px 0 7px, #fff 160px -70px 0 5px, #fff 100px -80px 0 5px;
}
Cute animated swimming Squid made in pure CSS - Script Codes
Cute animated swimming Squid made in pure CSS - Script Codes
Home Page Home
Developer Vijay Gupta
Username ivijaygupta
Uploaded November 08, 2022
Rating 4
Size 4,121 Kb
Views 8,096
Do you need developer help for Cute animated swimming Squid made in pure 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!

Vijay Gupta (ivijaygupta) Script Codes
Name
Bird
A Pen by Vijay Gupta
IOS like wobbling effect with pure CSS3
Single element checkbox
Css3 Shapely Dino...inspired by Dribbble shot by Jason Smith
Toggle Password Field Visibility with a Pure CSS3 Toggle Switch
Create amazing SEO content 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!