ساخت انیمیشن با html , css

به نام خدا

سلام

توی این پست میخوایم چند تا انیمیشن باحال رو با html و css بسازیم

انیمیشن شماره یک:

توی این کد ها انیمیشن لودینگ نمایش داده میشه

این انیمیشن نیازی به لینک کردن css رو نداره و داخل خودش هست

کد ها:


<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

<style>

body,

html {

background: #002F74;

}

.spin-container {

text-align: center;

margin-top: 100px;

}

.spin {

border: 3px solid #0D4B9F;

width: 200px;

height: 200px;

margin: 0 auto;

border-radius: 50%;

border-left-color: transparent;

border-right-color: transparent;

animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;

}

#loader2 {

border: 3px solid #E0EDFF;

width: 220px;

height: 220px;

position: relative;

top: -216px;

border-left-color: transparent;

border-right-color: transparent;

animation: rotate2 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;

}

#loader3 {

border: 3px solid #005CDC;

width: 240px;

height: 240px;

position: relative;

top: -452px;

border-left-color: transparent;

border-right-color: transparent;

animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;

}

#loader4 {

border: 3px solid #94B6E5;

width: 260px;

height: 260px;

position: relative;

top: -708px;

border-left-color: transparent;

border-right-color: transparent;

animation: rotate2 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;

}

@keyframes rotate {

0% {

transform: rotateZ(-360deg)

}

100% {

transform: rotateZ(0deg)

}

}

@keyframes rotate2 {

0% {

transform: rotateZ(360deg)

}

100% {

transform: rotateZ(0deg)

}

}

#text {

color: #D6E3F6;

font-family: Arial;

font-size: 15px;

position: relative;

top: -857px;

}

</style>

</head>

<body>

<div class="spin-container">

<div class="spin" id="loader"></div>

<div class="spin" id="loader2"></div>

<div class="spin" id="loader3"></div>

<div class="spin" id="loader4"></div>

<span id="text">LOADING...</span>

</div>

</body>

</html>

خروجی:

البته به صورت گیف و حرکتی هستش
البته به صورت گیف و حرکتی هستش






انیمیشن شماره دو:

توی این انیمیشن دو تا شمع هستند که یکیشون اون یکی رو خاموش میکنه و اون یکی دوباره روشن میشه

این انیمیشن نیاز به لینک کردن css داره

کد های html:

<!DOCTYPE html>

<html lang="en" >

<head>

<meta charset="UTF-8">

<title>Candle Fun (Pure CSS Animation)</title>

<link rel="stylesheet" href="./style.css">

<link rel="stylesheet" href="sham.css">

</head>

<body>

<!-- partial:index.partial.html -->

<div class="wrapper">

<div class="candles">

<div class="light__wave"></div>

<div class="candle1">

<div class="candle1__body">

<div class="candle1__eyes">

<span class="candle1__eyes-one"></span>

<span class="candle1__eyes-two"></span>

</div>

<div class="candle1__mouth"></div>

</div>

<div class="candle1__stick"></div>

</div>

<div class="candle2">

<div class="candle2__body">

<div class="candle2__eyes">

<div class="candle2__eyes-one"></div>

<div class="candle2__eyes-two"></div>

</div>

</div>

<div class="candle2__stick"></div>

</div>

<div class="candle2__fire"></div>

<div class="sparkles-one"></div>

<div class="sparkles-two"></div>

<div class="candle__smoke-one">


</div>

<div class="candle__smoke-two">


</div>

</div>

<div class="floor">

</div>


</div>

<!-- partial -->

</body>

</html>


و یک فایل نوتپد باز میکنیم و توش مینویسیم:

body {

background-color: #FFF;

animation: change-background 3s infinite linear;

}


.wrapper {

position: absolute;

left: 50%;

top: 70%;

transform: scale(1.5, 1.5) translate(-50%, -50%);

}


.floor {

position: absolute;

left: 50%;

top: 50%;

width: 350px;

height: 5px;

background: #673C63;

transform: translate(-50%, -50%);

box-shadow: 0px 2px 5px #111;

z-index: 2;

}


.candles {

position: absolute;

left: 50%;

top: 50%;

width: 250px;

height: 150px;

transform: translate(-50%, -100%);

z-index: 1;

}


