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 选择器 基本选择器介绍
Jan 21 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 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过滤危险html代码的函数
2008/07/22 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
node.js中的console用法总结
2014/12/15 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
基于Python闭包及其作用域详解
2017/08/28 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
资助贫困学生倡议书
2014/05/16 职场文书
减负增效提质方案
2014/05/23 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python