今天分享一个超酷的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.openjq.com/" target="_blank">红爱心按钮特效</a>
运行测试代码
|
