css3 تە ھەركەتجان تەگلىكى بار كۇنۇپكا ياساش
سالام تورداشلار، بۈگەن مۇشۇ css3 تىن پايدىلىنىپ مائۇس ئۈستىگە كەلگەندە توختىماي تەگلىك رەڭگى ئۆزگىرەپ نۇر چېچىپ تۇرىدىغان كۇنۇپكا ياساش دەرىسىنى ئېلىپ كەلدىم سىلەرگە ئارزاق پايدىسى تىگىپ قالسا ئەجەپ ئەمەس، تۆۋەندە ئۈنۈم رەسىمى بىرىلدى.
تۆۋەندىكىسى تەپسىلى سىن دەرىسلىكى
تۆۋەندىكىسى html كودى
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>يانقۇت سالونى yankut</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="javascript:;">ئۆزگۈرۈشچان كۇنۇپكا</a>
</body>
</html>
تۆۋەندىكىسى css كودى
* {
margin: 0;
padding: 0;
}
body {
background: #000;
}
a {
text-decoration: none;
color: #fff;
position: absolute;
width: 400px;
height: 100px;
text-align: center;
line-height: 100px;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
left: 50%;
top: 50%;
transform: translate(-200px, -50px);
border-radius: 50px;
background-size: 400%;
font-size: 25px;
z-index: -1;
}
a::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
border-radius: 50px;
background-size: 400%;
z-index: -1;
filter: blur(15px);
}
a:hover::before {
animation: sun 8s infinite;
}
a:hover {
animation: sun 8s infinite;
}
@keyframes sun {
100% {
background-position: -400% 0;
}
}