纯CSS实现beautiful按钮

大家好,我是若川。邀你进源码共读群学习交流。今天分享一篇好文。可收藏~

近期工作中遇到一个需求——实现一些酷炫的按钮,看到效果图之后,按钮确实漂亮,有弹跳、颜色渐变、扫光、霓虹灯,瞬间激起了我的好奇心,开启了研究实现之路。

所有button.gif

一、基础储备

实现这些漂亮的按钮主要利用了一些CSS的属性,主要有animation、background-size、background-position、linear-gradient(),下面对这四个内容进行简要概述。

1.1 animation

animation 属性用来指定一组或多组动画,每组之间用逗号相隔,其语法如下所示,详细用法可参考MDN:

animation: name duration timing-function delay iteration-count direction;

1.2 background-size

background-size 设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸,其语法如下所示,详细用法可参考MDN:

background-size: length|percentage|cover|contain;

1.3 background-position

background-position 为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的,详细用法可参考MDN.

在使用这个属性时有一个位置必须特别注意,否则很难理解为什么background-position指定的位置和自己想要的不一样,这个位置就是其百分比的计算公式,通过下面公式就可以理解设定百分比后背景图片成了什么结果了:

background-postion:x y;
x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。
y:{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。

1.4 linear-gradient

linear-gradient()  函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型,是一种特别的<image>数据类型,其语法如下所示,详细用法可参考MDN:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

二、效果实现

下面的四种动画效果其实就是充分利用CSS属性实现的,让我们具体来看看都是如何实现的。

2.1 弹跳效果

第一种效果是弹跳效果,所谓弹跳效果就是按钮在大小之间变换,其思想如下:

  1. 创建一个静态的按钮;

  2. 然后利用animation属性,创建动画,当变换到50%时,按钮变换到1.2倍,到动画100%时按钮又恢复原样。

button1.gif
<div class="button1"><span>立即下载</span>
</div>
.button1 {width: 200px;height: 46px;line-height: 46px;background: #2e82ff;color: #ffffff;font-size: 18px;border-radius: 27px;animation: zoomIn 1.5s infinite;text-align: center;
}
@keyframes zoomIn {50% {transform: scale(1.2);}100% {transform: scale(1);}
}

2.2 颜色渐变效果

第二种是颜色渐变效果,所谓颜色渐变效果就是颜色从一种颜色到另一种颜色,然后循环如此,其思想如下:

  1. 创建一个静态按钮;

  2. 添加渐变颜色对称的的背景色;

  3. 背景色x轴方向拉伸至200%,这样就可以让原来对称轴处的背景色由中间到了右侧;

  4. 最后利用animation实现操作位置的动画,模拟出颜色不断渐变的动画。

button2.gif
<div class="button2"><span>立即下载</span>
</div>
.button2 {display: inline-block;width: 200px;height: 46px;line-height: 46px;color: #ffffff;font-size: 18px;border-radius: 27px;text-align: center;background-image: linear-gradient(to right, #ff3300 0%, #eb4402 25%, #ffc404 50%, #eb4402 75%, #ff3300 100%);background-size: 200%;animation: colorGradient 1.5s infinite;
}@keyframes colorGradient {0% {background-position: 0 0;}100% {background-position: 100% 0;}
}

2.3 扫光效果

第三种是扫光效果,所谓扫光指的就是一个白色透明颜色从一端不断向另一端扫描,其思想如下:

  1. 创建一个静态按钮;

  2. 在静态按钮前利用::before伪元素,设置该元素的背景色为白色微透明的颜色,并将该中心位置通过缩放移动到容器右侧;

  3. 利用animation实现动画,并不断变换位置实现扫光效果。

button3.gif
<div class="button3"><span>立即下载</span>
</div>
.button3 {width: 200px;height: 46px;line-height: 46px;background-color: #2e82ff;color: #ffffff;font-size: 18px;text-align: center;border-radius: 27px;position: relative;
}
.button3::before {content: "";position: absolute;left: 0px;width: 100%;height: 100%;background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 70%);background-size: 200%;animation: wipes 1s infinite;
}
@keyframes wipes {0% {background-position: 0 0;}100% {background-position: 100% 0;}
}

2.4 霓虹灯效果

