تریک

تمرین هایی که انجام میدم با کد برای شما گذاشتم استفاده کنید♥

کد تمرین css

این تمرین در مبحث تری انگل و انیمیشن ساخته شده ، امیدوارم که این تمرین برای شما مفید فایده بوده باشه

تریک css

کد css

*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
background: #000;
}
.box{
width: 800px;
height: 300px;
margin: 200px auto;
position: relative;
}

div{
width: 100px;
height: 100px;
background: white;
position: absolute;
clip-path:polygon(50% 0 , 100% 100% , 0 100%);
transition: .1s;
cursor: pointer;
opacity: 0;
}
div:hover{
background: rgb(8, 8, 8)
}
div:nth-of-type(1){
bottom: 100%;
left: 0;
animation: msh 1s linear forwards
}

div:nth-of-type(2){
bottom: 100%;
left: 100px;
animation: msh 1s .5s linear forwards

}

div:nth-of-type(3){
bottom: 100%;
left: 200px;
animation: msh 1s 1s linear forwards
}

div:nth-of-type(4){
bottom: 100%;
left: 300px;
animation: msh 1s 1.5s linear forwards
}

div:nth-of-type(5){
bottom: 100%;
left: 400px;
animation: msh 1s 2s linear forwards
}

div:nth-of-type(6){
bottom: 100%;
left: 500px;
animation: msh 1s 2.5s linear forwards
}

div:nth-of-type(7){
bottom: 100%;
left: 600px;
animation: msh 1s 3s linear forwards
}

div:nth-of-type(8){
bottom: 100%;
left: 700px;
animation: msh 1s 3.5s linear forwards
}

div:nth-of-type(9){
left: 100%;
top: 0px;
transform: rotate(90deg);
animation: msh 1s 4s linear forwards
}

div:nth-of-type(10){
left: 100%;
top: 100px;
transform: rotate(90deg);
animation: msh 1s 4.5s linear forwards
}

div:nth-of-type(11){
left: 100%;
top: 200px;
transform: rotate(90deg);
animation: msh 1s 5s linear forwards
}

div:nth-of-type(12){
top: 100%;
right: 0px;
transform: rotate(180deg);
animation: msh 1s linear forwards
}

div:nth-of-type(13){
top: 100%;
right: 100px;
transform: rotate(180deg);
animation: msh 1s .5s linear forwards
}

div:nth-of-type(14){
top: 100%;
right: 200px;
transform: rotate(180deg);
animation: msh 1s 1.5s linear forwards
}
div:nth-of-type(15){
top: 100%;
right: 300px;
transform: rotate(180deg);
animation: msh 1s 2s linear forwards
}

div:nth-of-type(16){
top: 100%;
right: 400px;
transform: rotate(180deg);
animation: msh 1s 2.5s linear forwards
}

div:nth-of-type(17){
top: 100%;
right: 500px;
transform: rotate(180deg);
animation: msh 1s 3s linear forwards
}

div:nth-of-type(18){
top: 100%;
right: 600px;
transform: rotate(180deg);
animation: msh 1s 3.5s linear forwards
}

div:nth-of-type(19){
top: 100%;
right: 700px;
transform: rotate(180deg);
animation: msh 1s 4s linear forwards
}

div:nth-of-type(20){
right: 100%;
top: 0px;
transform: rotate(-90deg);
animation: msh 1s 4.5s linear forwards
}

div:nth-of-type(21){
right: 100%;
top: 100px;
transform: rotate(-90deg);
animation: msh 1s 5s linear forwards
}

div:nth-of-type(22){
right: 100%;
top: 200px;
transform: rotate(-90deg);
animation: msh 1s 5.5s linear forwards
}

div:nth-of-type(23){
right: 100%;
top: 300px;
transform: rotate(-90deg);
animation: msh 1s 6s linear forwards
}

div:nth-of-type(24){
right: 100%;
top: 400px;
transform: rotate(-90deg);
animation: msh 1s 6.5s linear forwards
}
@keyframes msh{
from{opacity: 0;}
to{opacity: 1;}
}
h2:last-of-type{
font-size: 121px;
animation: msh3 1s 14.5s linear forwards;
left: 0;
transform: scale(0)
}
h2{
color: white;
font-size: 300px;
position: absolute;
text-align: center;
line-height: 300px;
left: 30%;
text-shadow: 1px 1px 5px white;
opacity: 0;
transform: scale(0)
}

h2:nth-of-type(1){
animation: msh2 1s 7s linear forwards
}

h2:nth-of-type(2){
animation: msh2 1s 8s linear forwards
}

h2:nth-of-type(3){
animation: msh2 1s 9s linear forwards
}

h2:nth-of-type(4){
animation: msh2 1s 10s linear forwards
}

h2:nth-of-type(5){
animation: msh2 1s 11s linear forwards
}

h2:nth-of-type(6){
animation: msh2 1s 12s linear forwards
}

h2:nth-of-type(7){
animation: msh2 1s 13s linear forwards
}

h2:nth-of-type(8){
animation: msh2 1s 14s linear forwards
}

@keyframes msh2{
0%{opacity: 0; transform: scale(0)}
50%{opacity: 1;transform: scale(1)}
60%{opacity: 1;transform: scale(1)}
80%{opacity: 0;transform: scale(0)}
100%{opacity: 0;transform: scale(0)}
}
@keyframes msh3{
0%{opacity: 0;transform: scale(0)}
100%{opacity: 1;transform: scale(1)}
}

کد html

<"section class"="box">
<"div"><"/div">
<"div"><"/div">
<"div"><"/div">
<"div"><"/div">
<"div"><"/div">
<"div"><"/div">
<"div"><"/div">
<"div"><"/div">
<"div"><"/div">
<"div"><"/div">
<"div"><"/div">
<"div"><"/div">
<"div"><"/div">
<"div"><"/div">
<"div"><"/div">
<"div"><"/div">
<"div"><"/div">
<"div"><"/div">
<"div"><"/div">
<"div"><"/div">
<"div"><"/div">
<"div"><"/div">
<"h2">M<"/h2">
<"h2">O<"/h2">
<"h2">H<"/h2">
<"h2">A<"/h2">
<"h2">M<"/h2">
<"h2">M<"/h2">
<"h2">A<"/h2">
<"h2">D<"/h2">
<"h2">MOHAMMAD<"/h2">
<"/section">

تماس با من

09361401435
info[at]mbsh[dot]ir
mr.sharifi75[at]yahoo[dot]com

Tag

محمدباقر شریفی طراحی سایت تریک css html mohammadbagher sharifi mbsh.ir 1web_designer تری انگل انیمیشن تمرین آموزش html5 tricks

Download

رمز فایل:mbsh.ir

دانلود این تمرین