玩个轮播特效,css3屌炸天(上)

小姐姐最近迷上了css3

so研究了一个纯用css3制作的幻灯片轮播

6不6,就问你们6不6,没有js,没有jq,我觉得我好棒,哈哈哈。

但其实做起来还是蛮复杂的,首先我先把框架搭好,看到底下和左右的按钮没有,如果是jq我们就得选中到他然后用下标来实现点击切换对应的图。

那css怎么去实现呢?我们先搭6个radio(因为我这用了6张图),然后用label的for属性去指向radio。要知道radio他默认样式特别丑,还改变不了,除非你用图片然后用js去实现。这里呢,小姐姐就教你个小方法,咱就用label标签去做,那我就可以改变形状,然后功能指向radio就好了.

直接上代码

至于丑八怪radio就默默的隐藏幕后就好

现在就是这么一个效果,切换已经实现,你可以先别把radio隐藏,你可以点击试试是否已经指向

至于图片那酷炫的效果,待小姐姐下回分解,想要源码142991222求我呀

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,267评论 4 61
  • HTML5面试题总结1.基础问题 = 和 == 和 === 的区别?= : 用于赋值 == : 用于判断 === ...
    LorenaLu阅读 1,231评论 0 4
  • 最近,天空中到处飘散着杨絮,刺挠着人的脸和鼻子,把人的心情也带着烦躁起来。风大的时候,甚至都出现五月漫天飞“雪...
    璇璇宿语阅读 262评论 0 0
  • “大树理论”: 1、成为一棵大树的第一个条件:时间--时间转换空间。没有一棵大树是树苗种下去,马上就变成了大树,一...
    果实工场阅读 207评论 0 1
  • 1 老公这几天有事情得到外地一趟。以前每次都是他一个人孤独的走,我连去送他的机会都没有。趁这几天单位不是很忙,于是...
    幸福的西瓜君阅读 537评论 2 1