css3超酷的按钮鼠标经过特效
今天分享一个超酷的css3按钮鼠标经过特效，相信对大家对css3的学习和理解会有不小的帮助。具体请查看以下示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>爱心按钮特效</title>
</head>
<style>
body{
text-align: center;
padding: 10% 0;
}
a{
width: 240px;
height: 66px;
line-height: 66px;
text-align: center;
border-radius: 100px;
color: #fff;
text-decoration: none;
font-size: 17px;
font-weight: bold;
position: relative;
display: block;
z-index: 1;
margin: 0 auto;
}
a::before{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
content: "";
background-color: #20a0ff;
background-image: radial-gradient(circle farthest-corner at 100% 0,#f09c33 0,#f59234 4%,#f98736 7%,#fd7b38 10%,#ff6e3c 14%,#ff5f41 18%,#ff4e46 21%,#ff384b 25%,#fd1851 29%,#f90059 32%,#f50062 36%,#f0006c 39%,#e90077 43%,#e10083 46%,#d70090 50%,#20a0ff 75%,#20a0ff 100%);
background-position: 0 0;
background-size: 400% 100%;
border-radius: inherit;
transition: background-position 1s cubic-bezier(.35,.35,0,1);
}
a::after{
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 4rem;
height: 100%;
content: "";
background: linear-gradient(90deg,rgba(255,243,225,0),#fff3e1);
opacity: 0;
}
a:hover::before{
background-position: 85%;
}
a:hover::after{
animation: aihongxin .85s cubic-bezier(.65,0,.35,1) .15s;
}
@-webkit-keyframes aihongxin {
0% {
opacity: 0;
transform: translate3d(-4rem,0,0) skewX(45deg)
}
50% {
opacity: .15
}
to {
opacity: 0;
transform: translate3d(4rem,0,0) skewX(45deg)
}
}
</style>
<body>
<a href="http://www.codeae.com/" target="_blank">红爱心按钮特效</a>
运行测试代码
https://aihongxin.com/8135.html
页:
[1]