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 相关文章推荐
CSS3 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 HTML / CSS
用HTML5制作视频拼图的教程
May 13 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
sass 常用备忘案例详解
Sep 15 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 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 Mysql类 可以参考学习熟悉下
2009/06/21 PHP
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
Python matplotlib可视化实例解析
2020/06/01 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
Java的类与C++的类有什么不同
2014/01/18 面试题
小学英语教师先进事迹
2014/05/28 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
儿园租房协议书范本
2014/12/02 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python