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 相关文章推荐
移动端rem布局的两种实现方法
Jan 03 HTML / CSS
css3打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
使用phonegap播放音频的实现方法
Mar 31 HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 HTML / CSS
CSS实现单选折叠菜单功能
Nov 01 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 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中实现Javascript的escape()函数代码
2010/08/08 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
php查询内存信息操作示例
2019/05/09 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
python基于win32api实现键盘输入
2020/12/09 Python
创新比赛获奖感言
2014/02/13 职场文书
门店业绩提升方案
2014/06/08 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
初中优秀学生评语
2014/12/29 职场文书
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技