最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
利用div+css3实现一个背景渐变的button按钮代码展示
时间:2022-09-28 编辑:坚强 来源:一聚教程网
本文为大家带来了关于利用div+css3实现一个背景渐变的button按钮代码展示,感兴趣的小伙伴一起来看看吧。
随着目前前端页面的需求不断提升,有些场景需要渐变背景的元素。本文利用div和css3新属性,实现了一个背景渐变的按钮,具体如下:
1.background: linear-gradient 背景为渐变色属性
2.利用css3中动画特性animation,实现背景从左至右变化(color_move)
3.为了实现渐变效果,将background的宽度拉长至400%
上代码:
html:
体 验»
css:
@keyframes arrow_move { /* 开始状态 */ 0% { left: 130px; } /* 结束状态 */ 100% { left: 140px; } } @keyframes color_move { /* 开始状态 */ 0% { background-position: 0% 0%; /* 水平位置 垂直位置 */ } 50% { background-position: 50% 0%; } /* 结束状态 */ 100% { background-position: 100% 0%; } } .btn_demo { border-radius: 10px; position: relative; background: linear-gradient( 90deg, #373d42 0%, #2679dd 50%, #373d42 100%); background-size: 400% 100%; animation: color_move 5s infinite ease-in-out alternate; cursor: pointer; } .btn_demo:hover { background: #2679dd; } .btn_demo:active { background: #373d42; } .btn_demo > .text { /* background: yellow; */ text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 20px; color: #fff; font-weight: bold; } .btn_demo > .arrow { /* background: green; */ text-align: center; position: absolute; font-size: 30px; color: #fff; top: 46%; transform: translateY(-50%); left: 130px; /* 移动130~150px */ /* 调用动画 */ animation-name: arrow_move; /* 持续时间 */ animation-duration: 1s; /* 无限播放 */ animation-iteration-count: infinite; }
效果如下:
以上就是关于利用div+css3实现一个背景渐变的button按钮代码展示的全部内容了,感兴趣的小伙伴记得点击关注哦。
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31