CSS3 Rising Sun

Developer
Stathis Nikolaidis
Size
2,200 Kb
Views
24,288
  1. CSS3 Rising Sun Previews
  2. CSS3 Rising Sun HTML Codes
  3. CSS3 Rising Sun CSS Codes

How do I make an css3 rising sun?

CSS animations make it possible to animate transitions from one CSS style configuration to another.. What is a css3 rising sun? How do you make a css3 rising sun? This script and codes were developed by Stathis Nikolaidis on 30 August 2022, Tuesday.

CSS3 Rising Sun Previews
IQ Test

CSS3 Rising Sun - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Rising Sun</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> ​<div class="theSun"></div> <div class="cloud c1"></div> <div class="cloud c2"></div>
</div>
​
</body>
</html>

CSS3 Rising Sun - Script Codes CSS Codes

body { margin: 0; padding: 0; text-align: center; background:black; animation:bgChange 20s infinite; animation-direction: alternate; /* Chrome, Safari, Opera */ -webkit-animation:bgChange 20s infinite; ​ -webkit-animation-delay: 0s;
}
/* Standard syntax */
@keyframes bgChange{ 0% {background:black;} 50% {background:skyblue;} 100% {background:black;}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes bgChange{ 0% {background:black;} 25% {background:skyblue;} 50% {background:deepskyblue;} 75% {background:skyblue;} 100% {background:black;}
}
​
#container{ position:relative;
}
.theSun { width:100px; height:100px; position:absolute; animation:sunRising 20s infinite; border-radius:50%; -moz-border-radius:50%; /* Safari and Chrome */ -webkit-animation:sunRising 20s infinite; background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);	background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);	background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
}
@keyframes sunRising
{ 0% {top:70%;left:-10%;} 25% {top:30%;left:25%;} 50% {top:5%;left:50%;} 75% {top:30%;left:75%;} 100% {top:70%;left:110%;}
}
@-webkit-keyframes sunRising /* Safari and Chrome */{ 0% {top:70%;left:-10%;} 25% {top:30%;left:25%;} 50% {top:5%;left:50%;} 75% {top:30%;left:75%;} 100% {top:70%;left:110%;}
}
.cloud{ width:200px; height:60px; background:white; position:relative; border-radius:200px; -webkit-border-radius:200px; -moz-border-radius:200px;
}
.cloud:before, .cloud:after{ content:''; background:white; position:absolute; width:100px; height:80px; top:-15px; left:10px; border-radius: 100px;	-moz-border-radius: 100px;	-webkit-border-radius: 100px; -webkit-transform: rotate(30deg);	transform: rotate(30deg);	-moz-transform: rotate(30deg);
}
.cloud:after {	width: 120px; height: 120px;	top: -55px; left: auto; right: 15px;
}
.c1 { margin-top:100px;	-webkit-animation: moveclouds 20s linear infinite;	-moz-animation: moveclouds 20s linear infinite;	-o-animation: moveclouds 20s linear infinite;
}
.c2 { margin-top:30px;	-webkit-animation: moveclouds 22s linear infinite;	-moz-animation: moveclouds 22s linear infinite;	-o-animation: moveclouds 22s linear infinite; animation-delay:-2s; -webkit-animation-delay:-2s; /* Safari and Chrome */ -moz-animation-delay: -2s /* Firefox */
}
@-webkit-keyframes moveclouds {	0% {left: 110%;opacity:0.8} 50% {opacity:0.7;} 75% {opacity:0.6;} 85% {opacity:0;}	100% {left: -10%;opacity:0;}
}
@-moz-keyframes moveclouds {	0% {left: 110%;opacity:0.8} 50% {opacity:0.7;} 75% {opacity:0.6;} 85% {opacity:0;}	100% {left: -10%;opacity:0;}
}
@-o-keyframes moveclouds {	0% {left: 110%;opacity:0.8} 50% {opacity:0.7;} 75% {opacity:0.6;} 85% {opacity:0;}	100% {left: -10%;opacity:0;}
}
CSS3 Rising Sun - Script Codes
CSS3 Rising Sun - Script Codes
Home Page Home
Developer Stathis Nikolaidis
Username stathisnikolaidis
Uploaded August 30, 2022
Rating 3
Size 2,200 Kb
Views 24,288
Do you need developer help for CSS3 Rising Sun?

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!

Stathis Nikolaidis (stathisnikolaidis) Script Codes
Name
Right Sidebar List
CSS3 Rounded Corners
Matrix
CSS Pseudo-Elements
CSS3 Simple Moving Background
CSS3 Change Text Selection Colour
CSS3 Bottle Lifts Up on Hover
Simple CSS3 Social Icons
CSS3 8bit Cristiano Ronaldo
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!