zoukankan      html  css  js  c++  java
  • 利用CSS3给图片添加旋转背景特效

    首先看旋转特效:http://www.w2bc.com/demo/201512/2015-12-09-css3-image-hover-animate/index.html

    这是一款纯CSS3实现的当鼠标滑过图片时文字旋转动画特效,效果图如下:

    实现代码:

    <div class="main">

          <div class="view">
              <img src="images/modeo02.jpg" alt="">
              <div class="hover">
                  <h3>魔力唇彩</h3>
                  <p>嘴唇的诱惑嘴唇的诱唇的诱惑嘴唇的诱惑</p>
              </div>
          </div>
          <div class="view">
              <img src="images/modeo03.jpg" alt="">
              <div class="hover">
                  <h3>魔力唇彩</h3>
                  <p>嘴唇的诱惑嘴唇的诱唇的诱惑嘴唇的诱惑</p>
              </div>
          </div>
          <div class="view">
              <img src="images/modeo04.jpg" alt="">
              <div class="hover">
                  <h3>魔力唇彩</h3>
                  <p>嘴唇的诱惑嘴唇的诱唇的诱惑嘴唇的诱惑</p>
              </div>
          </div>
          <div class="view">
              <img src="images/modeo05.jpg" alt="">
              <div class="hover">
                  <h3>魔力唇彩</h3>
                  <p>嘴唇的诱惑嘴唇的诱唇的诱惑嘴唇的诱惑</p>
              </div>
          </div>
          <div class="view">
              <img src="images/modeo06.jpg" alt="">
              <div class="hover">
                  <h3>魔力唇彩</h3>
                  <p>嘴唇的诱惑嘴唇的诱唇的诱惑嘴唇的诱惑</p>
              </div>
          </div>
          <div class="view">
              <img src="images/modeo07.jpg" alt="">
              <div class="hover">
                  <h3>魔力唇彩</h3>
                  <p>嘴唇的诱惑嘴唇的诱唇的诱惑嘴唇的诱惑</p>
              </div>
          </div>
      </div>
  • 相关阅读:
    failed to push some refs to 'git@github.com:cq1415583094/MyBatis.git'解决办法
    MyBatis 安装和配置
    MyBatis入门
    LinkedList 源码分析
    ArrayList 源码分析
    什么是注解?
    什么是泛型?
    什么是反射?
    php针对各数据库系统对应的扩展
    DedeCMS文章标题长度最全修改方法
  • 原文地址:https://www.cnblogs.com/luoyeguichen/p/5032104.html
Copyright © 2011-2022 走看看