.candle1 {

position: absolute;

left: 50%;

top: 50%;

width: 35px;

height: 100px;

background: #fff;

border: 3px solid #673C63;

border-bottom: 0px;

border-radius: 3px;

transform-origin: center right;

transform: translate(60%, -25%);

box-shadow: -2px 0px 0px #95c6f2 inset;

animation: expand-body 3s infinite linear;

}


.candle1__stick, .candle2__stick {

position: absolute;

left: 50%;

top: 0%;

width: 3px;

height: 15px;

background: #673C63;

border-radius: 8px;

transform: translate(-50%, -100%);

}


.candle2__stick {

height: 12px;

transform-origin: bottom center;

animation: stick-animation 3s infinite linear;

}


.candle1__eyes, .candle2__eyes {

position: absolute;

left: 50%;

top: 0%;

width: 35px;

height: 30px;

transform: translate(-50%, 0%);

}


.candle1__eyes-one {

position: absolute;

left: 30%;

top: 20%;

width: 5px;

height: 5px;

border-radius: 100%;

background: #673C63;

transform: translate(-70%, 0%);

animation: blink-eyes 3s infinite linear;

}


.candle1__eyes-two {

position: absolute;

left: 70%;

top: 20%;

width: 5px;

height: 5px;

border-radius: 100%;

background: #673C63;

transform: translate(-70%, 0%);

animation: blink-eyes 3s infinite linear;

}


.candle1__mouth {

position: absolute;

left: 40%;

top: 20%;

width: 0px;

height: 0px;

border-radius: 20px;

background: #673C63;

transform: translate(-50%, -50%);

animation: uff 3s infinite linear;

}


.candle__smoke-one {

position: absolute;

left: 30%;

top: 50%;

width: 30px;

height: 3px;

background: grey;

transform: translate(-50%, -50%);

animation: move-left 3s infinite linear;

}


.candle__smoke-two {

position: absolute;

left: 30%;

top: 40%;

width: 10px;

height: 10px;

border-radius: 10px;

background: grey;

transform: translate(-50%, -50%);

animation: move-top 3s infinite linear;

}


.candle2 {

position: absolute;

left: 20%;

top: 65%;

width: 42px;

height: 60px;

background: #fff;

border: 3px solid #673C63;

border-bottom: 0px;

border-radius: 3px;

transform: translate(60%, -15%);

transform-origin: center right;

box-shadow: -2px 0px 0px #95c6f2 inset;

animation: shake-left 3s infinite linear;

}


.candle2__eyes-one {

position: absolute;

left: 30%;

top: 50%;

width: 5px;

height: 5px;

display: inline-block;

border: 0px solid #673C63;

border-radius: 100%;

float: left;

background: #673C63;

transform: translate(-80%, 0%);

animation: changeto-lower 3s infinite linear;

}


.candle2__eyes-two {

position: absolute;

left: 70%;

top: 50%;

width: 5px;

height: 5px;

display: inline-block;

border: 0px solid #673C63;

border-radius: 100%;

float: left;

background: #673C63;

transform: translate(-80%, 0%);

animation: changeto-greater 3s infinite linear;

}


.light__wave {

position: absolute;

top: 35%;

left: 35%;

width: 75px;

height: 75px;

border-radius: 100%;

z-index: 0;

transform: translate(-25%, -50%) scale(2.5, 2.5);

border: 2px solid rgba(255, 255, 255, 0.2);

animation: expand-light 3s infinite linear;

}


.candle2__fire {

position: absolute;

top: 50%;

left: 40%;

display: block;

width: 16px;

height: 20px;

background-color: red;

border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

background: #FF9800;

transform: translate(-50%, -50%);

animation: dance-fire 3s infinite linear;

}


@keyframes blink-eyes {

0%,35% {

opacity: 1;

transform: translate(-70%, 0%);

}

36%,39% {

opacity: 0;

transform: translate(-70%, 0%);

}

40% {

opacity: 1;

transform: translate(-70%, 0%);

}

50%,65% {

transform: translate(-140%, 0%);

}

66% {

transform: translate(-70%, 0%);

}

}

