微信号:ardays

介绍:android每日绝对干货

基于css选择器设计交互效果时的一些思考

2017-11-29 14:47 Andself

前言

这篇文章简单介绍一下,几个交互性较强的css选择器,以及我在使用时的一些思考

:active:checked~+

:hover这个选择器都用烂了,今天就不说了 😶

:active

对于:active这个选择器,MDN上是这样定义的:

:active CSS伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时,它代表的是用户按下按键和松开按键之间的时间。

现在我们知道了,通过这个属性,可以获得一个元素上,鼠标左键按下/松开两个状态

button {  /* 鼠标松开 */}button:active {  /* 鼠标按下 */}

那么,拿到了这个状态后,你就不想做点什么吗? 🙃

应用场景

简单应用

最简单的应用呢,就是在Button按下时改变一些样式,在视觉上给用户一些反馈,比如这样

button {  background-color: rgb(77, 181, 255, 0);
}button:active {  background-color: rgb(77, 181, 255, 1);  color: #fff;
}

如果觉得动画太生硬,还可以使用transition来过渡,使动画看起来更加‘顺滑’

效果如下:

变颜色这种最基础的操作,肯定是无法满足大家滴,我们可以玩的花一点,比如给他定义一个animation

button:active {  animation: shake 0.1s ease infinite;
}

效果如图(依旧是录制帧数过低):

再多想一下

以上的两个例子,都是在两个状态之间切换,说白了只是改个样式,并没有很强的交互性,我们就只能做到这种程度吗?

emmmmm..... ☹️

在等外卖的无聊时间里,我骚动不已的心终于蹦出来了一个想法! 😏

我们可以自己定义动画,就意味着多掌握了一项关键属性,那就是时间
现在我有了按下松开时间三个要素,我可以做一个计时的操作啊 😎

先看一下做出来的效果吧

{。。。。 

效果没有,图片太大了,下面有源码~~

。。。}

这个demo做的呢,是在按钮被按住2s后发起一个操作,不到2s松开就会取消

这里光用css肯定不行的啦,我加了一点点js进来,这里用到了animationend这个事件

document.getElementById('ring').addEventListener('animationend', function () {  alert('结束啦')
}, false)

对的,只是用js写的alert,动画部分还是纯css实现的,代码有点长,就不放这里了,有兴趣的同学可以戳‘阅读原文’自取, 这里只谈一下思路

注意事项

  • :active:hover这两个状态会同时活动,所以如果你在同一个元素上定义了这两个状态的话,请注意一下css的书写顺序 🙃

  • button元素上,:active生效的同时,会出发:focus状态,需要先重置浏览器的默认:focus样式

:checked

TODO

  1. 简单应用 => 开灯/关灯效果

  2. 深入联想 => 评分组件

+ 和 ~ 这两个选择器

TODO

上面的例子中都用用到,简单介绍下概念就好了,主要用来扩大css选择器的控制范围,实现更复杂的效果


 
Android每日干货 更多文章 探索ES2015:箭头函数(Arrow Functions) 微信浏览器踩坑集锦 详解Object.defineProperty() 好久不见 三句代码完成整个App侧滑关闭
猜您喜欢 如何从菜鸟程序员成长为(伪)高手 7K-50K|一天就收到简历投递反馈,拿到offer再分手 技术之路无远弗届,极牛为无界空间添油加料 【第899期】12 条提高产品可用性的动效设计的原理 Python爬虫实战(2):爬取京东商品列表