神奇的css3鼠标滑过动画效果

当前位置:主页 > CSS3库 > CSS3动画 > 神奇的css3鼠标滑过动画效果
神奇的css3鼠标滑过动画效果
分享:

    插件介绍

    这是一款使用css3制作的鼠标滑过圆形图标旋转动画效果。当鼠标hover圆形图标时,图标上的文字和阴影旋转360度,并带透明度变化,效果非常炫酷。

    浏览器兼容性

    浏览器兼容性
    时间:11-16
    阅读:

简要教程

这是一款使用 CSS transition 属性制作的纯css3素材滑过hover动画效果。

请注意不是每一个浏览器都支持这些css3属性,请使用支持css3的浏览器来查看这些demo。

HTML

<ul class="ca-menu">
  <li>
      <a href="#">
          <span class="ca-icon">A</span>
          <div class="ca-content">
              <h2 class="ca-main">Exceptional Service</h2>
              <h3 class="ca-sub">Personalized to your needs</h3>
          </div>
      </a>                   
  </li>
  <li>
      <a href="#">
          <span class="ca-icon">I</span>
          <div class="ca-content">
              <h2 class="ca-main">Creative Storytelling</h2>
              <h3 class="ca-sub">Advanced use of technology</h3>
          </div>
      </a>                   
  </li>
  <li>
      <a href="#">
          <span class="ca-icon">C</span>
          <div class="ca-content">
              <h2 class="ca-main">Infographical Education</h2>
              <h3 class="ca-sub">Understanding visually</h3>
          </div>
      </a>                    
  </li>
  <li>
      <a href="#">
          <span class="ca-icon">S</span>
          <div class="ca-content">
              <h2 class="ca-main">Sophisticated Team</h2>
              <h3 class="ca-sub">Professionals in action</h3>
          </div>
      </a>  
  </li>
</ul>
                

更多详细信息请参看:http://www.freshdesignweb.com/css3-hover-effects-with-websymbols-tutorial.html