Jumping Switch Component Made

master
Pedram Keshavarzi 3 years ago
parent 60937390c3
commit eae8cfd193
  1. 55
      src/Components/switch/switch.css
  2. 13
      src/Components/switch/switch.js
  3. 7
      src/Pages/Home/Part1/homePart1.css
  4. 9
      src/Pages/Home/Part1/homePart1.js

@ -0,0 +1,55 @@
.switch {
position: relative;
}
.switch input[type="checkbox"] {
visibility: hidden;
position : absolute;
}
.switch input[type="checkbox"]:checked + label {
transform: rotate(180deg);
}
.switch input[type="checkbox"]:before {
transform: translateX(35.5px);
background-color: #fff;
}
.switch label {
display: flex;
width: 17px;
height: 30px;
border: 1px solid #E1E1E1;
border-radius: 99em;
position: relative;
transition: transform 0.3s ease-in-out;
transform-origin: 50% 50%;
}
.switch label:before {
transition: transform 0.3s ease;
transition-delay: 0s;
content: "";
display: block;
position: absolute;
width: 15px;
height: 15px;
background-color: rgba(19,47,82,0.66);
border-radius: 50%;
top: 0px;
left: 1px;
animation: jump 0.8s infinite;
transform: rotate(180deg);
animation-fill-mode: both;
}
@keyframes jump {
0% { transform: translate(0, 000%) ; }
50% { transform: translate(0, 100%); }
55% { transform: translate(0, 100%) rotate(15deg); }
60% { transform: translate(0, 100%) rotate(-15deg); }
65% { transform: translate(0, 100%) rotate(15deg); }
70% { transform: translate(0, 100%) rotate(-15deg); }
100% { transform: translate(0, 00%) ; }
}

@ -0,0 +1,13 @@
import React from "react";
import "./switch.css";
const Switch = () => {
return (
<div className="switch">
<input type="checkbox" id="toggle" />
<label for="toggle"></label>
</div>
);
}
export default Switch;

@ -7,7 +7,7 @@
opacity: 0.35;
box-shadow: 0px 0px 38px #1577F8;
margin-left:-5em;
filter: blur(8px);
filter: blur(70px);
}
.HomePart1{
@ -85,4 +85,9 @@
margin:10px;
padding: 10px;
font-size: 15px;
}
.HomePart1 .switchSection{
display: flex;
flex-direction: column;
align-items: center;
}

@ -1,6 +1,7 @@
import React from "react";
import KhabarNameh from "../../../Components/khabarNameInput/KhabarNameh";
import MobileMockup from "../../../Components/mobileMockup/mobileMockup";
import Switch from "../../../Components/switch/switch";
import './homePart1.css';
@ -42,11 +43,15 @@ const HomePart1 = () => {
تمام ! آخرین مرحله باید کد یا پلاگین ما رو روی وبسایتتون ثبت کنید تا بتونید با مشتریانتون ارتباط برقرار کنید
</div>
</div>
</div>
<div className="switchSection">
<Switch />
</div>
</div>
</div>
</div>
);
};

Loading…
Cancel
Save