Code and view

Developer

Size

3,096 Kb

Views

18,216

Code and view Previews
Code and view HTML Codes
Code and view CSS Codes

How do I make an code and view?

Only css inspired on dribbble...Animation 1 of 7: Development from Jennifer Armstrong.... What is a code and view? How do you make a code and view? This script and codes were developed by Judith Neumann on 13 October 2022, Thursday.

Code and view Previews

Code and view - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Code and view</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="compu"> <span class="brow"></span> <div class="a"> <span class="l1"></span> <span class="l2"></span> <span class="l3"></span> <span class="l4"></span> <span class="l5"></span> <span class="l6"></span> <span class="l7"></span> </div> <div class="b"> <span class=d1></span> <span class=d2></span> <span class=d3></span> <span class=d4></span> <span class=d5></span> </div> </div>
</div>
</body>
</html>

Code and view - Script Codes CSS Codes

body{ background:#1d4a62;
}
.container{ width:50%; height:700px; margin:90px auto;
}
.compu{ position:absolute; width:450px; height:291px; background:#5f666f; border-radius:12px; margin:0 251px; border-bottom:70px solid #b6b8b3;
}
.compu::before{ content:""; display:block; border-bottom: 70px solid #7d939a; border-left: 30px solid transparent; border-right: 30px solid transparent; height: 0; width: 75px; margin:360px 162px
}
.compu::after{ content:""; display:block; width:152px; height:12px; background:#b6b8b3; margin:-370px 152px; border-radius:3px;
}
.brow{ position:absolute; width:12px; height:12px; border-radius:100%; background:lightblue; margin:-765px 241px; z-index:3;
}
.brow::before{ content:""; display:block; width:12px; height:12px; border-radius:100%; background:pink; margin:0px 21px; z-index:3;
}
.brow::after{ content:""; display:block; width:12px; height:12px; border-radius:100%; background:lightgreen; margin:-12px 43px; z-index:3;
}
.a{ position:absolute; width:201px; height:271px; background:#222d41; margin:-770px 21px;
}
.a::before{ content:""; font-family:verdana; color:white; display:block; width:201px; height:21px; background:rgba(0,0,0,.3);
}
.b{ position:absolute; width:201px; height:271px; background:#ebf4ff; margin:-770px 231px;
}
.b::before{ content:""; color:black; display:block; width:201px; height:21px; background:rgba(0,0,0,.3);
}
.l1{ position:absolute; width:30px; height:7px; background:#e35a5a; margin:30px 21px; animation: l1 3s linear infinite; -moz-animation: l1 3s linear infinite; -webkit-animation: l1 3s linear infinite;
}
.l2{ position:absolute; width:50px; height:7px; background:#df9935; margin: 40px 21px; animation: l2 3s linear infinite; -moz-animation: l2 3s linear infinite; -webkit-animation: l2 3s linear infinite;
}
.l3{ position:absolute; width:21px; height:7px; background:white; margin:50px 21px; animation: l3 3s linear infinite; -moz-animation: l3 3s linear infinite; -webkit-animation: l3 3s linear infinite;
}
.l4{ position:absolute; width:70px; height:7px; background:#9e9e9e; margin: 83px 19px; animation: l4 3s linear infinite; -moz-animation: l4 3s linear infinite; -webkit-animation: l4 3s linear infinite;
}
.l4::before{ content:""; display:block; width:70px; height:7px; background:#9e9e9e; margin: 0px 90px; animation: l4 3s linear infinite; -moz-animation: l4 3s linear infinite; -webkit-animation: l4 3s linear infinite;
}
.l5{ position:absolute; width:40px; height:7px; background:#e35a5a; margin:121px 21px; animation: l5 3s linear infinite; -moz-animation: l5 3s linear infinite; -webkit-animation: l5 3s linear infinite;
}
.l5::before{ content:""; display:block; width:40px; height:7px; background:#df9935; margin: 0px 60px; animation: l5 3s linear infinite; -moz-animation: l5 3s linear infinite; -webkit-animation: l5 3s linear infinite;
}
.l5::after{ content:""; display:block; width:40px; height:7px; background:#00aaef; margin: -7px 121px; animation: l5 3s linear infinite; -moz-animation: l5 3s linear infinite; -webkit-animation: l5 3s linear infinite;
}
.l6{ position:absolute; width:70px; height:7px; background:gray; margin:152px 21px; animation: l6 3s linear infinite; -moz-animation: l6 3s linear infinite; -webkit-animation: l6 3s linear infinite;
}
.l6::before{ content:""; display:block; width:30px; height:7px; background:gray; margin:0px 80px; animation: l66 3s linear infinite; -moz-animation: l66 3s linear infinite; -webkit-animation: l66 3s linear infinite;
}
.l7{ position:absolute; width:162px; height:7px; background:#00aaef; margin:212px 21px; animation: l7 3s linear infinite; -moz-animation: l7 3s linear infinite; -webkit-animation: l7 3s linear infinite;
}
.d1{ position:absolute; width:201px; height:50px; background:#e35a5a; animation: d1 3s linear infinite; -moz-animation: d1 3s linear infinite; -webkit-animation: d1 3s linear infinite;
}
.d2{ position:absolute; width:201px; height:30px; background:#df9935; margin:50px 0; animation: d2 3s linear infinite; -moz-animation: d2 3s linear infinite; -webkit-animation: d2 3s linear infinite;
}
.d3{ position:absolute; width:40px; height:12px; background:white; margin:57px 5px; animation: d3 3s linear infinite; -moz-animation: d3 3s linear infinite; -webkit-animation: d3 3s linear infinite;
}
.d3::before{ content:""; display:block; width:40px; height:12px; background:white; margin:0px 75px; animation: d3 3s linear infinite; -moz-animation: d3 3s linear infinite; -webkit-animation: d3 3s linear infinite;
}
.d3::after{ content:""; display:block; width:40px; height:12px; background:white; margin:-12px 150px; animation: d3 3s linear infinite; -moz-animation: d3 3s linear infinite; -webkit-animation: d3 3s linear infinite;
}
.d4{ position:absolute; width:40px; height:40px; background:#e35a5a; margin:121px 5px; animation: d5 3s linear infinite; -moz-animation: d5 3s linear infinite; -webkit-animation: d5 3s linear infinite;
}
.d4::before{ content:""; display:block; width:40px; height:40px; background:#df9935; margin:0px 75px; animation: d5 3s linear infinite; -moz-animation: d5 3s linear infinite; -webkit-animation: d5 3s linear infinite;
}
.d4::after{ content:""; display:block; width:40px; height:40px; background:#00aaef; margin:-40px 152px; animation: d5 3s linear infinite; -moz-animation: d5 3s linear infinite; -webkit-animation: d5 3s linear infinite;
}
.d5{ position:absolute; width:201px; height:50px; background:#00aaef; margin:199px 0px; animation: d7 3s linear infinite; -moz-animation: d7 3s linear infinite; -webkit-animation: d7 3s linear infinite;
}
@-webkit-keyframes l1 { 0% {opacity: 0;} 25% {opacity: 0;width:0;height:7;} 35% {opacity: 1;width:30px;height:7px;} 40% {opacity: 1;width:30px;height:7px; } 45% {opacity: 1; width:30px; height:7px; } 50% {opacity: 1; width:30px; height:7px; } 60% {opacity: 1; width:30px; height:7px; } 70% {opacity: 1; width:30px; height:7px;} 80% {opacity: 1; width:30px; height:7px;} 85% {opacity: 1; width:30px; height:7px;} 90% {opacity: 1; width:30px; height:7px;} 95% {opacity: 1; width:30px; height:7px;} 100% {opacity: 1; width:30px; height:7px;}
}
@-moz-keyframes l1 { 0% {opacity: 0;} 25% {opacity: 0;width:0;height:7;} 35% {opacity: 1;width:30px;height:7px;} 40% {opacity: 1;width:30px;height:7px; } 45% {opacity: 1; width:30px; height:7px; } 50% {opacity: 1; width:30px; height:7px; } 60% {opacity: 1; width:30px; height:7px; } 70% {opacity: 1; width:30px; height:7px;} 80% {opacity: 1; width:30px; height:7px;} 85% {opacity: 1; width:30px; height:7px;} 90% {opacity: 1; width:30px; height:7px;} 95% {opacity: 1; width:30px; height:7px;} 100% {opacity: 1; width:30px; height:7px;}
}
@keyframes l1 { 0% {opacity: 0;} 25% {opacity: 0;width:0;height:7;} 35% {opacity: 1;width:30px;height:7px;} 40% {opacity: 1;width:30px;height:7px; } 45% {opacity: 1; width:30px; height:7px; } 50% {opacity: 1; width:30px; height:7px; } 60% {opacity: 1; width:30px; height:7px; } 70% {opacity: 1; width:30px; height:7px;} 80% {opacity: 1; width:30px; height:7px;} 85% {opacity: 1; width:30px; height:7px;} 90% {opacity: 1; width:30px; height:7px;} 95% {opacity: 1; width:30px; height:7px;} 100% {opacity: 1; width:30px; height:7px;}
}
@-webkit-keyframes l2{ 0% {opacity: 0;} 25% {opacity: 0; width:0; height:7;} 35% {opacity: 0; width:0px; height:7px; } 40% {opacity: 1; width:50px; height:7px; } 45% {opacity: 1; width:50px; height:7px; } 50% {opacity: 1; width:50px; height:7px; } 60% {opacity: 1; width:50px; height:7px; } 70% {opacity: 1; width:50px; height:7px;} 80% {opacity: 1; width:50px; height:7px;} 85% {opacity: 1; width:50px; height:7px;} 90% {opacity: 1; width:50px; height:7px;} 95% {opacity: 1; width:50px; height:7px;} 100% {opacity: 1; width:50px; height:7px;}
}
@-moz-keyframes l2{ 0% {opacity: 0;} 25% {opacity: 0; width:0; height:7;} 35% {opacity: 0; width:0px; height:7px; } 40% {opacity: 1; width:50px; height:7px; } 45% {opacity: 1; width:50px; height:7px; } 50% {opacity: 1; width:50px; height:7px; } 60% {opacity: 1; width:50px; height:7px; } 70% {opacity: 1; width:50px; height:7px;} 80% {opacity: 1; width:50px; height:7px;} 85% {opacity: 1; width:50px; height:7px;} 90% {opacity: 1; width:50px; height:7px;} 95% {opacity: 1; width:50px; height:7px;} 100% {opacity: 1; width:50px; height:7px;}
}
@keyframes l2{ 0% {opacity: 0;} 25% {opacity: 0; width:0; height:7;} 35% {opacity: 0; width:0px; height:7px; } 40% {opacity: 1; width:50px; height:7px; } 45% {opacity: 1; width:50px; height:7px; } 50% {opacity: 1; width:50px; height:7px; } 60% {opacity: 1; width:50px; height:7px; } 70% {opacity: 1; width:50px; height:7px;} 80% {opacity: 1; width:50px; height:7px;} 85% {opacity: 1; width:50px; height:7px;} 90% {opacity: 1; width:50px; height:7px;} 95% {opacity: 1; width:50px; height:7px;} 100% {opacity: 1; width:50px; height:7px;}
}
@-webkit-keyframes l3{ 0% {opacity: 0;} 25% {opacity: 0; width:0; height:7;} 35% {opacity: 0; width:0px; height:7px; } 40% {opacity: 0; width:0px; height:7px; } 45% {opacity: 1; width:21px; height:7px; } 50% {opacity: 1; width:21px; height:7px; } 60% {opacity: 1; width:21px; height:7px; } 70% {opacity: 1; width:21px; height:7px;} 80% {opacity: 1; width:21px; height:7px;} 85% {opacity: 1; width:21px; height:7px;} 90% {opacity: 1; width:21px; height:7px;} 95% {opacity: 1; width:21px; height:7px;} 100% {opacity: 1; width:21px; height:7px;}
}
@-moz-keyframes l3{ 0% {opacity: 0;} 25% {opacity: 0; width:0; height:7;} 35% {opacity: 0; width:0px; height:7px; } 40% {opacity: 0; width:0px; height:7px; } 45% {opacity: 1; width:21px; height:7px; } 50% {opacity: 1; width:21px; height:7px; } 60% {opacity: 1; width:21px; height:7px; } 70% {opacity: 1; width:21px; height:7px;} 80% {opacity: 1; width:21px; height:7px;} 85% {opacity: 1; width:21px; height:7px;} 90% {opacity: 1; width:21px; height:7px;} 95% {opacity: 1; width:21px; height:7px;} 100% {opacity: 1; width:21px; height:7px;}
}
@keyframes l3{ 0% {opacity: 0;} 25% {opacity: 0; width:0; height:7;} 35% {opacity: 0; width:0px; height:7px; } 40% {opacity: 0; width:0px; height:7px; } 45% {opacity: 1; width:21px; height:7px; } 50% {opacity: 1; width:21px; height:7px; } 60% {opacity: 1; width:21px; height:7px; } 70% {opacity: 1; width:21px; height:7px;} 80% {opacity: 1; width:21px; height:7px;} 85% {opacity: 1; width:21px; height:7px;} 90% {opacity: 1; width:21px; height:7px;} 95% {opacity: 1; width:21px; height:7px;} 100% {opacity: 1; width:21px; height:7px;}
}
@-webkit-keyframes l4{ 0% {opacity: 0;} 25% {opacity: 0; width:0; height:7;} 35% {opacity: 0; width:0px; height:7px; } 40% {opacity: 0; width:0px; height:7px; } 45% {opacity: 0; width:0px; height:7px; } 50% {opacity: 1; width:70px; height:7px; } 60% {opacity: 1; width:70px; height:7px; } 70% {opacity: 1; width:70px; height:7px;} 80% {opacity: 1; width:70px; height:7px;} 85% {opacity: 1; width:70px; height:7px;} 90% {opacity: 1; width:70px; height:7px;} 95% {opacity: 1; width:70px; height:7px;} 100% {opacity: 1; width:70px; height:7px;}
}
@-moz-keyframes l4{ 0% {opacity: 0;} 25% {opacity: 0; width:0; height:7;} 35% {opacity: 0; width:0px; height:7px; } 40% {opacity: 0; width:0px; height:7px; } 45% {opacity: 0; width:0px; height:7px; } 50% {opacity: 1; width:70px; height:7px; } 60% {opacity: 1; width:70px; height:7px; } 70% {opacity: 1; width:70px; height:7px;} 80% {opacity: 1; width:70px; height:7px;} 85% {opacity: 1; width:70px; height:7px;} 90% {opacity: 1; width:70px; height:7px;} 95% {opacity: 1; width:70px; height:7px;} 100% {opacity: 1; width:70px; height:7px;}
}
@keyframes l4{ 0% {opacity: 0;} 25% {opacity: 0; width:0; height:7;} 35% {opacity: 0; width:0px; height:7px; } 40% {opacity: 0; width:0px; height:7px; } 45% {opacity: 0; width:0px; height:7px; } 50% {opacity: 1; width:70px; height:7px; } 60% {opacity: 1; width:70px; height:7px; } 70% {opacity: 1; width:70px; height:7px;} 80% {opacity: 1; width:70px; height:7px;} 85% {opacity: 1; width:70px; height:7px;} 90% {opacity: 1; width:70px; height:7px;} 95% {opacity: 1; width:70px; height:7px;} 100% {opacity: 1; width:70px; height:7px;}
}
@-webkit-keyframes l5{ 0% {opacity: 0;} 25% {opacity: 0; width:0; height:7;} 35% {opacity: 0; width:0px; height:7px; } 40% {opacity: 0; width:0px; height:7px; } 45% {opacity: 0; width:0px; height:7px; } 50% {opacity: 0; width:0px; height:7px; } 60% {opacity: 1; width:40px; height:7px; } 70% {opacity: 1; width:40px; height:7px;} 80% {opacity: 1; width:40px; height:7px;} 85% {opacity: 1; width:40px; height:7px;} 90% {opacity: 1; width:40px; height:7px;} 95% {opacity: 1; width:40px; height:7px;} 100% {opacity: 1; width:40px; height:7px;}
}
@-moz-keyframes l5{ 0% {opacity: 0;} 25% {opacity: 0; width:0; height:7;} 35% {opacity: 0; width:0px; height:7px; } 40% {opacity: 0; width:0px; height:7px; } 45% {opacity: 0; width:0px; height:7px; } 50% {opacity: 0; width:0px; height:7px; } 60% {opacity: 1; width:40px; height:7px; } 70% {opacity: 1; width:40px; height:7px;} 80% {opacity: 1; width:40px; height:7px;} 85% {opacity: 1; width:40px; height:7px;} 90% {opacity: 1; width:40px; height:7px;} 95% {opacity: 1; width:40px; height:7px;} 100% {opacity: 1; width:40px; height:7px;}
}
@keyframes l5{ 0% {opacity: 0;} 25% {opacity: 0; width:0; height:7;} 35% {opacity: 0; width:0px; height:7px; } 40% {opacity: 0; width:0px; height:7px; } 45% {opacity: 0; width:0px; height:7px; } 50% {opacity: 0; width:0px; height:7px; } 60% {opacity: 1; width:40px; height:7px; } 70% {opacity: 1; width:40px; height:7px;} 80% {opacity: 1; width:40px; height:7px;} 85% {opacity: 1; width:40px; height:7px;} 90% {opacity: 1; width:40px; height:7px;} 95% {opacity: 1; width:40px; height:7px;} 100% {opacity: 1; width:40px; height:7px;}
}
@-webkit-keyframes l6 { 0% {opacity: 0;} 25% {opacity: 0; width:0; height:7;} 35% {opacity: 0; width:0px; height:7px; } 40% {opacity: 0; width:0px; height:7px; } 45% {opacity: 0; width:0px; height:7px; } 50% {opacity: 0; width:0px; height:7px; } 60% {opacity: 0; width:0px; height:7px; } 70% {opacity: 1; width:70px; height:7px;} 80% {opacity: 1; width:70px; height:7px;} 85% {opacity: 1; width:70px; height:7px;} 90% {opacity: 1; width:70px; height:7px;} 95% {opacity: 1; width:70px; height:7px;} 100% {opacity: 1; width:70px; height:7px;}
}
@-moz-keyframes l6 { 0% {opacity: 0;} 25% {opacity: 0; width:0; height:7;} 35% {opacity: 0; width:0px; height:7px; } 40% {opacity: 0; width:0px; height:7px; } 45% {opacity: 0; width:0px; height:7px; } 50% {opacity: 0; width:0px; height:7px; } 60% {opacity: 0; width:0px; height:7px; } 70% {opacity: 1; width:70px; height:7px;} 80% {opacity: 1; width:70px; height:7px;} 85% {opacity: 1; width:70px; height:7px;} 90% {opacity: 1; width:70px; height:7px;} 95% {opacity: 1; width:70px; height:7px;} 100% {opacity: 1; width:70px; height:7px;}
}
@keyframes l6 { 0% {opacity: 0;} 25% {opacity: 0; width:0; height:7;} 35% {opacity: 0; width:0px; height:7px; } 40% {opacity: 0; width:0px; height:7px; } 45% {opacity: 0; width:0px; height:7px; } 50% {opacity: 0; width:0px; height:7px; } 60% {opacity: 0; width:0px; height:7px; } 70% {opacity: 1; width:70px; height:7px;} 80% {opacity: 1; width:70px; height:7px;} 85% {opacity: 1; width:70px; height:7px;} 90% {opacity: 1; width:70px; height:7px;} 95% {opacity: 1; width:70px; height:7px;} 100% {opacity: 1; width:70px; height:7px;}
}
@-webkit-keyframes l66 { 0% {opacity: 0;} 25% {opacity: 0; width:0; height:7;} 35% {opacity: 0; width:0px; height:7px; } 40% {opacity: 0; width:0px; height:7px; } 45% {opacity: 0; width:0px; height:7px; } 50% {opacity: 0; width:0px; height:7px; } 60% {opacity: 0; width:0px; height:7px; } 70% {opacity: 0; width:0px; height:7px;} 80% {opacity: 1; width:30px; height:7px;} 85% {opacity: 1; width:30px; height:7px;} 90% {opacity: 1; width:30px; height:7px;} 95% {opacity: 1; width:30px; height:7px;} 100% {opacity: 1; width:30px; height:7px;}
}
@-moz-keyframes l66 { 0% {opacity: 0;} 25% {opacity: 0; width:0; height:7;} 35% {opacity: 0; width:0px; height:7px; } 40% {opacity: 0; width:0px; height:7px; } 45% {opacity: 0; width:0px; height:7px; } 50% {opacity: 0; width:0px; height:7px; } 60% {opacity: 0; width:0px; height:7px; } 70% {opacity: 0; width:0px; height:7px;} 80% {opacity: 1; width:30px; height:7px;} 85% {opacity: 1; width:30px; height:7px;} 90% {opacity: 1; width:30px; height:7px;} 95% {opacity: 1; width:30px; height:7px;} 100% {opacity: 1; width:30px; height:7px;}
}
@keyframes l66 { 0% {opacity: 0;} 25% {opacity: 0; width:0; height:7;} 35% {opacity: 0; width:0px; height:7px; } 40% {opacity: 0; width:0px; height:7px; } 45% {opacity: 0; width:0px; height:7px; } 50% {opacity: 0; width:0px; height:7px; } 60% {opacity: 0; width:0px; height:7px; } 70% {opacity: 0; width:0px; height:7px;} 80% {opacity: 1; width:30px; height:7px;} 85% {opacity: 1; width:30px; height:7px;} 90% {opacity: 1; width:30px; height:7px;} 95% {opacity: 1; width:30px; height:7px;} 100% {opacity: 1; width:30px; height:7px;}
}
@-webkit-keyframes l7{ 0% {opacity: 0;} 25% {opacity: 0; width:0; height:7;} 35% {opacity: 0; width:0px; height:7px; } 40% {opacity: 0; width:0px; height:7px; } 45% {opacity: 0; width:0px; height:7px; } 50% {opacity: 0; width:0px; height:7px; } 60% {opacity: 0; width:0px; height:7px; } 70% {opacity: 0; width:0px; height:7px;} 80% {opacity: 0; width:0px; height:7px;} 85% {opacity: 1; width:132px; height:7px;} 90% {opacity: 1; width:132px; height:7px;} 95% {opacity: 1; width:132px; height:7px;} 100% {opacity: 1; width:132px; height:7px;}
}
@-moz-keyframes l7{ 0% {opacity: 0;} 25% {opacity: 0; width:0; height:7;} 35% {opacity: 0; width:0px; height:7px; } 40% {opacity: 0; width:0px; height:7px; } 45% {opacity: 0; width:0px; height:7px; } 50% {opacity: 0; width:0px; height:7px; } 60% {opacity: 0; width:0px; height:7px; } 70% {opacity: 0; width:0px; height:7px;} 80% {opacity: 0; width:0px; height:7px;} 85% {opacity: 1; width:132px; height:7px;} 90% {opacity: 1; width:132px; height:7px;} 95% {opacity: 1; width:132px; height:7px;} 100% {opacity: 1; width:132px; height:7px;}
}
@keyframes l7{ 0% {opacity: 0;} 25% {opacity: 0; width:0; height:7;} 35% {opacity: 0; width:0px; height:7px; } 40% {opacity: 0; width:0px; height:7px; } 45% {opacity: 0; width:0px; height:7px; } 50% {opacity: 0; width:0px; height:7px; } 60% {opacity: 0; width:0px; height:7px; } 70% {opacity: 0; width:0px; height:7px;} 80% {opacity: 0; width:0px; height:7px;} 85% {opacity: 1; width:132px; height:7px;} 90% {opacity: 1; width:132px; height:7px;} 95% {opacity: 1; width:132px; height:7px;} 100% {opacity: 1; width:132px; height:7px;}
}
@-webkit-keyframes d1 { 0% {opacity: 0;} 25% {opacity: 0; } 35% {opacity: 1; } 40% {opacity: 1; } 45% {opacity: 1; } 50% {opacity: 1; } 60% {opacity: 1; } 70% {opacity: 1; } 80% {opacity: 1; } 85% {opacity: 1; } 90% {opacity: 1; } 95% {opacity: 1; } 100% {opacity: 1;
}
}
@-moz-keyframes d1 { 0% {opacity: 0;} 25% {opacity: 0; } 35% {opacity: 1; } 40% {opacity: 1; } 45% {opacity: 1; } 50% {opacity: 1; } 60% {opacity: 1; } 70% {opacity: 1; } 80% {opacity: 1; } 85% {opacity: 1; } 90% {opacity: 1; } 95% {opacity: 1; } 100% {opacity: 1;
}
}
@keyframes d1 { 0% {opacity: 0;} 25% {opacity: 0; } 35% {opacity: 1; } 40% {opacity: 1; } 45% {opacity: 1; } 50% {opacity: 1; } 60% {opacity: 1; } 70% {opacity: 1; } 80% {opacity: 1; } 85% {opacity: 1; } 90% {opacity: 1; } 95% {opacity: 1; } 100% {opacity: 1;
}
} @-webkit-keyframes d2{ 0% {opacity: 0;} 25% {opacity: 0; } 35% {opacity: 0;} 40% {opacity: 1;} 45% {opacity: 1;} 50% {opacity: 1;} 60% {opacity: 1;} 70% {opacity: 1;} 80% {opacity: 1;} 85% {opacity: 1; } 90% {opacity: 1;} 95% {opacity: 1; } 100% {opacity: 1; }
}
@-moz-keyframes d2{ 0% {opacity: 0;} 25% {opacity: 0; } 35% {opacity: 0;} 40% {opacity: 1;} 45% {opacity: 1;} 50% {opacity: 1;} 60% {opacity: 1;} 70% {opacity: 1;} 80% {opacity: 1;} 85% {opacity: 1; } 90% {opacity: 1;} 95% {opacity: 1; } 100% {opacity: 1; }
}
@keyframes d2{ 0% {opacity: 0;} 25% {opacity: 0; } 35% {opacity: 0;} 40% {opacity: 1;} 45% {opacity: 1;} 50% {opacity: 1;} 60% {opacity: 1;} 70% {opacity: 1;} 80% {opacity: 1;} 85% {opacity: 1; } 90% {opacity: 1;} 95% {opacity: 1; } 100% {opacity: 1; }
} @-webkit-keyframes d3{ 0% {opacity: 0;} 25% {opacity: 0;} 35% {opacity: 0;} 40% {opacity: 0; } 45% {opacity: 1; } 50% {opacity: 1; } 60% {opacity: 1; } 70% {opacity: 1; } 80% {opacity: 1; } 85% {opacity: 1; } 90% {opacity: 1; } 95% {opacity: 1; } 100% {opacity: 1; }
}
@-moz-keyframes d3{ 0% {opacity: 0;} 25% {opacity: 0;} 35% {opacity: 0;} 40% {opacity: 0; } 45% {opacity: 1; } 50% {opacity: 1; } 60% {opacity: 1; } 70% {opacity: 1; } 80% {opacity: 1; } 85% {opacity: 1; } 90% {opacity: 1; } 95% {opacity: 1; } 100% {opacity: 1; }
}
@keyframes d3{ 0% {opacity: 0;} 25% {opacity: 0;} 35% {opacity: 0;} 40% {opacity: 0; } 45% {opacity: 1; } 50% {opacity: 1; } 60% {opacity: 1; } 70% {opacity: 1; } 80% {opacity: 1; } 85% {opacity: 1; } 90% {opacity: 1; } 95% {opacity: 1; } 100% {opacity: 1; }
}
@-webkit-keyframes d5 { 0% {opacity: 0;} 25% {opacity: 0; } 35% {opacity: 0; } 40% {opacity: 0; } 45% {opacity: 0; } 50% {opacity: 0; } 60% {opacity: 1; } 70% {opacity: 1; } 80% {opacity: 1; } 85% {opacity: 1; } 90% {opacity: 1; } 95% {opacity: 1; } 100% {opacity: 1; }
}
@-moz-keyframes d5 { 0% {opacity: 0;} 25% {opacity: 0; } 35% {opacity: 0; } 40% {opacity: 0; } 45% {opacity: 0; } 50% {opacity: 0; } 60% {opacity: 1; } 70% {opacity: 1; } 80% {opacity: 1; } 85% {opacity: 1; } 90% {opacity: 1; } 95% {opacity: 1; } 100% {opacity: 1; }
}
@keyframes d5 { 0% {opacity: 0;} 25% {opacity: 0; } 35% {opacity: 0; } 40% {opacity: 0; } 45% {opacity: 0; } 50% {opacity: 0; } 60% {opacity: 1; } 70% {opacity: 1; } 80% {opacity: 1; } 85% {opacity: 1; } 90% {opacity: 1; } 95% {opacity: 1; } 100% {opacity: 1; }
}
@-moz-keyframes d7 { 0% {opacity: 0;} 25% {opacity: 0; } 35% {opacity: 0; } 40% {opacity: 0; } 45% {opacity: 0; } 50% {opacity: 0; } 60% {opacity: 0; } 70% {opacity: 0; } 80% {opacity: 0; } 85% {opacity: 1; } 90% {opacity: 1; } 95% {opacity: 1; } 100% {opacity: 1; }
}
@-webkit-keyframes d7 { 0% {opacity: 0;} 25% {opacity: 0; } 35% {opacity: 0; } 40% {opacity: 0; } 45% {opacity: 0; } 50% {opacity: 0; } 60% {opacity: 0; } 70% {opacity: 0; } 80% {opacity: 0; } 85% {opacity: 1; } 90% {opacity: 1; } 95% {opacity: 1; } 100% {opacity: 1; }
}
@keyframes d7 { 0% {opacity: 0;} 25% {opacity: 0; } 35% {opacity: 0; } 40% {opacity: 0; } 45% {opacity: 0; } 50% {opacity: 0; } 60% {opacity: 0; } 70% {opacity: 0; } 80% {opacity: 0; } 85% {opacity: 1; } 90% {opacity: 1; } 95% {opacity: 1; } 100% {opacity: 1; }
}

Home Page	Home
Developer	Judith Neumann
Username	judag
Uploaded	October 13, 2022
Rating	4.5
Size	3,096 Kb
Views	18,216

Do you need developer help for Code and view?

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	Size
Colorfull night...	2,818 Kb
In the beach	3,764 Kb
Crazy icons	3,699 Kb
Change your look...	2,542 Kb
Colorfull rain	3,333 Kb
Clo clo	3,450 Kb
Be in touch	3,222 Kb
Wait for a cofee...	3,422 Kb
Fireworks	2,722 Kb
Snow in town	3,372 Kb

Create amazing Facebook ads 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
Blackberry Mock	Zacharyolson	1,865 Kb
Testing Code Pen	Jduprey	1,468 Kb
Spinners using Font Icons	Keyamoon	3,007 Kb
Matrix	Stathisnikolaidis	1,922 Kb
Toggling Divs with jQuery	Yying6	1,967 Kb
The Fly	GianlucaGuarini	3,405 Kb
Apple website	Jds317	1,835 Kb
Shop Talk logo made in CSS	Hugo	19,368 Kb
Fluid Responsive Typography	Jonmilner	4,205 Kb
Part 19 Bootstrap split button dropdown	Venkatesha	1,601 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!