<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS技巧专栏：一日一例 13 -纯CSS实现晃晃悠悠背景不停滚动的按钮特效</title>
<style>
*{
margin:0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:root{
--main-bg-color: #111;
--color:#000;
--hover-color:#ff1a75;
}
body {
width:100%;
height: auto;
background: var(--main-bg-color);
}
button{
margin: 0.3em;
outline: 0;
border: none;
}
.container{
/* 居中 */
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.base{
position: relative;
padding: 1rem 3rem; /* 用 padding 撑起按钮的宽度和高度 ，并确保了按钮文字水平方向居中 */
font-family: "微软雅黑", sans-serif;
font-size: 1.5rem;
line-height: 1.5rem; /* 行高和字号大小相等，可以实现按钮文字在按钮内垂直居中 */
font-weight:700;
color: var(--color); /* 文字颜色为预定义的前景色 */
cursor: pointer; /* 鼠标移动到按钮上时候的形状：手型 */
user-select: none; /* 让用户不能选择按钮上的文字 */
white-space: nowrap; /* 避免英文单词间的空格导致文字换行 */
border-radius: 2rem;
text-decoration: none;
text-transform:uppercase; /* 字母自动修正为大写 */
transition: all .5s; /* 按钮响应动画效果的持续时间 */
margin: 1.5rem 2rem;
}
/* 背景斜向不停滚动的按钮 */
.line-scroll{
box-sizing: border-box;
position: relative;
color: #333;
border:2px solid #eee;
/* 外边框 */
box-shadow: inset 0 0 0 3px #666; /* 内阴影用来写深灰色的边框 */
animation: move 3s infinite; /* 绑定按钮摇摇晃晃的动画，动画名：move，三秒，循环 */
-webkit-animation: move 3s infinite;
transform-origin: bottom ; /* 摇摇晃晃的动画以按钮bottom为中心 */
-webkit-transform-origin: bottom;
}
.line-scroll:after {
content: " ";
position: absolute;
border-radius: 2rem;
top:2px;
left: 2px;
width: calc(100% - 4px);
height: calc(100% - 4px);
background-size: 20px 20px;
background-image: linear-gradient(135deg, rgba(180, 255, 0, 0.3) 0%, rgba(180, 255, 0, 0.3) 25%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 50%, rgba(180, 255, 0, 0.3) 50%, rgba(180, 255, 0, 0.3) 75%,rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.3) 100%);
animation: moveblock 0.5s linear infinite;
filter:grayscale(100%);
transition: .6s all;
}
.line-scroll:hover:after{
filter:grayscale(0%); /* 清除条纹背景色的灰度滤镜效果 */
transition: .6s all;
}
.line-scroll:hover{
color: #000;
border:2px solid rgba(180, 255, 0, 1); /* 改变按钮边框颜色 */
animation: move 3s infinite;
-webkit-animation: move 3s infinite;
}
/* 背景色滚动动画 */
@keyframes moveblock{
0% {
background-position: 0px 0px;
-webkit-background-position: 0px 0px;
}
100% {
background-position: 20px 0px;
-webkit-background-position: 20px 0px;
}
}
/* 按钮摇摇晃晃动画 */
@keyframes move
{
0%, 65%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
70% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
75% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
80% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
85% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
90% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
95% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
100% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
}
@-webkit-keyframes move{
0%, 65%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
70% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
75% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
80% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
85% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
90% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
95% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
100% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
}
</style>
</head>
<body>
<div class="container">
<button class="base line-scroll">我滚？我摇！</button>
<br><br><br><br><br><br>
<button class="base line-scroll">背景不停滚动</button>
</div>
</body>
</html>
