首先看旋转特效：http://***/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>

利用CSS3给图片添加旋转背景特效的更多相关文章

  1. css3相册图片3D旋转展示特效

    查看效果:http://hovertree.com/texiao/css/14/ 本效果用css3的animation实现动画 定义和用法animation 属性是一个简写属性,用于设置六个动画属性: ...

  2. 纯css3 3D图片立方体旋转动画特效

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

  3. 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效

    在线预览   源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...

  4. CSS3 3D图片立方体旋转

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  5. 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

    这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览   ...

  6. 利用CSS3实现div页面淡入动画特效

    利用CSS3实现页面淡入动画特效   摘要 利用CSS3动画属性"@keyframes "可实现一些动态特效,具体语法和参数可以网上自行学习.这篇文章主要是实践应用一下这个动画属性 ...

  7. 利用CSS3实现图片无间断轮播图的实现思路

    前言:图片轮播效果现在在各大网站都是非常普遍的,以前我们都是通过postion的left or right来控制dom的移动,这里我要说的是利用css3来制作轮播!相比以前通过postion来移动do ...

  8. 利用php给图片添加文字水印--面向对象与面向过程俩种方法的实现

    1: 面向过程的编写方法 //指定图片路径 $src = '001.png'; //获取图片信息 $info = getimagesize($src); //获取图片扩展名 $type = image ...

  9. CSS3实现图片循环旋转

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. EasyPlayer Android RTSP播放器延迟再优化策略

    EasyPlayer延迟再优化策略 EasyPlayer是一款专门针对RTSP协议进行过优化的播放器.其中两个我们引以为傲的的优点就是起播快和低延迟.最近我们遇到一些需求,其对延迟要求非常苛刻,于是我 ...

  2. 一种微信直播H5直播与存储回放的HLS摄像机方案

    接上篇 在上一篇博客<一种流量成本节省60%以上的手机直播微信直播H5直播幼儿园直播方案>中,我们一共介绍了两种省钱的HLS直播途径: 方案一:编码器或者内网推流直接对接云存储的场景 如果 ...

  3. struts2中拦截器与过滤器之间的区别

    首先是一张经典的struts2原理图 当接收到一个httprequest , a) 当外部的httpservletrequest到来时 b) 初始到了servlet容器 传递给一个标准的过滤器链 c) ...

  4. SQL Server分区表，能否按照多个列作为分区函数的分区依据（转载）

    问: Hi, I have a table workcachedetail with 40 million rows which has 8 columns.We decided to partiti ...

  5. Java一致性的实现

    一致性     内存模型 每一个线程有一个工作内存和主存独立 工作内存存放主存中变量的值的拷贝     Happen Before 1.程序次序规则:在一个单独的线程中,按照程序代码的执行流顺序,(时 ...

  6. python输出shell命令执行结果

    import os,subprocess p = subprocess.Popen("df -h", shell=True, stdout=subprocess.PIPE) out ...

  7. （1）Java多线程编程核心——Java多线程技能

    1.为什么要使用多线程?多线程的优点? 提高CPU的利用率 2.什么是多线程? 3.Java实现多线程编程的两种方式? a.继承Thread类 public class MyThread01 exte ...

  8. linux ssh 命令使用解析

    前一阵远程维护Linux服务器,使用的是SSH,传说中的secure shell. 登陆:ssh [hostname] -u user 输入密码:***** 登 陆以后就可以像控制自己的机器一样控制它 ...

  9. linux网络编程 inet_aton(); inet_aton; inet_addr;

    . inet_aton()是一个改进的方法来将一个字符串IP地址转换为一个32位的网络序列IP地址. . inet_ntoa() 本函数将一个用in参数所表示的Internet地址结构转换成以“.” ...

  10. 【面试题046】求1+2+...+n

    [面试题046]求1+2+...+n 题目:     求1+2+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C).   思 ...