CSS3 linear-gradient线性渐变生成加号和减号的方法


Posted in HTML / CSS onNovember 21, 2017

在商城项目中,购物车是一个很重要的功能。其中最常见的是购物车中对库存的“+-”操作,包括抢购后面有很多算法。但是作为前端来说,购物车的结算中的+-就是一个计算而已。传统的实现方式是通过图片来实现+-按钮,而本文却将使用CSS3的linear-gradient线性渐变来实现购物车的加减操作。

要实现一个减号效果非常简单,例如要实现一个10px*2px的减号图形,则CSS:

.minus {
    background-image: linear-gradient(to top, #666, #666);
    background-size: 10px 2px;
}

原理如下,先使用渐变生成一个铺满整个元素背景的纯色(#666)渐变图片,然后使用background-size属性控制成我们想要的大小,效果就实现了。

加号效果也是类似,只是要多一层linear-gradient的累加。

最终可以实现类似下图效果:

CSS3 linear-gradient线性渐变生成加号和减号的方法

和传统::before, ::afetr伪元素配合background-color或border相比,使用渐变背景生成有个非常重要的好处,那就是居中定位非常方便,直接在background属性后面加个center即可,而传统实现通常需要绝对定位,然后再巴拉巴拉一通代码来居中,很??碌摹?/p>

下面给出本实例的全部代码,css代码如下:

.btn {
    display: inline-block;
    background: #f0f0f0 no-repeat center;
    border: 1px solid #d0d0d0;
    width: 24px; height: 24px;   
    border-radius: 2px;
    box-shadow: 0 1px rgba(100,100,100,.1);
    color: #666;
    transition: color .2s, background-color .2s;
}
.btn:active {
    box-shadow: inset 0 1px rgba(100,100,100,.1);
}
.btn:hover {
    background-color: #e9e9e9;
    color: #333;
}
.btn-plus {
    background-image: linear-gradient(to top, currentColor, currentColor), linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px, 2px 10px;
}
.btn-minus {
    background-image: linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px;
}

关键的html代码如下:

<a href="javascript:" class="btn btn-plus" role="button" title="增加"></a>
<input value="1" size="1">
<a href="javascript:" class="btn btn-minus" role="button" title="减少"></a>

最终的运行效果就是和上面的贴图一样。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 HTML / CSS
CSS 实现Chrome标签栏的技巧
Aug 04 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 #HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 #HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 #HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 #HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 #HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 #HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 #HTML / CSS
You might like
用PHP实现文件上传二法
2006/10/09 PHP
php批量删除数据
2007/01/18 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
PHP7变量处理机制修改
2021/03/09 PHP
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
Javascript的this用法
2017/01/16 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
浅谈Python中range和xrange的区别
2017/12/20 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
Python如何实现动态数组
2019/11/02 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
pandas 对group进行聚合的例子
2019/12/27 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
维也纳通行证:Vienna PASS
2019/07/18 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
室内设计专业学生的自我评价分享
2013/11/27 职场文书
公司中秋节活动方案
2014/02/12 职场文书
老同学聚会感言
2014/02/23 职场文书
机关作风建设整改方案
2014/10/27 职场文书