Polar bear

Developer

Size

3,471 Kb

Views

10,120

Polar bear Previews
Polar bear HTML Codes
Polar bear CSS Codes
Polar bear JS Codes

How do I make an polar bear?

Inspired by this picture https://theyearidiscoveredsagmeister.files.wordpress.com/2013/03/sarastrand_polarbear_530.jpg. What is a polar bear? How do you make a polar bear? This script and codes were developed by Andreas Nylin on 30 September 2022, Friday.

Polar bear Previews

Polar bear - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Polar bear</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="ground"></div>
<div class="mountains"> <div class="mountain"></div> <div class="mountain"></div> <div class="mountain"></div> <div class="mountain"></div> <div class="mountain"></div>
</div>
<div class="trees"> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div> <div class="tree"></div>
</div>
<div class="bear"> <div class="body"> <div class="ear ear-left"></div> <div class="ear ear-right"></div> <div class="eye eye-left"></div> <div class="eye eye-right"></div> <div class="nose-mouth"></div> <div class="scarf"></div> <div class="arm arm-left"></div> <div class="arm arm-right"></div> <div class="leg leg-left"></div> <div class="leg leg-right"></div> </div>
</div>
<div class="flake-wrapper"> <div class="flake"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Polar bear - Script Codes CSS Codes

