用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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值