html引导蒙层,web开发中实现图标点击态蒙层

原标题：web开发中实现图标点击态蒙层

webapp开发中经常需要加入点击二态，即用户点击(tap)页面某个部分时该部分的样式进行相应的变化来相应用户的点击操作，这样能够带来更好的用户体验，今天我们要讨论的是如何给图标加上点击的二态效果。

先来看下需求

如何判断用户的点击操作

这个应该不用多说，使用css的伪类选择:active即可，这儿需要注意的是不要使用:hover,有些新手往往会直接使用:hover，一方面兼容性比较差，另一方面响应用户操作表现时会有些怪异。

如何添加蒙层

我们先用最容易想到的方法来实现这个需求。我们可以添加一个和图标同样尺寸的dom蒙层元素，当图标被点击时我们利用Java来显示这个蒙层

html

虽然能够实现，但是有一些问题

1、使用了额外的Java来进行行为控制

2、需要添加额外的DOM结构

3、mask的尺寸样式定义需要依赖于icon的尺寸

相信大家也想到了，我们可以使用css3中的::after来规避上面提到的一些问题

html

css

.icon {

...

position: relative

border-raidus: 50%;

}

.icon::after {

...

content: '';

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

border-radius: 50%;

display: none;

background: rgba(0, 0, 0, .5);

}

.icon:active::after {

display: block;

}

现在好多了，HTML已经非常简洁了，不需要定义额外的结构，而且不需要依赖Java，但是css还是有一些问题：

1、需要改变.icon的position为relative

2、蒙层还是与icon的结构有依赖(比如border-radius:50%)

3、css代码偏多，不够简洁

好了，让我们快速结束吧，下面给出一种简洁的方案，相信也不用进行解释了

.icon:active {

box-shadow: inset 0 0 1000px rgba(0, 0, 0, .5);

}

原文链接：https://segmentfault.com/a/1190000006214519

来源作者：musiq1989返回搜狐，查看更多

责任编辑：

html引导蒙层,web开发中实现图标点击态蒙层相关推荐

Web开发中的用户角色权限设计总结
在Web开发中关于权限管理设计大抵涉及到两个方面:一:功能方面权限设计:二:资源方面权限设计.二者比较来看,功能方面权限的可重用性更高. 1.关于权限: 按照角色权限的最简单的设计名称描述用户 ...
浅谈Web开发中的6种技术
CSDN博客不再经常更新,更多优质文章请来粉丝联盟网 FansUnion.cn! (FansUnion) Web开发中的6种技术 1.html 超文本标记语言,即HTML(Hypertext Mar ...
java css路径_java web开发中CSS路径有问题吗，运行jsp文件为什么找不到css文件？...
---------------------------------------------------------------------------------------------------- ...
Web开发中的弹出对话框控件介绍
Web开发中,目前由于Jquery的大行其道,因此很多弹出对话框,都用到了Jquery技术,反而原始的弹出对话框的方式较为少用了.不过基于JQuery的方式实现对话框窗口弹出,也有很多控件可以利用,由 ...
【笔记-node】《imooc-nodejs入门到企业web开发中的应用》
目录课程名备注入门必学 nodejs入门到企业web开发中的应用框架与工具 node.js+koa2+mysql打造前后端分离精品项目<旧岛> 项目实战 20190317-2020 ...
WEB开发中，使用JSON-RPC好，还是RESTful API好?
看到知乎上有这样一个问题 WEB开发中,使用JSON-RPC好,还是RESTful API好? 还有其他优秀的推荐方案吗? -------------------------------------- ...
ASP.NET AJAX 在Web开发中的应用
摘要 ASP.NET AJAX 实现了Web页面丰富的部分刷新效果.本文通过介绍AJAX原理,引申到ASP.NET AJAX原理,并总结了在Web 开发应用中要注意的若干问题.合理地利用ASP.NE ...
java web框架struts_Struts框架在Web开发中的应用
<Struts框架在Web开发中的应用>由会员分享,可在线阅读,更多相关<Struts框架在Web开发中的应用(29页珍藏版)>请在人人文库网上搜索. 1.Struts,框架在 ...
038——VUE中组件之WEB开发中组件使用场景与定义组件的方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

html引导蒙层,web开发中实现图标点击态蒙层

html引导蒙层,web开发中实现图标点击态蒙层相关推荐

最新文章

热门文章