第四种是霓虹灯效果,所谓霓虹灯效果其实更像一种斜线在不断移动,其原理如下所示:

  1. 创建一个静态按钮;

  2. 在静态按钮前利用::before伪元素,设置该元素的背景色为倾斜的霓虹灯效果,该效果实现是通过创建一个20px * 20px的正方形背景,然后利用linear-gradient将背景色135°方向渐变倾斜,实现小返回的霓虹灯,然后通过背景不断repeat实现整个的效果;

  3. 利用animation实现动画,并不断变换位置实现霓虹灯效果。

button4.gif
<div class="button4"><span>立即下载</span>
</div>
.button4 {width: 200px;height: 46px;line-height: 46px;background: #2e82ff;color: #ffffff;font-size: 18px;border-radius: 27px;text-align: center;position: relative;overflow: hidden;
}
.button4:before {content: "";position: absolute;left: 0px;width: 100%;height: 100%;background-size: 20px 20px;background-image: linear-gradient(135deg, rgba(255, 0, 0, 0.1) 0%, rgba(255, 0, 0, 0.1) 25%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 0, 0, 0.1) 50%, rgba(255, 0, 0, 0.1) 75%,rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.1) 100%);animation: moveblock 0.5s linear infinite;
}
@keyframes moveblock{0% {background-position: 0px 0px;}100% {background-position: 20px 0px;}
}

最近组建了一个江西人的前端交流群,如果你是江西人可以加我微信 ruochuan12 私信 江西 拉你进群。


推荐阅读

我在阿里招前端,该怎么帮你(可进面试群)
我读源码的经历

初学者也能看懂的 Vue3 源码中那些实用的基础工具函数
老姚浅谈:怎么学JavaScript?

················· 若川简介 ·················

你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》多篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看年度总结。
同时,活跃在知乎@若川,掘金@若川。致力于分享前端开发经验,愿景:帮助5年内前端人走向前列。

识别方二维码加我微信、拉你进源码共读

今日话题

略。欢迎分享、收藏、点赞、在看我的公众号文章~

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

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

相关文章

linux的内核有多小,Linux 内核有小bug?

今天读着读着Linux代码&#xff0c;竟然无意中发现Linux 0.11内核有个小bug&#xff0c;呵呵&#xff0c;人非圣贤孰能无过。// 在目录项数据块中搜索匹配指定文件名的目录项&#xff0c;首先让de 指向数据块&#xff0c;并在不超过目录中目录项数// 的条件下&#xff0c;循环执…

菜单窗口_菜单

菜单窗口The Hamburger Menu widget is on every other site nowadays. It has become synonymous with the web and, perhaps even more so, with web development. Have, for instance, a look at Dribbble or Codepen. There you’ll find a fair share of examples. They c…

怎么在PDF上修改文字,PDF修改文字的步骤

怎么在PDF文件上修改文字呢&#xff1f;其实现在的很多的PDF文件上会出现文字错误的情况&#xff0c;想要修改PDF文件上面的文字却不知道怎么修改&#xff0c;想要修改PDF文件还是比较简单的&#xff0c;使用专业的PDF编辑器就可以进行操作了&#xff0c;下面小编就为大家分享一…

读完 Vue 发布源码,小姐姐回答了 leader 的提问,并优化了项目发布流程~

大家好&#xff0c;我是若川。这是 源码共读 第三期活动&#xff0c;纪年小姐姐的第三次投稿。纪年小姐姐学习完优化了自己的项目发布流程&#xff0c;而且回答了leader对她的提问&#xff0c;来看看她的思考和实践。第三期是 Vue 3.2 发布了&#xff0c;那尤雨溪是怎么发布 Vu…

小程序 富文本自适应屏幕_自适应文本:跨屏幕尺寸构建可读文本

小程序 富文本自适应屏幕Many of you may already know about responsive web design. Cited from Wikipedia, responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and windows or screen sizes. The respon…

Vue、React 之间如何实现代码移植?

大家好&#xff0c;我是若川。面对前端最火的两个框架&#xff0c;学 React 还是 Vue &#xff1f;这可能是每个前端人都曾纠结过的问题。不过&#xff0c;现在你不用纠结了——因为很多公司都是两个框架都有大量的应用&#xff0c;取决于不同团队的技术选型&#xff0c;特别是…

linux mariadb 乱码,配置mariadb远程访问权限,解决数据库乱码问题

配置mariadb远程访问权限&#xff1a;1)登录数据库:# mysql -uroot -p2)配置授权数据库用户远程访问权限&#xff0c;%表示所有远程IP&#xff0c;也可以指定IP。WITH GRANT OPTION表示mysql数据库的grant表中重新加载权限数据&#xff1a;GRANT ALL PRIVILEGES ON *.* TO 用户…