@keyframes expand-body {

0%,40% {

transform: scale(1, 1) translate(60%, -25%);

}

45%,55% {

transform: scale(1.1, 1.1) translate(60%, -28%);

}

60% {

transform: scale(0.89, 0.89) translate(60%, -25%);

}

65% {

transform: scale(1, 1) translate(60%, -25%);

}

70% {

transform: scale(0.95, 0.95) translate(60%, -25%);

}

75% {

transform: scale(1, 1) translate(60%, -25%);

}

}

@keyframes uff {

0%,40% {

width: 0px;

height: 0px;

}

50%,54% {

width: 15px;

height: 15px;

left: 30%;

}

59% {

width: 5px;

height: 5px;

left: 20%;

}

62% {

width: 2px;

height: 2px;

left: 20%;

}

67% {

width: 0px;

height: 0px;

left: 30%;

}

}

@keyframes change-background {

0%,59%,98%,100% {

background: #FFF;

}

61%,97% {

background: #000;

}

}

@keyframes move-left {

0%,59%,100% {

width: 0px;

left: 40%;

}

60% {

width: 30px;

left: 30%;

}

68% {

width: 0px;

left: 20%;

}

}

@keyframes move-top {

0%,64%,100% {

width: 0px;

height: 0px;

top: 0%;

}

65% {

width: 10px;

height: 10px;

top: 40%;

left: 40%;

}

80% {

width: 0px;

height: 0px;

top: 20%;

}

}

@keyframes shake-left {

0%,40% {

left: 20%;

transform: translate(60%, -15%);

}

50%,54% {

left: 20%;

transform: translate(60%, -15%);

}

59% {

left: 20%;

transform: translate(60%, -15%);

}

62% {

left: 18%;

transform: translate(60%, -15%);

}

65% {

left: 21%;

transform: translate(60%, -15%);

}

67% {

left: 20%;

transform: translate(60%, -15%);

}

75% {

left: 20%;

transform: scale(1.15, 0.85) translate(60%, -15%);

background: #fff;

border-color: #673C63;

}

91% {

left: 20%;

transform: scale(1.18, 0.82) translate(60%, -10%);

background: #F44336;

border-color: #F44336;

box-shadow: -2px 0px 0px #F44336 inset;

}

92% {

left: 20%;

transform: scale(0.85, 1.15) translate(60%, -15%);

}

95% {

left: 20%;

transform: scale(1.05, 0.95) translate(60%, -15%);

}

97% {

left: 20%;

transform: scale(1, 1) translate(60%, -15%);

}

}

@keyframes stick-animation {

0%,40% {

left: 50%;

top: 0%;

transform: translate(-50%, -100%);

}

50%,54% {

left: 50%;

top: 0%;

transform: translate(-50%, -100%);

}

59% {

left: 50%;

top: 0%;

transform: translate(-50%, -100%);

}

62% {

left: 50%;

top: 0%;

transform: rotateZ(-15deg) translate(-50%, -100%);

}

65% {

left: 50%;

top: 0%;

transform: rotateZ(15deg) translate(-50%, -100%);

}

70% {

left: 50%;

top: 0%;

transform: rotateZ(-5deg) translate(-50%, -100%);

}

72% {

left: 50%;

top: 0%;

transform: rotateZ(5deg) translate(-50%, -100%);

}

74%,84% {

left: 50%;

top: 0%;

transform: rotateZ(0deg) translate(-50%, -100%);

}

85% {

transform: rotateZ(180deg) translate(0%, 120%);

}

92% {

left: 50%;

top: 0%;

transform: translate(-50%, -100%);

}

}

@keyframes expand-light {

10%,29%,59%,89% {

transform: translate(-25%, -50%) scale(0, 0);

border: 2px solid rgba(255, 255, 255, 0);

}

90%,20%,50% {

transform: translate(-25%, -50%) scale(1, 1);

}

95%,96%,26%,27%,56%,57% {

transform: translate(-25%, -50%) scale(2, 2);

border: 2px solid rgba(255, 255, 255, 0.5);

}

0%,28%,58%,100% {

transform: translate(-25%, -50%) scale(2.5, 2.5);

border: 2px solid rgba(255, 255, 255, 0.2);

}

}

