CSS技巧专栏：一日一例13-纯CSS实现晃晃悠悠背景不停滚动的按钮特效.zip资源-CSDN文库

共1个文件

html：1个

css按钮

css动画

css动画按钮

需积分: 5 174 浏览量 2024-07-26 20:46:28 上传评论收藏 2KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

CSS技巧专栏：一日一例 13 -纯CSS实现晃晃悠悠背景不停滚动的按钮特效.zip （1个子文件）

CSS技巧专栏：一日一例 13 -纯CSS实现晃晃悠悠背景不停滚动的按钮特效.html 5KB

<!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>

评论收藏

内容反馈