html,
body { margin: 0; width: 100%; height: 100%; overflow: hidden;
}
body { background: #0D1846; font-size: 12px;
}
@media screen and (min-width: 481px) { body { font-size: 15px; }
}
.bear { position: absolute; top: 0; left: 0; right: 0; bottom: 4em; width: 10em; height: 22em; margin: auto auto 0;
}
.body,
.body div{ box-sizing: border-box; position: absolute;
}
.body { background: #fff; width: 10em; height: 22em; border-top-left-radius: 35% 20%; border-top-right-radius: 35% 20%; border-bottom-left-radius: 35% 5%; border-bottom-right-radius: 35% 5%;
}
.ear { width: 3em; height: 3em; background: #fff; top: -.75em; left: -.75em; border-radius: 50% 50% 0 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
}
.ear-right { left: auto; right: -.75em; -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.ear:before { content: ''; position: absolute; top: .6em; left: .6em; width: 1.8em; height: 1.6em; background: #BDE3F6; border-radius: 50% 50% 0 0;
}
.eye { width: 1em; height: 1em; background: black; top: 10%; left: 25%; border-radius: 50%; -webkit-animation: blink 15s linear infinite; animation: blink 15s linear infinite;
}
.eye-right { left: auto; right: 25%;
}
.nose-mouth { width: 3em; height: 2em; background: #000; top: 3.5em; left: 3.5em; border-radius: 50%;
}
.nose-mouth:before { content: ''; position: absolute; top: .5em; left: .5em; width: .5em; height: .5em; background: #fff; border-radius: 50%;
}
.scarf { content: ''; position: absolute; top: 27.5%; left: -.1em; width: 102%; height: 2em; background: #BDE3F6; border-radius: .1em; z-index: 2;
}
.scarf:after { content: ''; position: absolute; top: -.25em; right: -1em; border: solid 2em transparent; border-right: solid 2em #BDE3F6; width: 2.5em; height: 7em; border-radius: 50%; -webkit-transform: rotate(-10deg); transform: rotate(-10deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; z-index: 1;
}
.arm { width: 1.75em; height: 8em; background: #fff; top: 47.5%; left: 0; border-radius: 0 0 1em 1em; -webkit-transform: rotate(25deg); transform: rotate(25deg); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; z-index: 2;
}
.arm-right { left: auto; right: 0; border-radius: 0 0 1em 1em; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); -webkit-transform-origin: 0 0; transform-origin: 0 0;
}
.leg { width: 1.75em; height: 5em; background: #fff; bottom: -3em; left: 0; border-radius: 0 0 1em 1em;
}
.leg-right { left: auto; right: 0;
}
@-webkit-keyframes blink { 1% { margin-top: 3%; height: .01em; } 2% { margin-top: 0; height: 1em; } 100% { height: 1em; }
}
@keyframes blink { 1% { margin-top: 3%; height: .01em; } 2% { margin-top: 0; height: 1em; } 100% { height: 1em; }
}
/* Snow */
.flake-wrapper,
.flake-wrapper1,
.flake-wrapper2,
.flake-wrapper3,
.flake-wrapper4 { -webkit-animation: fall 20s linear infinite; animation: fall 20s linear infinite;
}
.flake-wrapper2 { -webkit-animation-duration: 18s; animation-duration: 18s;
}
.flake-wrapper3 { -webkit-animation-duration: 15s; animation-duration: 15s;
}
.flake-wrapper4 { -webkit-animation-duration: 12s; animation-duration: 12s;
}
.flake,
.flake1,
.flake2,
.flake3,
.flake4 { position: absolute; background: white; width: 10px; height: 10px; border-radius: 50%; -webkit-animation: wind 2s ease-in-out infinite alternate; animation: wind 2s ease-in-out infinite alternate;
}
.flake2 { -webkit-animation-duration: 2.5s; animation-duration: 2.5s;
}
.flake3 { -webkit-animation-duration: 2.2s; animation-duration: 2.2s;
}
.flake4 { -webkit-animation-duration: 1.5s; animation-duration: 1.5s;
}
.flake-small { width: 7px; height: 7px;
}
.flake-large { width: 12px; height: 12px;
}
@-webkit-keyframes wind { 0% { -webkit-transform: translate(100px, 0); transform: translate(100px, 0); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@keyframes wind { 0% { -webkit-transform: translate(100px, 0); transform: translate(100px, 0); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@-webkit-keyframes fall { 0% { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } 100% { -webkit-transform: translate(20vw, 100vh); transform: translate(20vw, 100vh); }
}
@keyframes fall { 0% { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } 100% { -webkit-transform: translate(20vw, 100vh); transform: translate(20vw, 100vh); }
}
/* Landscape */
.ground { position: absolute; bottom: 0; left: 0; right: 0; height: 6em; background: #0A1338;
}
.trees { position: absolute; bottom: 6em; height: 5em; overflow: hidden; text-align: center; white-space: nowrap;
}
.tree { display: inline-block; width: 0; height: 0; border-style: solid; border-width: 0 2.25em 5em 2.25em; border-color: transparent transparent #0A1338 transparent; margin: 0 -.1em;
}
.mountains { position: absolute; bottom: 6em; height: 12em; overflow: hidden; text-align: center;
}
.mountain { display: inline-block; width: 0; height: 0; border-style: solid; border-width: 0 15em 12em 15em; border-color: transparent transparent #1D2752 transparent;
}

Polar bear - Script Codes JS Codes

var flake = document.querySelector('.flake-wrapper');
function init() { var n = 100; while(n--) { generateFlake(rnd(-window.innerHeight, -20), rnd(-50, 110)); }
}
function generateFlake(top, left, speed, delay) { var newFlakeWrapper = flake.cloneNode(true), newFlake = newFlakeWrapper.querySelector('.flake') style = newFlake.style, flakeSize = rnd(0,2); top = top || rnd(-100, -10); left = left || rnd(-50, 100); newFlake.className = 'flake' + rnd(1, 4); newFlakeWrapper.className = 'flake-wrapper' + rnd(1, 4); if(flakeSize === 0) { newFlake.className += ' ' + 'flake-small'; } else if(flakeSize === 2) { newFlake.className += ' ' + 'flake-large'; } setPrefixedStyle(newFlakeWrapper, 'animationDelay', rnd(-30,0) + 's'); setPrefixedStyle(newFlake, 'animationDelay', rnd(-2,0) + 's'); style.left = left + 'vw'; document.body.appendChild(newFlakeWrapper);
}
function rnd(min, max) { return Math.floor(min + Math.random() * (max - min + 1));
}
function setPrefixedStyle(element, name, value) { var pfx = ['webkit', 'moz', 'MS', 'o', '']; for (var i = 0; i < pfx.length; i++) { element.style[pfx[i]+name] = value; }
}
init();

Home Page	Home
Developer	Andreas Nylin
Username	andreasnylin
Uploaded	September 30, 2022
Rating	3
Size	3,471 Kb
Views	10,120

Do you need developer help for Polar bear?

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!

Andreas Nylin (andreasnylin) Script Codes

Name	Size
CSS 3D Cube	2,984 Kb
CSS 3D Radio buttons	1,650 Kb
Mega Man	2,844 Kb
Sloth	2,080 Kb
HTML Dialog Element Test	2,902 Kb
CSS target the middle element	1,657 Kb
CSS 3D Visualizer	0 Kb
CSS checkbox and radio button	2,208 Kb
Responsive fixed image, fluid content	2,056 Kb
Code Monkey	2,610 Kb

Create amazing blog posts 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!

Similar Scripts & Codes

Name	Username	Size
A Pen by Jay	Jaycode	3,784 Kb
Iron Man SVG Loading Animation	Andythayer	3,069 Kb
A Pen by Kevin	Kevinkenger	2,642 Kb
Mesmerizing octopus	Jllodra	3,549 Kb
Scifi-style Interative Form	Aaronchuo	4,566 Kb
Impress JS Algorhytmic Generator	Jeffscottward	7,906 Kb
Right Click Menu	Anodpixels	2,252 Kb
Popover Example	Seanboom	2,429 Kb
Improved Page Flipping Effect	Usaphp	5,201 Kb
Sass random color animation	Jotavejv	4,827 Kb

Do you want hide your ip address?

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!