@keyframes dance-fire {

59%,89% {

left: 40%;

width: 0px;

height: 0px;

}

90%,0%,7%,15%,23%,31%,39%,47%,55% {

left: 40.8%;

width: 16px;

height: 20px;

background: #FFC107;

}

94%,3%,11%,19%,27%,35%,43%,51%,58% {

left: 41.2%;

width: 16px;

height: 20px;

background: #FF9800;

}

}

@keyframes changeto-lower {

0%,70%,90% {

padding: 0px;

display: inline-block;

border-radius: 100%;

background: #673C63;

border-width: 0 0 0 0;

border: 0px solid #673C63;

transform: translate(-90%, 0%);

}

71%,89% {

background: none;

border: solid #673C63;

border-radius: 0px;

border-width: 0 2px 2px 0;

display: inline-block;

padding: 1px;

float: left;

transform-origin: bottom left;

transform: rotate(-45deg) translate(-50%, -65%);

-webkit-transform: rotate(-45deg) translate(-50%, -65%);

}

}

@keyframes changeto-greater {

0%,70%,90% {

top: 50%;

padding: 0px;

display: inline-block;

border-radius: 100%;

background: #673C63;

border-width: 0 0 0 0;

border: 0px solid #673C63;

transform: translate(-80%, 0%);

}

71%,89% {

top: 30%;

background: none;

border: solid #673C63;

border-radius: 0px;

border-width: 0 2px 2px 0;

display: inline-block;

padding: 1px;

float: left;

transform-origin: bottom left;

transform: rotate(135deg) translate(-80%, 20%);

-webkit-transform: rotate(135deg) translate(-80%, 20%);

}

}

و اون رو با نام sham.css ذخیره میکنیم و میبندیم


خروجی:

این هم به صورت گیف هستش
این هم به صورت گیف هستش



انیمیشن شماره سه:

انیمیشن برف


کد های html:


<head>

<link rel="stylesheet" href="snow.css">

</head>


<div class="container">

<div class="snow"></div>

<div class="tree1"></div>

<div class="tree2"></div>

<div class="house">

<div class="roof1">

<div class="b1"></div>

<div class="b2"></div>

</div>

<div class="wall1">

<div class="w3">

<div class="window1">

<div class="glass1"></div>

</div>

</div>

</div>

<div class="wall2">

<div class="light">

<div class="w1">

<div class="window">

<div class="glass"></div>

</div>

</div>

<div class="w2">

<div class="window">

<div class="glass"></div>

</div>

</div>

</div>

<div class="door">

<div class="handle"></div>

</div>

<div class="snw1"></div>

<div class="snw2"></div>

</div>

<div class="wall3">

<div class="b3"></div>

<div class="b4"></div>

<div class="chimney">

<div class="top">

<div class="smoke">

<div class="s1"></div>

<div class="s2"></div>

<div class="s3"></div>

</div>

<div class="shne1"></div>

<div class="shne2"></div>

</div>

</div>

<div class="sn">

<div class="dr1"></div>

<div class="dr2"></div>

<div class="dr3"></div>

</div>

<div class="sn1">

<div class="dr4"></div>

</div>

<div class="sh1"></div>

<div class="sh2"></div>

<div class="sh3"></div>

<div class="sh4"></div>

<div class="sh5"></div>

</div>

</div>

<div class="snowfall"></div>

<div class="cover"></div>

<div class="bottom">

<div class="bt1"></div>

<div class="bt2"></div>

</div>

<div class="fence">

<div class="fn1">

<div class="screw"></div>

</div>

<div class="fn2">

<div class="screw"></div>

</div>

<div class="fn3">

<div class="screw"></div>

</div>

<div class="stck"></div>

</div>

یک فایل نوتپد باز میکنیم و توش مینویسیم:

body{

background-color: #241E4E;

padding:0;

margin:0;

}

.container{

height: 350px;

width: 350px;

border-radius: 50%;

position: absolute;

margin: auto;

top:0;

bottom: 0;

left:0;

right: 0;

}

.snow{

height: 40px;

width: 235px;

background-color: white;

position: relative;

left:60px;

top:280px;

border-radius: 8px;

}

.tree1{

height: 0;

width: 0;

border-bottom: 120px solid #5b6b09;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

position: relative;

left:70px;

top:120px;

}

