Either try as much as you wish or wish as much as you try
ساخت انیمیشن با 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 ذخیره میکنیم و میبندیم
خروجی:
اگر از این آموزش خوشتون اومد حتما حمایت کنید از من
دوستدار شما سپهر
خدانگهدار
مطلبی دیگر از این انتشارات
تبدیل اعداد معمولی به باینری با ++C
مطلبی دیگر از این انتشارات
shut down و restart کردن دستگاه با پایتون
مطلبی دیگر از این انتشارات
نحوه ی تبدیل کلاس به کتابخانه و استفاده از آن