今天我们要来做动态绘本!
https://www.youtube.com/embed/xbzVGjzF1UM
什麽,一下就要这麽进阶吗?呃嗯,其实还好。仔细想想,其实这些动态绘本,都有个固定的模式,那就是读者做某个动作以後就会触发另个动作。例如,读者拉动某个拉杆以後,某张卡片就会开始移动;读者翻开某个卡片以後,就会看见某个原本隐藏的卡片。
这些互动,在网页上会是像怎麽样呢?可能会是滑过某个区块元素的时候,某个区块元素开始移动,或者点选某个区块元素後,浮现出某个文字段落。简单地说,这些互动分作 2 个部分:
让我们先想想那些改变是怎麽发生的。当我们想要让某个区块元素移动,我们会做的事情,是改变这个区块元素的位置。当我们想要让某个文字段落浮现,我们会做的事情,是先让那个文字段落隐藏起来,然後再让这个文字段落变成可见的。
更动位置比较简单,例如我们可以调整
更动某个元素从可见变成不可见的方法有 3 种:
那麽,我们要怎麽知道使用者的滑鼠点到什麽元件呢?或者,用比较炫炮的方式说,我们要怎麽**「监听」(listen)** 使用者滑鼠点击的动作呢?还记得我们前几天介绍的伪类选择器吗?我们同样可以把滑鼠移上或滑鼠点选的元素,当作某个伪类,并且改变这些元素的属性。例如,
因此,现在我们可以
类别:使用者动作{
属性: 值;
}
注意,如果是想正好选到那个类别半形冒号前面不能有空格,想想看为什麽呢?可以看看前两天对於类别组合选择器的讨论。空格在类别组合的选择器当中,是有意义的喔。
例如,在前几天的贴纸簿练习中,我们可以把粉红贴纸另外加上伪类:
.pink:hover{
background-color: red;
}
.pink:focus{
background-color: brown;
}
我们就会发现滑鼠移上去以後,粉红贴纸变成红色;不过,为什麽我们滑鼠怎麽点击都没有效果呢?这是因为区块元素不像核取方块、或按钮,预设就可以被选中。想要让元素能够被选中,必须在那个元素的 HTML 标签中,另外写上 tabindex = "-1",看起来会像这样:
<div class="banner pink" tabindex="-1">
<p>粉红贴纸</p>
</div>
这时候,我们就可以发现,粉红贴纸被点击时,变成咖啡色;点击网页其他地方时,就又变回粉红色罗!
那麽,让我们来玩个组合魔术。如果我想让所有黄色贴纸,在滑鼠移上橘色贴纸以後就变成金色,该怎麽办呢?
没错,上面这个使用者动作的对象元件,和产生样式改变的元件,并不是同个元件。因此,我们没办法只写
.yellow:hover{
background-color: gold;
}
否则,只有当滑鼠移到黄色贴纸上时,黄色贴纸才会变成金色。当滑鼠移到橘色贴纸上时,黄色贴纸可是完全没有反应喔!
因此,我们必须把滑鼠移上橘色贴纸这件事情写出来,但是实际发生样式改变的元件是黄色贴纸。这件事情乍看有点困难,不过,我们仔细观察这两个元件後会发现:橘色贴纸是黄色贴纸的父元素。因此,我们可以使用组合选择器,只挑出滑鼠移上的橘色贴纸当中的黄色贴纸,并且让这些贴纸进行样式改变。实际上写起来会像这样:
.orange:hover .yellow{
background-color: gold;
}
那麽,如果我们想要让黄色贴纸在滑鼠移上时消失,应该怎麽办呢?我们刚刚学过 2 种让元件消失的方式。让我们先来试试看 display:
.yellow:focus{
display: none;
}
黄色贴纸确实在滑鼠移上後消失了,不过後面的贴纸就会跟着移动很烦,所以使用 display 就不是个太好的策略。这时候,我们就可以使用前面提到的 visibility 这个属性:
.yellow:hover{
visibility: hidden;
}
那麽,如果我们想要让黄色贴纸在滑鼠选中後消失,应该怎麽办呢?让我们先把黄色贴纸都先加上 tabindex,然後使用前面提到的 visibility 这个属性:
.yellow:hover{
visibility: hidden;
}
我们会发现,尽管点击黄色贴纸时,贴纸瞬间消失了,但是立刻又出现了!这是因为 display: none 与 visibility: hidden 的元素都无法被选中。因此,我们必须使用上面说到的第三种方法,也就是把 opacity 设为 0:
.yellow:focus{
opacity: 0;
}
这样就可以让黄色贴纸在被点击时消失罗!
底下是今天介绍的动态贴纸簿源码,各位阿嬷可以自己 fork 回家玩玩喔!
https://codepen.io/LogosChen/pen/oNwJPBL
今天我们介绍了怎麽使用 CSS 写出微互动元件,不过有些阿嬷可能会觉得这个做法很局限:
例如,我们没办法在使用者输入某些字词的时候,网页上就做出相应的改变;这当然会大幅局限我们希望达成的效果。因此,只使用 HTML 和 CSS,在网页设计上还是无法达成细致的互动。所以,我们明天开始,就要引入重要的互动脚本,也就是我们的 JavaScript 罗!
想一想:如果我们是想让黄色贴纸一开始隐藏,只有被点击的时候才出现,又应该怎麽做呢?
>>: 30天学习笔记 介绍-day 25-View Animation
今天这个范例是来自第三方套件 utility-types,在有了前几天的知识後,让我们来试着了解这...
昨天学习到了JSX的几大特色与优点之後,今天就正式来学习用JSX搭配react。载入JSX之前先引用...
前言 我们在前一天开发完成了套件,那麽就试着来上架ㄅ 。 可以查看 官方文件,肯定讲的比我清楚哈哈(...
那麽今天主要要用RxJava来结合retrofit做Post的部分,与上次用Retrofit的cal...
在一个网页後端程序中,主要都是负责资料的处理,关於资料的储存则是会交由专门处理资料库的系统来处理 而...