内容简介:本系列文章,主要是围绕css3属性,实现我们常见的各种效果,这些效果都是我们实战开发中经常可以用到的效果:平时开发中,我们经常会这是鼠标光标的效果,那最长设置的就是cursor:pointer;表示可点击的,那么其实还有其他一些我们不常用,但却非常有用的光标效果:以下是所有光标的效果:我们只需要记住上面这些常用的效果即可。 css2.1内置光标效果:
本系列文章,主要是围绕css3属性,实现我们常见的各种效果,这些效果都是我们实战开发中经常可以用到的效果:
- css揭秘实战技巧- 背景与边框 [一]
- css揭秘实战技巧- 形状 [二]
- css揭秘实战技巧 - 视觉效果[三]
- css揭秘实战技巧 - 字体排印[四]
- css揭秘实战技巧 - 用户体验[五]
- css揭秘实战技巧 - 结构与布局[六]
- css揭秘实战技巧 - 过渡与动画[七]
前言
- 选用合适的鼠标光标
- 扩大点击区域
- 通过阴影来弱化背景
- 通过模糊来弱化背景
- 滚动提示
一:选用合适的鼠标光标
平时开发中,我们经常会这是鼠标光标的效果,那最长设置的就是cursor:pointer;表示可点击的,那么其实还有其他一些我们不常用,但却非常有用的光标效果:
- pointer: 可点击
- not-allowed: 不允许点击
- context-menu:表示元素有上下文菜单
- move: 表示元素可以移动的时候
- help: 有帮助信息的时候
- copy: 比如:某一按钮点击会将文案复制到其他地方或者剪切板的效果,就可以设置为copy
- none: 不显示鼠标光标(某些不希望用户操作的时候,该效果是可以使用的)
以下是所有光标的效果:我们只需要记住上面这些常用的效果即可。 css2.1内置光标效果:
css3 内置光标效果:
二:扩大可点击区域
这也是我们平时做页面的时候,可以优化的一点,尽可能的扩大可点击区域,这样用户更容易到底可点击的区域。
例如下图:我们不要只给:heavy_plus_sign: 设置点击 事件,而是给整个圆圈区域设置点击事件。
三:通过阴影来弱化背景
首先,我们来看一下效果:
方案一:阴影部分用一层div包括,并且设置透明度,
/* 用于遮挡背景 */ position: fixed; .overlay { top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.8); } /* 需要吸引用户注意的元素 */ .lightbox { position: absolute; z-index: 1; /* [其余样式] */ } 复制代码
方案二:用伪元素代替 外层的div
.lightbox::before { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: rgba(0,0,0,.8); } 复制代码
缺点:伪元素无法绑定独立的javascript事件处理的回调函数。
方案三:采用box-shadow
box-shadow: 0 0 0 999px rgba(0,0,0,.8); //此时阴影半径必须设置的足够大 或者 box-shadow: 0 0 0 50vmax rgba(0,0,0,.8); //将阴影半径设置为视口的宽高。 复制代码
缺点:阴影也无法绑定独立的javascript事件处理的回调函数。
方案四:采用dialog的backdrop属性
//设置dialog元素的::backdrop伪元素, dialog::backdrop { background: rgba(0, 0, 0, .8); } 复制代码
确定:浏览器的兼容性有限
四:通过模糊来弱化背景
首先,来看一下我们想要实现的效果:
代码如下:
<main>Bacon Ipsum dolor sit amet...</main> <dialog> O HAI, I'm a dialog. Click on me to dismiss. </dialog> 复制代码
main{ filter: blur(3px) contrast(.8) brightness(.8); } 复制代码
五:滚动提示
首先,我们看一下效果:
思路讲解: 首先,上下的阴影效果可以通过设置radial-gradient实现,滚动到顶部或者底部的时候,阴影消失,可以通过另外加一层白色阴影去覆盖即可,然后通过backgroud-attachment控制阴影是否在滚动时显示。
代码如下:
ul { overflow: auto; width: 20em; height: 12em; padding: .3em .5em; border: 1px solid silver; background: linear-gradient(white, white) 0 0 / 100% 50px, radial-gradient(at top, rgba(0,0,0,.2), transparent 70%) 0 0/ 100% 15px, linear-gradient(to top, white, white) bottom/ 100% 50px, radial-gradient(at bottom, rgba(0,0,0,.2), transparent 70%) bottom/ 100% 15px; background-repeat: no-repeat; background-attachment: local, scroll, local, scroll; } 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- css揭秘实战技巧 - 形状 [二]
- css揭秘实战技巧 - 视觉效果[三]
- css揭秘实战技巧 - 结构与布局[六]
- css揭秘实战技巧 - 过渡与动画[七]
- SDN实战团分享(四十):揭秘Arista EOS三大特性,打造非一般的云网架构
- React 技术揭秘
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
产品经理的20堂必修课
徐建极 / 人民邮电出版社 / 2013-9-1 / 59.00元
《产品经理的20堂必修课》以作者八年的产品经理工作实践为基础,通过系统的理论结合丰富的实例的方法,全面地总结了作为一名互联网产品经理所应掌握的知识。 《产品经理的20堂必修课》分为三大部分。 讲产品:深入剖析互联网产品成功的要素,分别从需求导向、简单原则、产品运营、战略布局等维度,分析如何让产品在残酷的互联网竞争中脱颖而出。 讲方法:着重分析优秀的产品团队运作的工作方法和程序,详......一起来看看 《产品经理的20堂必修课》 这本书的介绍吧!