大家好,我是 Just,这里是「设计师工作日常」,今天分享的是使用纯 css 打造一个跑马灯效果的按钮。
最新文章通过公众号「设计师工作日常」发布。
目录
整体效果
知识点:
①:hover
的灵活使用
②text-shadow
属性的使用
③animation
动画的使用
思路:
按钮上分别写出文字内容以及其跑马灯的文字内容,然后利用:hover
来显示隐藏文字内容和跑马灯动画的切换。
核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。
核心代码
html 代码
a
标签作为按钮主体,然后.abtn57
作为按钮上的文字内容,.bg57
作为跑马灯主体内容。
css 部分代码
1、先定义按钮
.abtn57
的大小尺寸等样式,这里要加上overflow: hidden
,防止内容溢出。
2、然后定义
.btn57
和.bg57
的共同样式;然后再利用text-shadow
属性,给.bg57
投影出三个投影,分别定义其 x 轴的值为90px
、-90px
、-180px
,然后给.bg57
加上动画属性,定义动画参数,让 3 个投影以及其.bg57
的原文字元素沿 x 轴从左往右移动,形成跑马灯效果。
3、根据伪元素
:hover
状态,让.btn57
和.bg57
切换其隐藏显示状态。
完整代码如下
html 页面
css 样式
页面渲染效果
以上就是所有代码,以及简单的思路,希望对你有一些帮助或者启发。
我是 Just,这里是「设计师工作日常」,求点赞求关注!