css3 linear-gradient实现购物车地址选择信封效果
对于css3的渐变前端的童鞋一定不陌生,在一些电商网站会为了美化将地址选择做成信封样式(个人感觉很稀饭~),看了一下它的实现方式,大多数是以图片的形式,持着优化的心态尝试着用css3 linear-gradient实现信封效果一下是效果图
下面我们开始喽~
html结构如下:
<div class="letter-box">
<div class="letter-border">
</div>
</div>
css样式如下:
.letter-box{
width: 278px;
height: 176px;
padding: 5px;
box-sizing: border-box;
}
.letter-border{
width: 100%;
height: 100%;
background: #fbfaf5;
}
渐变是写在letter-box上的,然后letter-border用颜色遮住中间的部分。
接下来我们对letter-box写渐变,首先我们先来分析一下图上边的渐变其实一共有三个颜色白色、红色和蓝色。我们都知道在用linear-gradient的时候除了最开始的时候定义渐变的角度我们还要定义颜色和颜色所占的比例,颜色我们现在已经知道了,那么我们现在来说一下这个比例怎么确定。
观察效果图我们可以找到规律一个红色、一个白色、一个蓝色、一个白色为一个循环,那么我们的规律数为4,我们的比例用100%/(我们的规律数*2)=12.5%就是我们的比例。解释一下为什么要用我们的规律数*2,不应该是规律数是一个组合吗?NO!把一个组合数的颜色放在一个正方体里边,为了方便大家理解p了一个效果图
这个应该很直观了我们把大的box看成是以小正方体为单位repeat的就可以了
.letter-box{
width: 278px;
height: 176px;
padding: 5px;
box-sizing: border-box;
background: linear-gradient(45deg,#f25953 12.5%,#fbfaf5 12.5%,#fbfaf5 25%,#5590d6 25%,#5590d6 37.5%,#fbfaf5 37.5%,#fbfaf5 50%,#f25953 50%,#f25953 62.5%,#fbfaf5 62.5%,#fbfaf5 75%,#5590d6 75%,#5590d6 87.5%,#fbfaf5 87.5%,#fbfaf5 100%);
background-size: 70px 70px;
}
为了达到效果并没有做兼容,大家在实际工作中使用linear-gradient记得要加前缀,菜鸟一枚多多交流~
css3 linear-gradient实现购物车地址选择信封效果的更多相关文章
- 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)
考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...
- CSS3 过渡特性创建信封效果的联系表单
最近给大家分享 CSS3 效果比较多,都是充分运用了 CSS3 来实现的.通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享使用 CSS3 过渡特性实现的信 ...
- 四级地址插件升级改造(京东商城地址选择插件)city-picker
最近公司做的项目要和京东的数据做对接,所以要做个类似京东商品的详情页.页面的数据,是可以从京东接口获取到的,但是地址插件选择的效果需要自己实现.前端的同事在之前的项目中,已经选择了一款地址插件(cit ...
- 页面中引入mui 地址选择,点击页面中其他input时页面回到顶部
问题:在页面中引入mui地址选择时,点击页面中的input页面会滚到顶部(谷歌浏览器中出现的bug),在手机上点击input会出现跳动.开始的时候是想修改mui.min.js里的滚动事件,但是后来找到 ...
- vue仿淘宝地址选择组件
Vue组件:省市区地址选择组件 <template> <div v-show="addressSelectShow" :style="{'left': ...
- Android仿美团地址选择
最近做了这个功能,分享一下,用的是百度地图api,和美团外卖的地址选择界面差不多,也就是可以搜索或者滑动地图展示地址列表给用户选择,看下效果图先. 文章重点 1.展示地图并定位到“我”的位置2.滑动地 ...
- FCC---Create a Gradual CSS Linear Gradient
Applied Visual Design: Create a Gradual CSS Linear Gradient background: linear-gradient(gradient_dir ...
- CSS3 @font-face实现颜色大小可控的三角效果——张鑫旭
一.我之前介绍过的三角实现效果回顾 这里所说的三角效果之等腰直角三角形效果(等边三角形有现成字符实现,没什么好说的:还有图片实现三角众人皆知,不予以说明): 1. 字符实现三角效果关于字符实现三角我早 ...
- iOS开发——UI篇&下拉弹出列表选择项效果
下拉弹出列表选择项效果 右边菜单中的按键,点击弹出一个列表可选择,选择其中一个,响应相应的事件并把文字显示在右边的菜单上:弹出下拉效果使用LMDropdownView插件,可以用POD进行加载pod ...
随机推荐
- 信息安全-5:RSA算法详解(已编程实现)[原创]
转发注明出处:http://www.cnblogs.com/0zcl/p/6120389.html 背景介绍 1976年以前,所有的加密方法都是同一种模式: (1)甲方选择某一种加密规则,对信息进行加 ...
- Maven常用命令
开发中常用的命令: 1. mvn compile 编译源代码2. mvn test-compile 编译测试代码3. mvn test 运行测试4. mvn package 打包,根据pom.xml打 ...
- 项目持续集成环境(jenkins + SVN + maven + tomcat)
整体流程 每次SVN上代码有变动,触发自动构建动作,并部署到服务器的tomcat上,具体流程: 1.SVN上提交代码修改 2.maven执行Goals 3.将web工程打成war包 4.关闭服务器的t ...
- SpringMVC(关于HandlerMapping执行流程原理分析)
请求过来先碰见中央调度器(前端调度器) //Determine handler for the current request; 对当前请求决定交给哪个handler, 当前请求地址过来 处理器执行链 ...
- Hadoop4 利用VMware搭建自己的hadoop集群
前言: 前段时间自己学习如何部署伪分布式模式的hadoop环境,之前由于工作比较忙,学习的进度停滞了一段时间,所以今天抽出时间把最近学习的成果和大家分享一下. 本文要介绍的是如 ...
- svn diff 详解
UI版: 如果多人编辑同一段代码,常常容易出现冲突的情况: 如果出现冲突,我们如何解决他呢? 1 可以选择使用自己的文件mime file,也可以使用 他们的文件 their file 2 解决冲突, ...
- Atitit 编程语言编程方法的进化演进 sp COP ,AOP ,SOP
Atitit 编程语言编程方法的进化演进 sp COP ,AOP ,SOP 1.1. Sp oop>>COP ,AOP ,SOP1 1.2. Sp oop 结构化方法SP(Stru ...
- Jquery网页元素里面的操作以及JSON
如果网页里面有复选框,下拉列表Jquery怎么来操作,主要是怎么选取数据,就是取选中值,第二个是设置哪一项选中 <script src="jquery-1.11.2.min.js&qu ...
- 设计模式之依赖倒转原则(DIP)
1.概念 DIP:Dependency Inversion Principle 抽象不应当依赖于细节,细节应当依赖于抽象(说通俗点也就是要针对接口编程,不要针对实现编程:或者要依赖于抽象,不要依赖于具 ...
- ASP.NET MVC Anti-XSS方案
1:Form提交模式 在使用Form提交时,MVC框架提供了一个默认的机制.如果数据中含有恶意字,则会自动转向出错页面. 2:Ajax+JSON提交模式. MVC框架未提供对于Json数据的Ant ...