ساخت انیمیشن با 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 ذخیره میکنیم و میبندیمخروجی:اگر از این آموزش خوشتون اومد حتما حمایت کنید از مندوستدار شما سپهرخدانگهدار