​CSS技巧专栏:一日一例 13 -纯CSS实现晃晃悠悠背景不停滚动的按钮特效​

CSS技巧专栏:一日一例 13 -纯CSS实现晃晃悠悠背景不停滚动的按钮特效​

大家好,本篇文章给大家带来一个可爱的按钮,像个小宠物等待你抚摸和奖励,不知道它会不会引起你的关注呢?页面上这样的一个按钮,会不会让你忍不住把鼠标移动过去点一下呢?

本例图片

案例分析

这个按钮比之前我们介绍的按钮稍微复杂了一些些。但不外乎就是多了些小小的可爱的动画而已。

间隔的灰色条和白色的条纹布滚动效果,以及鼠标移动上去后,变成了醒目的荧光绿。仔细观察发现,那个滚动的条纹布并没有超过按钮上灰色的边框,而这个按钮,居然在灰色的边框外面还有一层白色的边框。那么,我们把这些样式分解一下:两个边框,可以都写在按钮上,一个用真的边框border,一个用box-shadow来模拟。三个动画:

  • 条纹滚动动画,采用背景色渐变位移动画,绑定在after层上。
  • 像个摇头摆尾的小狗狗一样时不时晃一晃的动画,绑定在按钮上。
  • 响应鼠标悬浮:条纹灰色变荧光绿色,可以用颜色变化,也可以用灰度滤镜。

布局代码

<button class="base">我滚?我摇!</button>

基础样式

:root{--main-bg-color: #000;--color:#000;--hover-color:#993399;
}
button{margin: 0.3em;outline: 0;border: none;
}
.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-sizin

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/50613.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机械学习—零基础学习日志(高数12——反三角函数)

零基础为了学人工智能&#xff0c;真的开始复习高数 反三角函数很困难&#xff0c;但是当建立了逻辑链条&#xff0c;还是能快速理解的。这个办法就是笛卡尔坐标系。 三角函数与反三角函数的个人理解 sinx与cosx&#xff0c;tanx&#xff0c;secx&#xff0c;其实都可以放在…

白嫖游戏指南,Epic喜加一:《暗影火炬城》

前言 Epic喜加一&#xff1a;《暗影火炬城》《暗影火炬城》简介&#xff1a; 前言 接下来有时间会分享一些游戏相关可以白嫖的资源&#xff0c;包括游戏本体、游戏素材资源等等。 有需要的小伙伴可以关注这个专栏&#xff0c;不定期更新哦&#xff01; 专栏&#xff1a;白嫖…

数据库系统概述

文章目录 数据库基本概念内容重点数据库定义计算机三大主要应用领域 数据管理基础数据与信息数据处理与数据管理 数据库技术的产生、发展数据库系统的组成优势组成部分 数据模型概念类型 数据库三级模式和二级映射目的组成部分 数据库系统设计步骤小结 数据库基本概念 内容 信…

羊大师:夏夜贪凉,但为啥肚子还要‘保暖计划’?

在这个夏夜&#xff0c;当空调与风扇齐飞&#xff0c;冰镇西瓜与凉面共舞之时&#xff0c;你是否也曾有过这样的疑惑&#xff1a;明明热得汗流浃背&#xff0c;为啥老一辈总念叨着“睡觉再热也要给肚子盖被子”&#xff1f;这背后&#xff0c;藏着的可不仅仅是老一辈的固执&…

链路聚合加单臂路由

一、实验目的及拓扑 实验目的&#xff1a;在路由器及交换机之间建立链接聚合&#xff0c;交换机接入两台主机并通过路由器子接口自动分配IP地址&#xff0c;通过单臂路由实现两台主机互联 二、基本配置 1、交换机配置 [S1]vlan batch 10 20 [S1-Eth-Trunk1]dis th # interf…

小型内衣裤洗衣机哪个牌子好?五款万分翘楚机型任你挑选!

在日常生活中&#xff0c;内衣洗衣机已成为现代家庭必备的重要家电之一。选择一款耐用、质量优秀的内衣洗衣机&#xff0c;不仅可以减少洗衣负担&#xff0c;还能提供高效的洗涤效果。然而&#xff0c;市场上众多内衣洗衣机品牌琳琅满目&#xff0c;让我们往往难以选择。那么&a…

AI复活,让老照片动起来【数字永生】

✅ 适宜人群&#xff1a;关注 AI 复活缅怀逝者或以此变现的人群 内容出品人&#xff1a;领航猿1号 更多AI知识分享&#xff1a;https://www.yuque.com/lhyyh/ai/readme?singleDoc 1、前言 AI“复活”实质上是利用人工智能技术&#xff0c;通过对人物已有“形象、声音、语言、…

用Python实现Cmpp协议的教程

引言&协议概述 &#xff08;CMPP&#xff09;是中国移动为实现短信业务而制定的一种通信协议&#xff0c;用于在客户端&#xff08;SP&#xff0c;Service Provider&#xff09;和中国移动短信网关之间传输短消息&#xff0c;有时也叫做移动梦网短信业务。CMPP3.0是该协议…

