大家好,我是 Just,这里是「设计师工作日常」,今天分享的是一个背景不停变幻的按钮,适用在一些比较年轻、青春风格的网站app中,也可在比较多巴胺风、风格强烈的专题页中使用。
最新文章通过公众号「设计师工作日常」发布。
目录
整体效果
知识点:
1️⃣background-image
属性
2️⃣ 伪元素::before
和::after
3️⃣content: attr(...)
用法
4️⃣transform
变形属性和transition
过渡属性
5️⃣:hover
选择器和:active
选择器
6️⃣animation
动画
思路:按钮使用渐变背景,然后让渐变背景旋转,再加一点模糊效果。
适用在一些比较年轻、青春风格的网站app中,也可在比较多巴胺风、风格强烈的专题页中使用。
核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。
核心代码
html 代码
button
按钮主体标签,绑定data-text
值。
css 部分代码
1、定义按钮主体
button
的基本样式外观,背景为background-color: transparent;
透明,overflow: hidden;
限制溢出的元素。
2、基于主体
button
分别创建伪元素::before
和::after
,伪元素::before
作为按钮背景,通过background-image
将背景色设置为渐变背景色,filter: blur(...)
设置模糊度,最后设置animation
动画,让伪元素::before
循环旋转360°
。
3、伪元素
::after
通过content: attr(data-text)
获取button
绑定的data-text
值,作为按钮上面的文字内容。
4、最后根据
:hover
和:active
选择器,来改变伪元素::before
、伪元素::after
以及按钮被点击时的样式变化。
注意: 当伪元素 ::before
和 ::after
基于某个主体创建后,如果根据 :hover
等选择器在判断主体时,来改变伪元素的样式变化,请注意写法为 主体标签:hover:before
,例如此文中的 .btn63:hover::after
。
完整代码如下
html 页面
css 样式
页面渲染效果
以上就是所有代码,以及简单的思路,希望对你有一些帮助或者启发。
我是 Just,这里是「设计师工作日常」,求点赞求关注!