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>
  • 相关阅读:
    【第36题】2019年OCP认证12C题库062考试最新考试原题
    004 基本命令 touch cp mv 命令
    003 基本指令 mkdir rm -rf(暴力删除)
    002 文件目录类的指令 cd ls
    001 指定运行级别
    005 抽象工厂模式
    006 使用类加载器加载资源文件
    004 方法反射
    003 属性反射
    003 工厂方法模式
  • 原文地址:https://www.cnblogs.com/luoyeguichen/p/5032104.html
Copyright © 2011-2022 走看看