Change your look...

Developer
Judith Neumann
Size
2,542 Kb
Views
24,288
  1. Change your look... Previews
  2. Change your look... HTML Codes
  3. Change your look... CSS Codes

How do I make an change your look...?

Only css inspired in LoadingGirl by Rex Han on dribbble.... What is a change your look...? How do you make a change your look...? This script and codes were developed by Judith Neumann on 13 October 2022, Thursday.

Change your look... Previews
IQ Test

Change your look... - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Change your look...</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="girl"> <div class="cabello"></div> <div class="cabello3"></div> <div class="cabello5"></div> <div class="cara"> <div class="ojos"><span class="iris"></span></div> <div class="rubor"></div> <div class="boca"></div> <div class="cuello"></div> </div> <div class="flequi"></div> <div class="flequi3"></div> <div class="flequi5"></div> <div>
</div>
</body>
</html>

Change your look... - Script Codes CSS Codes

body{ background:#62a1fb
}
.container{ position:relative; width:500px; height:300px; margin:221px auto;
}
.cara{ position:absolute; width:132px; height:132px; border-radius:100%; background:#ffeadb; margin:65px 175px;
}
.ojos{ position:absolute; width:30px; height:30px; border-radius:100%; border-top:9px solid black; margin: 65px 12px;
}
.ojos::before{ content:""; display:block; width:30px; height:30px; border-radius:100%; background:black; margin: -17px 80px
}
.ojos::after{ content:""; display:block; width:6px; height:6px; border-radius:100%; background:white; margin:-17px 97px
}
.iris{ position:absolute; width:12px; height:12px; border-radius:100%; background:white; margin:-12px 83px
}
.rubor{ position:absolute; width:30px; height:12px; border-radius:100%; background:#fea4a4; margin:93px 13px
}
.rubor::before{ content:""; display:block; width:30px; height:12px; border-radius:100%; background:#fea4a4; margin:0px 75px
}
.boca{ position:absolute; width:25px; height:25px; border-radius:0 0 21px 21px; background:#ff6666; margin: 102px 55px; overflow:hidden;
}
.boca::before{ content:""; display:block; width:27px; height:21px; border-radius:100%; background:#ff9898; margin:9px 0;
}
.cuello{ position:absolute; border-bottom: 33px solid #ffeadb; border-left: 3px solid transparent; border-right: 3px solid transparent; height: 0; width: 21px; margin:129px 57px;
}
.cuello::before{ content:""; display:block; width:117px; height:63px; border-radius:90px 90px 0 0; background:#ff7373; margin:25px -46px;
}
.cuello::after{ content:""; display:block; width:40px; height:27px; border-radius: 30px 30px 152px 152px; background:white; margin:-90px -9px;
}
.cabello{ position:absolute; width:162px; height:80px; border-radius:172px 172px 0 0; background:black; margin: 30px 162px;
opacity:1; animation: c 2s linear infinite; -moz-animation: c 2s linear infinite; -webkit-animation: c 2s linear infinite; -o-animation: c 2s linear infinite;
}
.cabello::before{ content:""; display:block; border-bottom: 152px solid black; border-left: 30px solid transparent; border-right: 30px solid transparent; height: 0; width: 160px; margin:70px -29px;
}
.cabello::after{ content:""; display:block; width:223px; height:50px; border-radius:100%; background:black; margin:-99px -31px; border-bottom:5px solid #5b95e5;
}
.flequi{ position:absolute; width:160px; height:80px; border-radius:152px 152px 0 0; background:#121212; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); margin:35px 143px; animation: c 2s linear infinite; -moz-animation: c 2s linear infinite; -webkit-animation: c 2s linear infinite; -o-animation: c 2s linear infinite;
}
.cabello3{ position:absolute; width:172px; height:182px; opacity:0; border-radius:100%; background:black; margin: 40px 155px; animation: c3 2s linear infinite; -moz-animation: c3 2s linear infinite; -webkit-animation: c3 2s linear infinite; -o-animation: c3 2s linear infinite;
}
.flequi3{ position:absolute; width:172px; height:85px; opacity:0; border-radius:172px 172px 0 0; background:#121212; margin:35px 155px; animation: c3 2s linear infinite; -moz-animation: c3 2s linear infinite; -webkit-animation: c3 2s linear infinite; -o-animation: c3 2s linear infinite;
}
.flequi3::before{ content:""; display:block; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 30px solid #ffeadb;; margin:55px 45px;
}
.cabello5{ position:absolute; width:182px; height:80px; opacity:0; border-radius:182px 182px 0 0; border-top:55px solid black; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); margin:60px 172px; animation: c5 2s linear infinite; -moz-animation: c5 2s linear infinite; -webkit-animation: c5 2s linear infinite; -o-animation: c5 2s linear infinite;
}
.flequi5{ position:absolute; width:165px; height:90px; opacity:0; border-radius:182px 182px 0 0; border-top:43px solid #121212; -webkit-transform: rotate(-73deg); -moz-transform: rotate(-73deg); -ms-transform: rotate(-73deg); -o-transform: rotate(-73deg); transform: rotate(-73deg); margin:60px 142px; animation: c5 1s linear infinite; -moz-animation: c5 1s linear infinite; -webkit-animation: c5 2s linear infinite; -o-animation: c5 1s linear infinite;
}
.flequi5:before{ content:""; display:block; width:112px; height:55px; border-radius:100%; background:#121212; margin:-12px 63px; -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); -ms-transform: rotate(40deg); -o-transform: rotate(40deg); transform: rotate(40deg);
}
.cabello5:before{ content:""; display:block; width:60px; height:60px; border-radius:100px; background:black; margin:-12px -30px;
}
@-webkit-keyframes c { 0% {opacity: 1; } 25%{opacity:1;} 50%{opacity: 0; } 70%{opacity: 0; } 90%{opacity: 0; } 95%{opacity: 0; } 100% {opacity: 0; } }
@-moz-keyframes c { 0% {opacity: 1; } 25%{opacity:1;} 50%{opacity: 0; } 70%{opacity: 0; } 90%{opacity: 0; } 95%{opacity: 0; } 100% {opacity: 0; } }
@eyframes c { 0% {opacity: 1; } 25%{opacity:1;} 50%{opacity: 0; } 70%{opacity: 0; } 90%{opacity: 0; } 95%{opacity: 0; } 100% {opacity: 0; } }
@-webkit-keyframes c3{ 0% {opacity: 0; } 25%{opacity:0;} 50%{opacity: 1; } 70%{opacity: 1; } 90%{opacity: 0; } 95%{opacity: 0; } 100% {opacity: 0; } }
@-moz-keyframes c3{ 0% {opacity: 0; } 25%{opacity:0;} 50%{opacity: 1; } 70%{opacity: 1; } 90%{opacity: 0; } 95%{opacity: 0; } 100% {opacity: 0; } }
@keyframes c3{ 0% {opacity: 0; } 25%{opacity:0;} 50%{opacity: 1; } 70%{opacity: 1; } 90%{opacity: 0; } 95%{opacity: 0; } 100% {opacity: 0; } }
@-webkit-keyframes c5{ 0% {opacity: 0; } 25%{opacity:0;} 50%{opacity: 0; } 70%{opacity: 0; } 90%{opacity: 1; } 95%{opacity: 1; } 100% {opacity: 1; } }
@-moz-keyframes c5{ 0% {opacity: 0; } 25%{opacity:0;} 50%{opacity: 0; } 70%{opacity: 0; } 90%{opacity: 1; } 95%{opacity: 1; } 100% {opacity: 1; } }
@-keyframes c5{ 0% {opacity: 0; } 25%{opacity:0;} 50%{opacity: 0; } 70%{opacity: 0; } 90%{opacity: 1; } 95%{opacity: 1; } 100% {opacity: 1; } }
Change your look... - Script Codes
Change your look... - Script Codes
Home Page Home
Developer Judith Neumann
Username judag
Uploaded October 13, 2022
Rating 4
Size 2,542 Kb
Views 24,288
Do you need developer help for Change your look...?

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!

Judith Neumann (judag) Script Codes
Name
Css or Czz..
Landscapes animated icons...
Sad kitty
Forest
Be in touch
Clo clo
Css animals
In the beach
Code and view
Wait for a cofee...
Create amazing captions 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!