Valhalla Codes - Pure CSS3 teddy

Home
Codes
HTML/CSS
Pure CSS3 teddy
(3)
Created by CPUkiller on 18.01.14 03:06
An animated teddy with balloon in pure CSS3 and HTML. No Javascript or Images used.
Check it out here: Demo Link
<html>
<head>
<style>
body {
	background-color:lightblue;
	overflow-x: hidden;
	overflow-y: hidden;
}
.cloudpart1
{
	width:200px;
	height:150px;
	background:white;
	-moz-border-radius:50%;
	border-radius:50%;
	position:relative;
	top: 500px;
}
.cloudpart2
{
	width:150px;
	height:150px;
	background:white;
	-moz-border-radius:50%;
	border-radius:50%;
	position:relative;
	top: 300px;
	left: 30px;
}
.cloudpart3
{
	width:200px;
	height:200px;
	background:white;
	-moz-border-radius:50%;
	border-radius:50%;
	position:relative;
	top: 130px;
	left: 80px;
}
.cloudpart4
{
	width:230px;
	height:230px;
	background:white;
	-moz-border-radius:50%;
	border-radius:50%;
	position:relative;
	top: -50px;
	left: 120px;
}
.cloudpart5
{
	width:200px;
	height:200px;
	background:white;
	-moz-border-radius:50%;
	border-radius:50%;
	position:relative;
	top: -280px;
	left: 200px;
}
.cloudpart6
{
	width:150px;
	height:160px;
	background:white;
	-moz-border-radius:50%;
	border-radius:50%;
	position:relative;
	top: -450px;
	left: 320px;
}
.form2
{
	position:relative;
	top: -1430px;
	left: 470px;
	z-index:-3;
}
.cloudpart7
{
	width:200px;
	height:130px;
	background:white;
	-moz-border-radius:50%;
	border-radius:50%;
	position:relative;
	top: 500px;
}
.cloudpart8
{
	width:130px;
	height:130px;
	background:white;
	-moz-border-radius:50%;
	border-radius:50%;
	position:relative;
	top: 300px;
	left: 30px;
}
.cloudpart9
{
	width:150px;
	height:150px;
	background:white;
	-moz-border-radius:50%;
	border-radius:50%;
	position:relative;
	top: 150px;
	left: 80px;
}
.cloudpart10
{
	width:130px;
	height:100px;
	background:white;
	-moz-border-radius:50%;
	border-radius:50%;
	position:relative;
	top: 0px;
	left: 120px;
}
.cloudpart11
{
	width:100px;
	height:100px;
	background:white;
	-moz-border-radius:50%;
	border-radius:50%;
	position:relative;
	top: -70px;
	left: 200px;
}
.cloudpart12
{
	width:300px;
	height:140px;
	background:white;
	-moz-border-radius:50%;
	border-radius:50%;
	position:relative;
	top: -130px;
	left: 100px;
}
.rainbow{
	width: 550px;
	height: 400px;
	background:transparent;
	border-top: yellow solid 24px;
	-moz-border-radius: 50%;
	border-radius: 50%;
	box-shadow: 0px -22px 0px 0px orange, 0px -40px 0px 0px red, 0px -58px 0px 0px purple, 0px -76px 0px 0px blue, 0px -94px 0px 0px green;
	position: relative;
	top:-1630px;
	left:210px;
	z-index:-2;
	-moz-transform:rotate(-50deg);
}
.teddy{
	position:absolute;
	top:400;
	left:600px;
	animation:ted_animation 30s infinite linear;
	-moz-animation:ted_animation 30s infinite linear;
}
@keyframes ted_animation
{
	0%   {transform: translate:(0px, 0px);}
	100%  {transform: translate:(-1350px,-700px);}
}
@-moz-keyframes ted_animation
{
	0%   {-moz-transform: translate(0px, 0px);}
	100%  {-moz-transform: translate(-1350px, -700px);}
}
.tedhead{
	width: 70px;
	height: 70px;
	background: saddlebrown;
	-moz-border-radius: 50%;
	border-radius: 50%;
	box-shadow: inset 1px -1px 1px 0px #220000;
	position: absolute; 
	top:300px;
	left: 500px;
	z-index:3;
}
.ear{
	width: 25px;
	height: 25px;
	background: saddlebrown;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute; 
	top:292px;
	left: 510px;
	z-index:1;
}
.ear2{
	width: 27px;
	height: 27px;
	background: saddlebrown;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute; 
	top:310px;
	left: 550px;
	z-index:4;
}
.earin{
	width: 10px;
	height: 10px;
	background: DarkGoldenrod;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute; 
	top:297px;
	left: 515px;
	z-index:2;
}
.earin2{
	width: 10px;
	height: 10px;
	background: DarkGoldenrod;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute; 
	top:317px;
	left: 560px;
	z-index:5;
}
.eye{
	width: 13px;
	height: 18px;
	background: white;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute; 
	top:313px;
	left: 508px;
	z-index:4;
	transform: rotate(20deg);
	-moz-transform: rotate(20deg);
}
.eye2{
	width: 13px;
	height: 18px;
	background: white;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute; 
	top:323px;
	left: 531px;
	z-index:4;
	transform: rotate(20deg);
	-moz-transform: rotate(20deg);
}
.eyespot{
	width: 10px;
	height: 10px;
	background: black;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute; 
	top:314px;
	left: 510px;
	z-index:5;
	transform: rotate(20deg);
	-moz-transform: rotate(20deg);
}
.eyespot2{
	width: 10px;
	height: 10px;
	background: black;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute; 
	top:324px;
	left: 533px;
	z-index:5;
	transform: rotate(20deg);
	-moz-transform: rotate(20deg);
}
.nose{
	width: 10px;
	height: 10px;
	background: black;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute; 
	top:335px;
	left: 515px;
	z-index:5;
	transform: rotate(20deg);
	-moz-transform: rotate(20deg);
}
.mouth{
	width: 20px;
	height: 10px;
	background:transparent;
	border-bottom: black solid 5px;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute;
	top:339px;
	left:509px;
	z-index:5;
	-moz-transform:rotate(25deg);
	transform: rotate(25deg);
}
.belly{
	width: 90px;
	height: 100px;
	background: saddlebrown;
	-moz-border-radius: 50%;
	border-radius: 50%;
	box-shadow: inset 1px -1px 1px 0px #220000;
	position: absolute; 
	top: 350px;
	left: 475px;
	z-index:1;
}
.arml{
	width: 30px;
	height: 80px;
	background: saddlebrown;
	-moz-border-radius: 50%;
	border-radius: 50%;
	box-shadow: inset 1px -1px 1px 0px #220000;
	position: absolute; 
	top: 305px;
	left: 475px;
	z-index:0;
}
.armr{
	width: 35px;
	height: 80px;
	background: saddlebrown;
	-moz-border-radius: 50%;
	border-radius: 50%;
	box-shadow: inset 1px -1px 1px 0px #220000;
	position: absolute; 
	top: 365px;
	left: 545px;
	z-index:3;
	transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
}
#ex{
	animation:animated_ex 3s infinite linear;
	-moz-animation:animated_ex 3s infinite linear;
}
@-moz-keyframes animated_ex
{
    0%   {-moz-transform: rotate(-12deg);}
	50%   {-moz-transform: rotate(-20deg);}
	100% {-moz-transform: rotate(-12deg);}
}
@keyframes animated_ex
{
    0%   {transform: rotate(-12deg);}
	50%   {transform: rotate(-20deg);}
	100% {transform: rotate(-12deg);}
}
.legr{
	width: 35px;
	height: 80px;
	background: saddlebrown;
	-moz-border-radius: 50%;
	border-radius: 50%;
	box-shadow: inset 1px -1px 1px 0px #220000;
	position: absolute; 
	top: 420px;
	left: 535px;
	z-index:2;
	transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
}
.legl{
	width: 35px;
	height: 80px;
	background: saddlebrown;
	-moz-border-radius: 50%;
	border-radius: 50%;
	box-shadow: inset 1px -1px 1px 0px #220000;
	position: absolute; 
	top: 420px;
	left: 495px;
	z-index:0;
	transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
}
.balloon{
	position: absolute;
	top: 100px;
	left: 440px;
	width: 100px; 
	height: 90px;
}
.balloon:before,
.balloon:after {
	position: absolute;
	content: "";
	left: 50px;
	top: 0;
	width: 50px;
	height: 80px;
	background: red;
	-moz-border-radius: 50px 50px 0 0;
	border-radius: 50px 50px 0 0;
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-moz-transform-origin: 0 100%;
	transform-origin: 0 100%;
}
.balloon:after {
	left: 0;
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
	-moz-transform-origin: 100% 100%;
	transform-origin :100% 100%;
}
.balloonknot{
	width: 10px;
	height: 5px;
	background: red;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute; 
	top:175px;
	left: 485px;
	z-index:5;
}
.string{
	width: 2px;
	height: 150px;
	background: black;
	position: absolute; 
	top: 180px;
	left: 490px;
	z-index:0;
}
</style>
</head>
<body>
	<div class="cloudpart1"></div>
	<div class="cloudpart2"></div>
	<div class="cloudpart3"></div>
	<div class="cloudpart4"></div>
	<div class="cloudpart5"></div>
	<div class="cloudpart6"></div>
	<div class="form2">
		<div class="cloudpart7"></div>
		<div class="cloudpart8"></div>
		<div class="cloudpart9"></div>
		<div class="cloudpart10"></div>
		<div class="cloudpart11"></div>
		<div class="cloudpart12"></div>
	</div>
	<div class="rainbow"></div>
	<div class="teddy">
		<div class="tedhead"></div>
		<div class="ear"></div>
		<div class="ear2"></div>
		<div class="earin"></div>
		<div class="earin2"></div>
		<div class="eye"></div>
		<div class="eye2"></div>
		<div class="eyespot"></div>
		<div class="eyespot2"></div>
		<div class="nose"></div>
		<div class="mouth"></div>
		<div class="belly"></div>
		<div class="arml"></div>
		<div class="armr" id="ex"></div>
		<div class="legl" id="ex"></div>
		<div class="legr" id="ex"></div>
		<div class="ballon"></div>
		<div class="ballonknot"></div>
		<div class="string"></div>
	</div>
</body>
</html>
Last updated by ynori7 on 18.05.14 13:59
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Download this code in plain text format here