好看漂亮的html5网页特效学习笔记(3)_猜猜下一个颜色是什么?

效果: 根据给出的两个连续颜色,玩家需要猜出下一个是什么颜色 随机关卡 使用vw,vh,vmin,vmax来屏幕自适应 很难玩 html+css+javascript,但js很短并不难,上手难度:简单 欢迎来我的博客看此文章: https://clatterrr.com/archives/1601 源码: 演示地址:https://clatterrr.github.io/colorsequence/index2.html 源码文件:https://github.com/clatterrr/colorsequence 学习笔记 使用google字体 这段用来导入google一种名叫Pacifico的字体。google字体中文页面:http://www.googlefonts.net/,选择喜欢的字体并取得名字,即可引用。一共三种方式,注意字体名字自己改: 像上面这样在css使用@import。 如google字体页面推荐的那样,把下面这段代码在html添加到页面 <head> 标签内,即可嵌入相应的字体。 3.使用@font-face。 然后就可以高兴地使用喜欢的字体了。详细请看:https://www.ibm.com/developerworks/cn/web/1505_zhangyan_googlefont/ 让元素正中心对齐网页正中心(自适应) 有时候,我们想元素的恰好在网页中间,像上图下方那样,即元素正中心恰好就网页正中心,并且还要主动适应屏幕大小,怎么办?…

Continue Reading →

好看漂亮的html5网页特效学习笔记(2)_svg实现不同投票不同表情

特点: 根据不同评分显示不同表情,并且这些表情看起来像是在一个传送带上可以滚动 使用纯代码(svg)绘制表情以及用于评分的星星 html+css,无javascript,上手难度:很简单 欢迎来我的博客看此文章:https://clatterrr.com/archives/1581 源码: 效果演示:https://clatterrr.github.io/svgvotoemoji/index2.html 源码:https://github.com/clatterrr/svgvotoemoji 学习笔记 flex 布局使用flex,这是一种自适应屏幕的布局。注意align-items和justify-content也和flex有关。具体请看https://www.runoob.com/cssref/css3-pr-flex.html 星星绘制 css中有这么一大段代码,共有三处。用svg来绘制评分的星星。 关于svg如何绘制具体请看https://www.runoob.com/svg/svg-tutorial.html 这三处代码,从上往下,第一处是绘制用于评分的灰色星星,第二处是用于当评出某个分数后,代表评分的星星的样子。第三处是用于,当鼠标碰到某个星星时,该星星和之前的星星所显示的样子。这三处代码不同的地方是fill 后面的数值,这代表着颜色。 星星显示规则 不过,根据评分怎么显示对应的星星数呢?假设我点了第四颗星,为什么第一到第三颗星也亮了呢? 注意这儿的选择器,星星实际上是<input>。 A~B…

Continue Reading →