平面设计师和ui设计师_游戏设计师的平面设计

平面设计师和ui设计师Design is a very ancient practice, but graphic design really found its core principles post World War One. Games are also very ancient but video games are still finding their feet. I think graphic design has a few things to teach people…

java合成海报的工具类

2019独角兽企业重金招聘Python工程师标准>>> package io.renren.common.utils;import cn.hutool.core.lang.Console; import io.renren.modules.oss.cloud.OSSFactory;import javax.imageio.ImageIO; import javax.imageio.stream.ImageOutputStream; import java.a…

a说b说谎b说c说谎说d说_说谎的眼睛及其同伙

a说b说谎b说c说谎说d说The eye is a complex and temperamental organ. By the end of this article, designers will have a better understanding of how the eye works with the brain, how it deconstructs images that the brain stitches back up again, and how the two…

一名运营,自学一年前端,成功入职杭州某独角兽企业,他的面试经验和学习方法等分享...

大家好&#xff0c;我是若川。这是我的微信群里小伙伴年年 的投稿。他是19年毕业&#xff0c;之前做的是运营相关的工作&#xff0c;在我的交流群里非常活跃&#xff0c;自学一年前端&#xff0c;目前成功转行入职杭州一家独角兽企业。相信他的文章能带给大家一些启发和激励。0…

百度指数可视化_可视化指数

百度指数可视化Abstract:– Analysis of the visual representations of exponentials.– Proposals to solve current visualization issues.– Call to discussion to come up with a better visual representation convention.抽象&#xff1a; –分析指数的视觉表示形式。…

阿里云谦大佬:时间精力有限的情况下如何高效学习前端?

大家好&#xff0c;我是若川。最近组织了源码共读活动1个月&#xff0c;200人&#xff0c;一起读了4周源码&#xff0c;欢迎加我微信 ruochuan12 进群参与。今天分享一篇阿里云谦大佬的文章。昨天在群里也有小伙伴说到&#xff1a;大佬们是需要什么学什么&#xff0c;新手一般是…

sketch钢笔工具_Sketch和Figma,不同的工具等于不同的结果

sketch钢笔工具We like to compare the difference between various design programs and debate about which one is the most powerful. But we often forget to reflect on how using one of these tools is impacting our product. A powerful artist would say that he ca…

程序下载

Zaxis终端前置机 版 本下 载特 性1.20.1104.102ZaxisSetup.rar 分类: 程序下载转载于:https://www.cnblogs.com/baijinlong/archive/2011/05/13/2045263.html

提升效率的Vue组件开发和实战技巧

大家好我是若川。现在的大前端时代&#xff0c;是一个动荡纷争的时代&#xff0c;江湖中已经分成了很多门派&#xff0c;主要以Vue&#xff0c;React还有Angular为首&#xff0c;形成前端框架三足鼎立的局势。Vue在前端框架中的地位就像曾经的 jQuery&#xff0c;由于其简单易懂…

linux下telnet失败怎么处理,CentOS下telnet退出失败的解决办法

最近有CentOS用户反映在调试网络程序时出现了问题&#xff0c;服务虽然启动了&#xff0c;但客户端却无法连接上&#xff0c;用telnet连接后发现是Windows防火墙的问题&#xff0c;可是用telnet命令连接成功后发现退不出去了&#xff0c;这该怎么办&#xff1f;下面小编就给大家…

figma下载_Figma中的动态内容和颜色

figma下载First off, why use dynamic data?首先&#xff0c;为什么要使用动态数据&#xff1f; It’s easy to create and manage long lists of content 创建和管理一长串内容很容易 You get a better idea of what your product will look like with actual data 通过实际…

你可能不知道的package.json

大家好&#xff0c;我是若川。最近组织了源码共度活动&#xff1a;1个月&#xff0c;200人&#xff0c;一起读了4周源码&#xff0c;参与的小伙伴都表示收获很大。如果感兴趣可以点击链接扫码加我微信 ruochuan12。今天推荐一篇相对简单的文章。前言在上一篇npm init vitejs/ap…

基于上下文的rpn_构建事物-产品评论视频中基于上下文的情感分析

基于上下文的rpnThe word “Social” has taken a whole new meaning in today’s digital era. Simply going out to enjoy is no longer the only “social” criteria. Social now is — giving a peek in your personal and professional life to your connections. Facebo…