css手机端长摁背景变色,CSS3 悬停渐变背景色/点击扭曲/长按抖动的一组按钮动效...
CSS
语言：
CSSSCSS
确定
body {
text-align: center;
margin: 7rem auto;
background: #222;
}
.btn {
-webkit-appearance: none;
border: 0;
/* styles */
outline: 0;
position: relative;
background: -webkit-linear-gradient(45deg, #d38312 10%, #a83279 90%);
background: linear-gradient(45deg, #d38312 10%, #a83279 90%);
background-size: 200% 100%;
padding: 1.5rem 2rem;
color: white;
border-radius: 100px;
font-size: 1.3rem;
font-family: "Source Code Pro";
-webkit-transition: 0.3s;
transition: 0.3s;
}
.btn:hover {
-webkit-animation: bruh 3s linear infinite;
animation: bruh 3s linear infinite;
}
.btn:active {
-webkit-animation: nope 1s ease-in-out infinite;
animation: nope 1s ease-in-out infinite;
}
@-webkit-keyframes bruh {
0% {
background-position: 0 0;
}
50% {
background-position: 100% 0;
}
100% {
background-position: 0 0;
}
}
@keyframes bruh {
0% {
background-position: 0 0;
}
50% {
background-position: 100% 0;
}
100% {
background-position: 0 0;
}
}
@-webkit-keyframes nope {
0% {
-webkit-transform: scale(1.1) rotate(5deg);
transform: scale(1.1) rotate(5deg);
}
50% {
-webkit-transform: scale(0.9) rotate(-5deg);
transform: scale(0.9) rotate(-5deg);
}
100% {
-webkit-transform: scale(1.1) rotate(5deg);
transform: scale(1.1) rotate(5deg);
}
}
@keyframes nope {
0% {
-webkit-transform: scale(1.1) rotate(5deg);
transform: scale(1.1) rotate(5deg);
}
50% {
-webkit-transform: scale(0.9) rotate(-5deg);
transform: scale(0.9) rotate(-5deg);
}
100% {
-webkit-transform: scale(1.1) rotate(5deg);
transform: scale(1.1) rotate(5deg);
}
}
a {
display: table;
margin: 25px auto;
text-decoration: none;
color: #3c3c3c;
font-family: "Source Code Pro";
-webkit-transition: 0.3s;
transition: 0.3s;
}
a:hover {
color: white;
}