اريد ان يكون بعد الضغط على الزر تبدأ الحركة التالية ؟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<body>
<input type="checkbox" id="c">
<label for="c" id="upload_app">
<div id="app">
<div id="arrow"></div>
<div id="success">
<i class="fas fa-check-circle"></i>
</div>
</div>
<div class="circle">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</label>
</body>
</body>
</html>
html,
body {
height: 100%;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 0;
background-color: #f1f2f3;
}
#c {
display: none;
}
#upload_app {
display: block;
position: absolute;
top: 50%;
right: 0;
left: 0;
margin: 0 auto;
width: 120px;
height: 42px;
transform: translateY(-50%);
transition: 0.3s ease width;
cursor: pointer;
}
#app {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #fff;
border: 2px solid #143240;
overflow: hidden;
z-index: 2;
}
#app:before {
content: "Upload";
position: absolute;
top: 0;
right: 0;
padding: 12px;
left: 0;
color: #143240;
font-size: 14px;
line-height: 14px;
font-weight: bold;
z-index: 1;
}
arrow {
position: absolute;
top: 0;
right: 0;
width: 38px;
height: 38px;
background-color: #fff;
z-index: 2;
}
#arrow:before,
#arrow:after {
content: "";
position: absolute;
top: 18px;
width: 10px;
height: 2px;
background-color: #143240;
}
#arrow:before {
right: 17px;
transform: rotateZ(-45deg);
}
#arrow:after {
right: 11px;
transform: rotateZ(45deg);
}
#success {
position: absolute;
top: 0;
right: 0;
width: 54px;
height: 54px;
margin: -8px;
background-color: #143240;
transform: scale(0);
border-radius: 50%;
z-index: 3;
}
#success i {
font-size: 20px;
color: #fff;
display: block;
width: 20px;
height: 20px;
margin: 17px auto;
transform: scale(0);
}
#c:checked + #upload_app {
width: 42px;
}
#c:checked + #upload_app #arrow:before {
animation: _a 0.4s ease 0.4s forwards, _incHeight 4s ease 1s forwards;
}
#c:checked + #upload_app #arrow:after {
animation: _b 0.4s ease 0.4s forwards, _incHeight 4s ease 1s forwards;
}
#c:checked + #upload_app #success {
animation: _success 0.4s cubic-bezier(0, 0.74, 0.32, 1.21) 5s forwards;
}
#c:checked + #upload_app #success i {
animation: _success 0.3s cubic-bezier(0, 0.74, 0.32, 1.21) 5.2s forwards;
}
@keyframes _a {
0% {
top: 18px;
right: 17px;
width: 10px;
transform: rotateZ(-45deg);
background-color: #143240;
}
100% {
top: 36px;
right: 19px;
width: 19px;
transform: rotateZ(0deg);
background-color: #ffc107;
}
}
@keyframes _b {
0% {
top: 18px;
right: 11px;
width: 10px;
transform: rotateZ(45deg);
background-color: #143240;
}
100% {
top: 36px;
right: 0;
width: 19px;
transform: rotateZ(0deg);
background-color: #ffc107;
}
}
@keyframes _incHeight {
0% {
top: 36px;
height: 2px;
}
25% {
top: 31px;
height: 8px;
}
50% {
top: 21px;
height: 18px;
}
80% {
top: 11px;
height: 28px;
}
100% {
top: 0;
height: 39px;
}
}
@keyframes _success {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
/*-------------------------------*/
.circle {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #3a6e9a;
background-size:contain ;
}
.circle div {
position: absolute;
top: calc((50% - 10px)); /* تبع موقع الدايرة من الصفحة كاملة الي بالبكسل غير مهمة*/
left: calc((50% - 10px));
width: 20px;
height:20px;
border-radius: 50%;/*هذا والاثنين الي فوقة مقاييس تبع الدايرة*/
background: #fff;
}
/*السرعات لي الدوائر*/
.circle-anim div:nth-child(1) { animation: anim_01 5s forwards;}
.circle-anim div:nth-child(2) { animation: move_01 5s 2s; }
.circle-anim div:nth-child(4) { animation: move_03 5s 2s; }
.circle-anim div:nth-child(3) { animation: move_02 5s 2s; }
.circle-anim div:nth-child(5) { animation: move_04 5s 2s; }
@keyframes anim_01 {
0% { transform: scale(0);}/*الدائرة لمن تصغر*/
20% { transform: scale(5);} /*الدائرة لمن تكبر*/
50% { transform: scale(3);}/*الدائرة لمن تصغر*/
90% { transform: scale(5);}/*الدائرة لمن تكبر*/
100% { transform: scale(0);}/*الدائرة لمن تصغر*/
}
@keyframes move_01 {
0% { transform: translate(0) scale(0);} /* غير متاكدة حجم الدائرة لمن تخرج من الوسط*/
/* انتقال الدوائر الصغير ف الارباع المختلفة*/
20% { transform: translate(-100px, -100px) scale(1);}
40% { transform: translate(-100px, 100px) scale(1);}
60% { transform: translate(100px, 100px) scale(1);}
80% { transform: translate(100px, -100px) scale(1);}
100% { transform: translate(0) scale(1);}
}
@keyframes move_02 {
0% { transform: translate(0) scale(0);}
20% { transform: translate(-100px, 100px) scale(1);}
40% { transform: translate(100px, 100px) scale(1);}
60% { transform: translate(100px, -100px) scale(1);}
80% { transform: translate(-100px, -100px) scale(1);}
100% { transform: translate(0) scale(1);}
}
@keyframes move_03 {
0% { transform: translate(0px) scale(0);}
20% { transform: translate(100px, 100px) scale(1);}
40% { transform: translate(100px, -100px) scale(1);}
60% { transform: translate(-100px, -100px) scale(1);}
80% { transform: translate(-100px, 100px) scale(1);}
100% { transform: translate(0) scale(1);}
}
@keyframes move_04 {
0% { transform: translate(0px) scale(0);}
20% { transform: translate(100px, -100px) scale(1);}
40% { transform: translate(-100px, -100px) scale(1);}
60% { transform: translate(-100px, 100px) scale(1);}
80% { transform: translate(100px, 100px) scale(1);}
100% { transform: translate(0) scale(1);}
}
مجلد 1.docx
.png.62063b6981344d06430f1b2966f656ee.png)
.thumb.png.446860bc420eb0fb29ca10989e9bdc30.png)
.thumb.png.4c78be2bdd7665e499d220f6fed81f99.png)
_LI.jpg.de9e5a6e062db7aba3e09e3086ebf7fa.jpg)
.png.7ea1c9a7da7d222430cfea4a43e95881.png)
.png.ff6ba25bc7425c8715cdef46efb4588c.png)
.png.97f835ef454b1e25b1f5bb89ca9c6aef.png)