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 相关文章推荐
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
css3的transition属性详解
Dec 15 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 HTML / CSS
html5实现canvas阴影效果示例
May 07 HTML / CSS
HTML5标签大全
Nov 23 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 23 HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
Apr 28 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
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
用jquery实现学校的校历(asp.net+jquery ui 1.72)
2010/01/01 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
python显示天气预报
2014/03/02 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
python基于opencv检测程序运行效率
2019/12/28 Python
pytorch中图像的数据格式实例
2020/02/11 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
医学专业应届生的自我评价
2014/02/28 职场文书
班主任与学生安全责任书
2014/07/25 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
通用员工手册范本
2015/05/14 职场文书
债务追讨律师函
2015/06/24 职场文书
正则表达式基础与常用验证表达式
2022/06/16 Javascript