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