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 相关文章推荐
a标签的css样式四个状态
Mar 09 HTML / CSS
css3 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
canvas画布实现手写签名效果的示例代码
Apr 23 HTML / CSS
IE9下html5初试小刀
Sep 21 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 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 在线打包_支持子目录
2008/06/28 PHP
PHP小程序自动提交到自助友情连接
2009/11/24 PHP
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
Javascript中暂停功能的实现代码
2007/03/04 Javascript
用javascript自动显示最后更新时间
2007/03/15 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
Python实现删除文件但保留指定文件
2015/06/21 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
Django中间件实现拦截器的方法
2018/06/01 Python
Python操作MySQL数据库的方法
2018/06/20 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
Python将字典转换为XML的方法
2020/08/01 Python
如何一键升级Python所有包
2020/11/05 Python
金融专业推荐信
2013/11/14 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
交通事故和解协议书
2015/01/27 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python