Elsa's snowflakes animation animation by using html and css and svg.
Elsa's snowflakes animation animation by Learn code free online .
click to see
animation
stop animation
oh! How i wish to be like princess elsa from the movie frozen. but i know it's not possible so i decided to make it by own with css. we here styling a snow emerging from elsa's magical hand.. here we have used elsa's transparent image and nature in winter image which is downloaded from freepik.com. you'll get so many images there free to use just don't forget to give them credit. we have using snowflakes icon here. see the below html code:
<![CDATA[
<body class="headerme">
<img src="images/elsa.png" class="elsaimg" alt="">
<div class="star">
<i class="fa fa-snowflake-o star1" aria-hidden="true"></i>
<i class="fa fa-snowflake-o star2" aria-hidden="true"></i>
<i class="fa fa-snowflake-o star3" aria-hidden="true"></i>
<i class="fa fa-snowflake-o star4" aria-hidden="true"></i>
<i class="fa fa-snowflake-o star5" aria-hidden="true"></i>
<i class="fa fa-snowflake-o star6" aria-hidden="true"></i>
<i class="fa fa-snowflake-o star7" aria-hidden="true"></i>
<i class="fa fa-snowflake-o star8" aria-hidden="true"></i>
<i class="fa fa-snowflake-o star9" aria-hidden="true"></i>
<i class="fa fa-snowflake-o star10" aria-hidden="true"></i>
<i class="fa fa-snowflake-o star11" aria-hidden="true"></i>
<i class="fa fa-snowflake-o star12" aria-hidden="true"></i>
<i class="fa fa-snowflake-o star13" aria-hidden="true"></i>
<i class="fa fa-snowflake-o star14" aria-hidden="true"></i>
<i class="fa fa-snowflake-o star15" aria-hidden="true"></i>
<i class="fa fa-snowflake-o star16" aria-hidden="true"></i>
<i class="fa fa-snowflake-o star17" aria-hidden="true"></i>
<i class="fa fa-snowflake-o star18" aria-hidden="true"></i>
<i class="fa fa-snowflake-o star19" aria-hidden="true"></i>
<i class="fa fa-snowflake-o star20" aria-hidden="true"></i>
<i class="fa fa-snowflake-o star21" aria-hidden="true"></i>
</div>
</body>
]]>
we have used star1,2,3,4.. class names for each snowflakes. see the below css code:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
transition: ease all 0.5s;
}
html{
scroll-behavior: smooth;
overflow-X: hidden;
overflow-y: hidden;
}
button:focus{
outline: none;
}
.headerme{
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
position:relative;
top:0px;
left:0px;
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0, 0, 0, 0.6)), url("images/imgwinter.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
}
.headerme img{
width:880px;
position:relative;
top: 0px;
left:500px;
}
.star{
width: 100vw;
height: 100vh;
background-color: transparent;
align-items: center;
justify-content: center;
position:absolute;
top:300px;
left:850px;
z-index: 3;
}
.star1, .star2, .star3, .star20, .star19, .star18{
position: absolute;
color: rgb(255, 255, 255);
opacity: 0;
animation-iteration-count: infinite;
transform: rotate(180deg);
text-shadow: 0, 0, 10px white;
font-size: 9vmin;
}
.star4, .star5, .star6, .star17, .star16, .star15{
position: absolute;
color: rgb(255, 255, 255);
opacity: 0;
animation-iteration-count: infinite;
transform: rotate(100deg);
text-shadow: 0, 0, 10px white;
font-size: 9vmin;
}
.star7, .star8, .star9, .star10, .star14, .star13, .star12, .star11, .star21{
position: absolute;
color: rgb(255, 255, 255);
opacity: 0;
animation-iteration-count: infinite;
transform: rotate(80deg);
text-shadow: 0, 0, 10px white;
font-size: 9vmin;
}
.star1{
animation: loading1 5.5s linear 1s ;
animation-iteration-count: infinite;
}
.star2{
animation:loading2 5.3s linear 4s;
animation-iteration-count: infinite;
}
.star3{
animation: loading3 5.2s linear 2s;
animation-iteration-count: infinite;
}
.star4{
animation: loading4 5.1s linear 3s ;
animation-iteration-count: infinite;
}
.star5{
animation: loading5 5s linear 3.5s;
animation-iteration-count: infinite;
}
.star6{
animation: loading6 5.1s linear 1.5s;
animation-iteration-count: infinite;
}
.star7{
animation: loading7 5.2s linear 2.5s;
animation-iteration-count: infinite;
}
.star8{
animation: loading8 5.3s linear 4.5s;
animation-iteration-count: infinite;
}
.star9{
animation: loading9 5.4s linear 5s;
animation-iteration-count: infinite;
}
.star10{
animation: loading10 5.5s linear 2.7s;
animation-iteration-count: infinite;
}
.star11{
animation: loading1 5.4s linear 2.7s ;
animation-iteration-count: infinite;
}
.star12{
animation: loading1 6.5s linear 1.8s ;
animation-iteration-count: infinite;
}
.star13{
animation:loading2 7.3s linear 4.3s;
animation-iteration-count: infinite;
}
.star14{
animation: loading3 8.2s linear 2.6s;
animation-iteration-count: infinite;
}
.star15{
animation: loading4 9.1s linear 3.6s ;
animation-iteration-count: infinite;
}
.star16{
animation: loading5 6s linear 2.5s;
animation-iteration-count: infinite;
}
.star17{
animation: loading6 7.1s linear 1.5s;
animation-iteration-count: infinite;
}
.star18{
animation: loading7 5.2s linear 5.5s;
animation-iteration-count: infinite;
}
.star19{
animation: loading8 6.3s linear 3.5s;
animation-iteration-count: infinite;
}
.star20{
animation: loading9 7.4s linear 3s;
animation-iteration-count: infinite;
}
.star21{
animation: loading10 6.5s linear 1s;
animation-iteration-count: infinite;
}
@keyframes loading1 {
0%{
opacity: 0.6;
}
20%{
opacity: 1;
}
80%{
opacity: 1;
}
100%{
transform: translateY(650px) translateX(-1004px) rotateZ(-180deg) ;
opacity: 0;
}
}
@keyframes loading2 {
0%{
opacity: 0.6;
transform-origin: bottom;
}
20%{
opacity: 1;
}
80%{
opacity: 1;
}
100%{
transform: translateY(650px) skewX(30deg) translateX(-1004px) rotateZ(180deg) rotateY(-180deg);
opacity: 0;
}
}
@keyframes loading3 {
0%{
opacity: 0.6;
transform-origin: bottom;
}
20%{
opacity: 1;
}
80%{
opacity: 1;
}
100%{
transform: translateY(650px) translateX(-1000px) rotateZ(-180deg) rotateY(180deg);
opacity: 0;
}
}
@keyframes loading4 {
0%{
opacity: 0.6;
transform-origin: bottom;
}
20%{
opacity: 1;
}
80%{
opacity: 1;
}
100%{
transform: translateY(650px) translateX(-1050px) rotateZ(180deg) ;
opacity: 0;
}
}
@keyframes loading5 {
0%{
opacity: 0.6;
transform-origin: bottom;
}
20%{
opacity: 1;
}
80%{
opacity: 1;
}
100%{
transform: translateY(650px) translateX(-1500px) rotateZ(-180deg) rotateY(-180deg) ;
opacity: 0;
}
}
@keyframes loading6 {
0%{
opacity: 0.6;
transform-origin: bottom;
}
20%{
opacity: 1;
}
80%{
opacity: 1;
}
100%{
transform: translateY(650px) translateX(-2000px) rotateZ(180deg) ;
opacity: 0;
}
}
@keyframes loading7 {
0%{
opacity: 0.6;
transform-origin: bottom;
}
20%{
opacity: 1;
}
80%{
opacity: 1;
}
100%{
transform: translateY(650px) translateX(-3000px) rotateZ(-180deg) rotateY(180deg);
opacity: 0;
}
}
@keyframes loading8 {
0%{
opacity: 0.6;
transform-origin: bottom;
}
20%{
opacity: 1;
}
80%{
opacity: 1;
}
100%{
transform: translateY(650px) translateX(-3000px) rotateZ(180deg) ;
opacity: 0;
}
}
@keyframes loading9 {
0%{
opacity: 0.6;
transform-origin: bottom;
}
20%{
opacity: 1;
}
80%{
opacity: 1;
}
100%{
transform: translateY(650px) translateX(-1405px) rotateZ(-180deg) rotateY(180deg) ;
opacity: 0;
}
}
@keyframes loading10 {
0%{
opacity: 0.6;
transform-origin: bottom;
}
20%{
opacity: 1;
}
80%{
opacity: 1;
}
100%{
transform: translateY(650px) translateX(-1995px) rotateZ(180deg) rotateY(-180deg);
opacity: 0;
}
}
