只用CSS能玩出什么样的花样?

如果你是一位css的初级玩家的话大概会以为css只是用来给HTML单纯的做静态样式的话,那你就错了。我在这里用了“初级玩家”这几个字是因为我个人对书写css非常有乐趣。没错大人认为css用来做样式是因为它的主要功能是这样,但我们能否给css做出点花样来呢。比如类似于js的一些效果来,答案是显而易见的 如果不行我也不用在这写这篇文章了。

如果我们想将css做出一些js才能做出的效果的话,首先我们要理解为什么我们认为js才能出效果呢。我们来分析一下网页效果的原理:

首先需要一个初始化的样式效果

其次需要对网页进行一个事件触发效果(简单讲就是后期添加样式的契机)

最后就是改变样式的出现效果

我们的js其实非常的弱它的主要作用是第二步触发事件(点击等操作) 然后再依靠css显示效果,但第二步这恰恰是css最薄弱的一块。不过大家注意了 我这里用的是薄弱 就是说css虽然不擅长做这些事 但不代表不可以。Css2和Css3提供了我们位数不多的可以在后天改变样式的伪类:hover 、:targer、 :checked。

以上3个是可以触发css改变样式的几个伪类 只要有这个点再去配合css3新增的过度效果与动画效果就可以做出非常炫酷的效果。以下我就来举个例子吧。

图上是一个小人通过动画效果可以自己运动 然而操作的话就是下面的按钮 我们可以通过:target 被锚点选择的元素调整当前动画时间来调整速度。

当然如果你们还想问我css到底能做出多少炫酷的效果,并且尝试找答案 而答案很简单 简单的很遗憾 就是思想 让css有着无限的花样。

文章来源:千锋HTML5

本文由【简媒】提供同步技术支持。用简媒,一键发布10 + 平台,秒级运营100 + 账号。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180307A13V2800?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券