.tree2{

height: 0;

width: 0;

border-bottom: 90px solid #718710;

border-left: 24px solid transparent;

border-right: 24px solid transparent;

position: relative;

left:90px;

top:30px;

}

.house{

position: relative;

bottom:78px;

left:146px;

}

.roof1{

height: 60px;

width: 12px;

background-color: #7e110f;

transform: skew(30deg);

-webkit-transform: skew(30deg);

position: relative;

left:112px;

bottom:18.5px;

}

.wall1{

height: 0;

width: 0;

border-bottom: 53px solid #c44e0e;

border-left:30px solid transparent;

border-right:31px solid transparent;

position: relative;

bottom: 75px;

left:68px;

}

.wall2{

height:70px;

background-color: #c44e0e;

width: 150px;

position: relative;

bottom:75px;

right: 21px;

}

.wall3{

background-color: #b40f0c;

height: 60px;

width: 105px;

transform: skew(-30deg);

-webkit-transform: skew(-30deg);

position: relative;

bottom:201.5px;

right: 16.5px;

}

.light{

background-color: #ef7421;

width: 90px;

height: 50px;

position: relative;

top:20px;

}

.b1{

background-color: #460701;

height: 60px;

width: 3px;

position: relative;

left:9px;

}

.b2{

background-color: #460701;

height:6px;

width:10px;

position: relative;

bottom:6px;

}

.b4{

background-color: #460701;

height:59px;

width: 3px;

position: relative;

left:103px;

bottom:5px;

}

.b3{

background-color: #7b0f0c;

height: 5px;

width: 106px;

position: relative;

top: 55px;

}

.w1,.w2{

background-color: #700205;

height: 30px;

width:25px;

position:relative;

}

.w1{

top:5px;

left:20px;

}

.w2{

bottom:25px;

left:50px;

}

.window{

background-color:#89c6c5;

height: 23px;

width: 19px;

border:2px solid white;

position: relative;

top:2px;

left:3px;

}

.glass{

height: 0;

width: 0;

border-top:23px solid rgba(255,255,255,0.5);

border-right: 17px solid transparent;

}

.w3{

background-color: #982c19;

height:18px;

width: 16px;

position: relative;

top:40px;

right: 3px;

z-index: 1;

}

.window1{

background-color:#89c6c5;

height: 10px;

width: 10px;

border:1.3px solid white;

position: relative;

top:2.5px;

}

.glass1{

height: 0;

width: 0;

border-top:10px solid rgba(255,255,255,0.3);

border-right: 10px solid transparent;

}

.door{

background-color: #7f1414;

height: 40px;

width: 20px;

position: relative;

bottom:20px;

left:112px;

border-right: 2px solid #ef2021;

}

.handle{

height: 8px;

width: 4px;

background-color: #cccccc;

position: relative;

top:16px;

left:3px;

}

.chimney{

background-color: #c85012;

height:22px;

width: 20px;

transform: skew(30deg);

-webkit-transform: skew(30deg);

position: relative;

bottom:75px;

left:55px;

}

.shne1{

background-color: #ef7421;

height: 14px;

width: 14px;

position: relative;

bottom: 20px;

left:5px;

}

.shne2{

background-color: #ef7421;

height:10px;

width: 20px;

position: relative;

bottom: 47px;

}

.top{

background-color: #c85012;

height:10px;

width: 28px;

position: relative;

bottom:5px;

right: 4px;

}

.smoke{

position: relative;

bottom:32px;

right: 15px;

animation: smoke 5s infinite;

-webkit-animation: smoke 5s infinite;

}

@keyframes smoke{

50%{

transform: translateX(-5px) translateY(-10px);

opacity: 0.5;

}

100%{

transform: translateX(10px) translateY(-20px);

opacity: 0;

}

}

@-webkit-keyframes smoke{

50%{

-webkit-transform: translateX(-5px) translateY(-10px);

opacity: 0.5;

}

100%{

-webkit-transform: translateX(10px) translateY(-20px);

opacity: 0;

}

}

.s1,.s2,.s3{

background-color: #423f3f;

height: 10px;

opacity: 0.2;

border-radius: 10px;

position: relative;

margin-bottom: 2px;

}

