Animations
Posted in
7549
7:09 am, October 1, 2021
Sun Reflection CSS and HTML Only
What is Sun Reflection CSS and HTML Only?
This is a sun with an animated reflection done using css and html only
What can i use this for?
This could be modified to add some interest to a logo, or other image or element on your web page.
Should I use Sun Reflection?
This is more of an example of what can be done using just html and css for animation effects, but you could use it carefully in your project.
Conclusion
Sun Reflection is a nice example showing what can be done using animation techniques with no need for bulky animation libraries or excessive (any) javascript.
Original Codepen Source
Thanks to the author Pokecoder, this code comes from the Sun Reflection pen on Codepen.
Sun Reflection CSS and HTML Only Demo
View Demo Full Screen View Demo New Tab
Sun Reflection CSS and HTML Only Code
HTML
<div class="sun-wrap">
<div class="sun">
<div class="water">
<div class="reflection"></div>
</div>
</div>
<div class="plop"></div>
</div>
CSS
.sun-wrap {
height: 100vh;
width: 100vw;
background: black;
display: flex;
align-items: center;
justify-content: center;
}
.sun {
background: linear-gradient(174deg, rgba(255,0,0,1) 44%, rgba(255,123,0,1) 63%);
height: 50vmin;
width: 50vmin;
margin-left: 25vmin;
border-radius: 50%;
box-shadow:
0 -0.5vmin 4vmin red;
display: flex;
align-items: center;
justify-content: center;
}
.water {
position: relative;
background: black;
width: 80vmin;
height: 25vmin;
top: 26vmin;
display: flex;
align-items: center;
justify-content: center;
}
.reflection {
position: relative;
background: rgba(255,123,0,1);
color: rgba(255,123,0,1);
width: 50vmin;
height: 3vmin;
border-radius: 50%;
top: -12vmin;
box-shadow:
0.5vmin 0 2vmin,
-0.5vmin 0 2vmin;
animation: fade 3s ease-in-out infinite;
}
.reflection::after {
content: '';
position: absolute;
background: rgba(255,123,0,1);
color: rgba(255,123,0,1);
width: 50vmin;
height: 5vmin;
border-radius: 50% 90% 50% 80%;
top: 2.5vmin;
box-shadow:
0.5vmin 0 2vmin,
-0.5vmin 0 2vmin;
}
.reflection::before {
content: '';
position: absolute;
background: rgba(255,123,0,1);
color: rgba(255,123,0,1);
width: 40vmin;
height: 5vmin;
left: 5vmin;
border-radius: 50% 90% 50% 80%;
top: 7vmin;
box-shadow:
0.5vmin 0 2vmin,
-0.5vmin 0 2vmin;
animation: tide 3s ease-out infinite;
}
.plop {
background: rgba(255,123,0,1);
color: rgba(255,123,0,1);
position: relative;
height: 10vmin;
width: 30vmin;
border-radius: 40% 80% 50% 70%;
left: -38vmin;
top: 25vmin;
box-shadow:
0.5vmin 0 2vmin,
-0.5vmin 0 2vmin;
animation: popout 3s ease-out infinite;
}
@keyframes fade {
50% {
transform: translatey(-0.5vmin) scaley(0.7);
}
}
@keyframes tide {
25% {
transform: translatey(0.3vmin) scale(1, 1.2);
}
50% {
transform: translatey(0.5vmin) scale(1.1., 1.2);
}
100% {
transform: translatey(-1vmin) scale(0.7, 1.3);
}
}
@keyframes popout {
25% {
transform: translate(0.5vmin, 0.5vmin) scalex(0.8);
}
50% {
transform: translate(1vmin, 1vmin) scalex(0.6);
}
100% {
transform: translate(2vmin, 3vmin) scalex(0.3);
height: 0vmin;
}
}
External Link for Sun Reflection CSS and HTML Only
Related Tags
Add Comment
Other Items in Animations
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
css animations
HTML Canvas
javascript