پیشنمایش زنده
کد HTML
<div class="card">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
width="120"
class="App-logo"
>
<g stroke-width="0" id="SVGRepo_bgCarrier"></g>
<g
stroke-linejoin="round"
stroke-linecap="round"
id="SVGRepo_tracerCarrier"
></g>
<g id="SVGRepo_iconCarrier">
<path
stroke-width="1.5"
stroke="#cbe6ff"
d="M5 12V18C5 18 5 21 12 21C19 21 19 18 19 18V12"
></path>
<path
stroke-width="1.5"
stroke="#cbe6ff"
d="M5 6V12C5 12 5 15 12 15C19 15 19 12 19 12V6"
></path>
<path
stroke-width="1.5"
stroke="#cbe6ff"
d="M12 3C19 3 19 6 19 6C19 6 19 9 12 9C5 9 5 6 5 6C5 6 5 3 12 3Z"
></path>
</g>
</svg>
<div class="header">Welcome to SQL</div>
<button class="App-button">Start learning now</button>
</div>
کد CSS
.card {
background-color: #1f1e27;
border: 3px solid #cbe6ff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 26px;
font-weight: 700;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
padding: 30px 20px;
color: #cbe6ff;
border-radius: 45px;
}
.App-logo {
pointer-events: none;
margin-top: -10px;
}
.App-button {
padding: 10px 20px;
background-color: transparent;
color: #cbe6ff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: 15px;
border: 3px solid #cbe6ff;
border-radius: 5em;
margin-top: 20px;
transition: 0.2s;
cursor: pointer;
}
.App-button:hover {
color: #1e2127;
background-color: #cbe6ff;
}
@media (prefers-reduced-motion: no-preference) {
.card:hover .App-logo {
-webkit-animation: wobble-hor-bottom 0.9s ease-in both;
animation: wobble-hor-bottom 0.9s ease-in both;
}
}
/* ----------------------------------------------
* Generated by Animista on 2024-5-21 16:40:58
* Licensed under FreeBSD License.
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation wobble-hor-bottom
* ----------------------------------------
*/
@-webkit-keyframes wobble-hor-bottom {
0%,
100% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
15% {
-webkit-transform: translateX(-30px) rotate(-6deg);
transform: translateX(-30px) rotate(-6deg);
}
30% {
-webkit-transform: translateX(15px) rotate(6deg);
transform: translateX(15px) rotate(6deg);
}
45% {
-webkit-transform: translateX(-15px) rotate(-3.6deg);
transform: translateX(-15px) rotate(-3.6deg);
}
60% {
-webkit-transform: translateX(9px) rotate(2.4deg);
transform: translateX(9px) rotate(2.4deg);
}
75% {
-webkit-transform: translateX(-6px) rotate(-1.2deg);
transform: translateX(-6px) rotate(-1.2deg);
}
}
@keyframes wobble-hor-bottom {
0%,
100% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
15% {
-webkit-transform: translateX(-30px) rotate(-6deg);
transform: translateX(-30px) rotate(-6deg);
}
30% {
-webkit-transform: translateX(15px) rotate(6deg);
transform: translateX(15px) rotate(6deg);
}
45% {
-webkit-transform: translateX(-15px) rotate(-3.6deg);
transform: translateX(-15px) rotate(-3.6deg);
}
60% {
-webkit-transform: translateX(9px) rotate(2.4deg);
transform: translateX(9px) rotate(2.4deg);
}
75% {
-webkit-transform: translateX(-6px) rotate(-1.2deg);
transform: translateX(-6px) rotate(-1.2deg);
}
}