收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1275|回复: 0

[CSS3] css选择器的事件效果

[复制链接]
发表于 2014-8-27 11:46:11 | 显示全部楼层 |阅读模式
现在许多功能都可以用CSS完成,一些简单的事件。
  1. <input type="radio" class="radio" name="pages" id="exit" checked />

  2.             <div class="demo">

  3.                 <input type="radio" class="radio" name="pages" id="page_1" />

  4.                 <section class="section-container section-one">
  5.                     <label for="exit" class="check-label exit-label">
  6.                         X
  7.                     </label>
  8.                     <label for="page_1" class="page-label check-label">
  9.                         <span>Quote 1</span>
  10.                     </label>
  11.                     <header class="section-header">
  12.                         <div class="section-content">
  13.                             <h1>Tyrion Lannister</h1>
  14.                         </div>
  15.                     </header>
  16.                     <div class="section-info">
  17.                         <div class="section-content">
  18.                             <p class="quote">"Everyone knows a Lannister always pays his debts."</p>
  19.                             <p class="follow">Also you can <a href="http://weibo.com/sunflowamedia" target="_blank">@me</a> on sina microblog! </p>
  20.                         </div>
  21.                     </div>
  22.                 </section>
  23.                 <!-- / section 1 -->
复制代码
  1. .section-one {
  2.         -moz-transform: translate(0%, 0%);
  3.         -ms-transform: translate(0%, 0%);
  4.         -o-transform: translate(0%, 0%);
  5.         -webkit-transform: translate(0%, 0%);
  6.         transform: translate(0%, 0%);
  7.     background: #f06060;
  8. }
  9. .section-two {
  10.         -moz-transform: translate(0%, 100%);
  11.         -ms-transform: translate(0%, 100%);
  12.         -o-transform: translate(0%, 100%);
  13.         -webkit-transform: translate(0%, 100%);
  14.         transform: translate(0%, 100%);
  15.     background: #f78c46;
  16. }

  17. .section-three {
  18.         -moz-transform: translate(100%, 0%);
  19.         -ms-transform: translate(100%, 0%);
  20.         -o-transform: translate(100%, 0%);
  21.         -webkit-transform: translate(100%, 0%);
  22.         transform: translate(100%, 0%);
  23.     background: #10a296;
  24. }
  25. .section-four {
  26.         -moz-transform: translate(100%, 100%);
  27.         -ms-transform: translate(100%, 100%);
  28.         -o-transform: translate(100%, 100%);
  29.         -webkit-transform: translate(100%, 100%);
  30.         transform: translate(100%, 100%);
  31.     background: #404853;
  32. }
复制代码
演示地址: http://blog.ilikecss.com/powerful-css3-selector-checked/

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-11-12 20:55 , Processed in 0.093516 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表