.s1{

width:35px;

}

.s2{

width: 27px;

left:8px;

}

.s3{

height:7px;

width: 15px;

left:25px;

}

.snowfall{

background: url(https://i.imgur.com/T0mBFg2.png);

background-size: 350px 200px;

background-repeat: repeat;

height: 350px;

width: 350px;

position:relative;

bottom: 493px;

border-radius: 50%;

animation:snowfall 5s linear forwards infinite;

-webkit-animation:snowfall 5s linear forwards infinite;

}

@keyframes snowfall{

0%{

background-position: 0 0;

}

20%{

background-position: 20px 20px;

}

40%{

background-position: 40px 40px;

}

60%{

background-position: 60px 60px;

}

80%{

background-position: 80px 80px;

}

100%{

background-position: 100px 100px;

}

}

@-webkit-keyframes snowfall{

0%{

background-position: 0 0;

}

20%{

background-position: 20px 20px;

}

40%{

background-position: 40px 40px;

}

60%{

background-position: 60px 60px;

}

80%{

background-position: 80px 80px;

}

100%{

background-position: 100px 100px;

}

}

.cover{

background-color: rgba(255,255,255,0.2);

height: 350px;

width: 350px;

border-radius: 50%;

position: relative;

bottom:842px;

}

.bottom{

background-color: #c1272e;

height:70px;

width: 260px;

position: relative;

bottom:880px;

left:47px;

}

.bt1,.bt2{

background-color: #d33c3c;

height: 20px;

width:280px;

position: relative;

right: 10px;

border-radius: 10px;

}

.bt1{

bottom: 12px;

}

.bt2{

top:40px;

}

.sn{

background-color: white;

width: 40px;

height: 5px;

transform: skew(30deg);

-webkit-transform: skew(30deg);

border-radius: 5px;

position: relative;

bottom: 36px;

left:5px;

}

.sn1{

background-color: white;

width: 30px;

height: 5px;

transform: skew(30deg);

-webkit-transform: skew(30deg);

border-radius: 5px;

position: relative;

bottom: 41px;

left:55px;

}

.dr1,.dr2,.dr3,.dr4{

background-color: white;

border-radius: 5px;

position: relative;

height: 10px;

width: 4px;

}

.dr1{

top:4px;

left:5px;

}

.dr2{

bottom:8px;

left:15px;

}

.dr3{

height: 8px;

width: 8px;

border-radius: 50%;

left:29px;

bottom:19px;

}

.dr4{

left:22px;

}

.snw1{

background-color: white;

height: 15px;

width: 25px;

position: relative;

bottom:30px;

left:7px;

border-radius: 20px 20px 0 0;

}

.snw2{

background-color: white;

height: 12px;

width: 12px;

position: relative;

bottom:40px;

left:31px;

border-radius: 50%

}

.sh1,.sh2,.sh3,.sh4,.sh5{

background-color: #d33c3c;

height: 6px;

transform: skew(30deg);

-webkit-transform: skew(30deg);

width: 23px;

border-radius: 15px;

position: relative;

}

.sh1{

bottom:56px;

left:70px;

}

.sh2{

bottom:68px;

left:2px;

}

.sh3{

bottom:95px;

left:47px;

}

.sh4{

bottom:108px;

left:6px;

}

.sh5{

bottom:95px;

left:38px;

}

.fence{

position: relative;

bottom: 1008px;

left:103px;

}

.fn1,.fn2,.fn3{

background-color: #b40f0c;

height: 25px;

width: 7px;

position: relative;

border-radius: 25px 25px 0 0;

}

.fn2{

bottom:25px;

left:12px;

}

.fn3{

bottom:50px;

left:24px;

}

.screw{

background-color: #cccccc;

height: 3px;

width: 3px;

position: relative;

border-radius: 50%;

left:1.6px;

top:11px;

z-index: 2;

}

.stck{

background-color: #7d151f;

position: relative;

width: 46px;

height: 6px;

right: 8px;

bottom:65px;

}

و با نام snow.css ذخیره میکنیم و میبندیم

خروجی:



اگر از این آموزش خوشتون اومد حتما حمایت کنید از من

دوستدار شما سپهر

خدانگهدار