嵌入式Linux学习: 设备树实验

设备树&#xff08;DeviceTree&#xff09;是一种硬件描述机制&#xff0c;用于在嵌入式系统和操作系统中描述硬件设备的特性、连接关系和配置信息。它提供了一种与平台无关的方式来描述硬件&#xff0c;使得内核与硬件之间的耦合度降低&#xff0c;提高了系统的可移植性和可维…

立创梁山派--移植开源的SFUD和FATFS实现SPI-FLASH文件系统

本文主要是在sfud的基础上进行fatfs文件系统的移植&#xff0c;并不对sfud的移植再进行过多的讲解了哦&#xff0c;所以如果想了解sfud的移植过程&#xff0c;请参考我的另外一篇文章&#xff1a;传送门 正文开始咯 首先我们需要先准备资料准备好&#xff0c;这里对于fatfs的…

【ESP32 IDF 软件模拟SPI驱动 W25Q64存储与读取数组】

目录 SPISPI介绍SPI时序代码编写&#xff08;spi&w25q64&#xff09; 代码调试 SPI SPI介绍 SPI&#xff08;Serial Peripheral Interface&#xff0c;串行外围设备接口&#xff09;是一种高速、全双工、同步的串行通信总线&#xff0c;常用于微控制器与各种外围设备&…

苍穹外卖浏览器前端界面修改

背景&#xff1a; 客户原始方案是期望做一个Spring Boot Vue的饿了么系统&#xff0c;但时间上太仓促&#xff0c;所以建议选择开源的苍穹外码目作为作业提交。 客户接受了建议的方案后&#xff0c;期望对前端页面做一些个性化的定制修改。 过程&#xff1a; 苍穹外卖简单介…

【HTML+CSS】HTML超链接:构建网页导航的基石

目录 什么是HTML超链接&#xff1f; 基本语法 示例 链接到另一个网页 链接到同一页面内的不同部分 常用属性 在Web开发的广阔世界中&#xff0c;HTML&#xff08;HyperText Markup Language&#xff09;作为网页内容的标准标记语言&#xff0c;扮演着至关重要的角色。而在…

重拾CSS,前端样式精读-函数(颜色,计算,图像和图形)

前言 本文收录于CSS系列文章中&#xff0c;欢迎阅读指正 在计算机编程中&#xff0c;函数有着重要的作用和意义&#xff0c;它可以实现封装&#xff0c;复用&#xff0c;模块化&#xff0c;参数等功能效果&#xff0c;在如何在CSS中写变量&#xff1f;一文带你了解前端样式利…

操作系统杂项(十)

目录 一、简述socket中select、epoll的使用场景和区别 1、使用场景 2、区别 二、epoll水平触发和边缘触发的区别 三、简述Reactor和Proactor模式 1、Reactor 2、Proactor 3、区别 四、简述同步和异步的区别&#xff0c;阻塞和非阻塞的区别 1、同步与异步 2、阻塞与非…

深入分析 Android ContentProvider (五)

文章目录 深入分析 Android ContentProvider (五)ContentProvider 的性能优化和实践案例1. 性能优化技巧1.1. 数据库索引优化示例&#xff1a;添加索引 1.2. 批量操作与事务管理示例&#xff1a;批量插入操作 1.3. 使用异步操作示例&#xff1a;使用 AsyncTask 进行异步查询 1.…

Linux:基础

一、安装 二、 一些组件 2.1 git管理 集中式版本控制系统:版本库是集中存放在中央服务器的,需要时要先从中央服务器取得最新的版本进行修改,修改后再推送给中央服务器。集中式版本控制系统最大的毛病就是必须联网才能工作,网速慢的话影响太大。 分布式版本控制系统:分布…

Linux网络-wget命令

作者介绍&#xff1a;简历上没有一个精通的运维工程师。希望大家多多关注我&#xff0c;我尽量把自己会的都分享给大家&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 Linux服务器作为一个常用的网络服务器&#xff0c;主要的作用就是向客户端提供网络…

设计模式14-享元模式

设计模式14-享元模式 由来动机定义与结构代码推导特点享元模式的应用总结优点缺点使用享元模式的注意事项 由来动机 在很多应用中&#xff0c;可能会创建大量相似对象&#xff0c;例如在文字处理器中每个字符对象。在这些场景下&#xff0c;如果每个对象都独立存在&#xff0c…

PyCharm 2024.1.4:一站式教程与新特性解析

简介 PyCharm是由JetBrains开发的一款Python集成开发环境&#xff08;IDE&#xff09;&#xff0c;自发布以来&#xff0c;凭借其强大的功能、智能的代码补全、广泛的插件支持和用户友好的界面&#xff0c;成为了Python开发者的首选工具之一。无论是数据科学、Web开发还是其他…