首先看旋转特效: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. LRM-00109: could not open parameter file

    SQL>startup                                                                                       ...

  2. C#使用tesseract3.02识别验证码模拟登录(转)

    转自http://www.cnblogs.com/JinJi-Jary/p/5625414.html

  3. mysql的分库分表

    1 什么是分库分表 这里讨论的情况是一台机器上对应一个数据库. 分库的对象是表,分表的对象是行.分库是说把属于同一个模块的相关性很高的表放在同一个数据库中.分表是说把同一个表的的行分成多个子表,把各个 ...

  4. 常见寄存器以及常见汇编指令,常见爆破指令 good

    CPU的任务就是执行存放在存储器里的指令序列.为此,除要完成算术逻辑操作外,还需要担负CPU和存储器以及I/O之间的数据传送任务.早期的CPU芯片只包括运算器和控制器两大部分.到了近几年,为了使存储器 ...

  5. Java使用到的常用类总结

    基本类型 常用:int.long.double.boolean. 不常用:byte.float.char.short

  6. 我的Android进阶之旅------>对Java中注释/**@hide*/的初步认识

    今天写一个调节系统背光亮度的时候,参考了Android中的Setting源码,在源码中有这么一段代码: private static final int MAXIMUM_BACKLIGHT = and ...

  7. 用keytool创建Keystore和Trustsotre文件只需五步

    用keytool创建Keystore和Trustsotre文件 JSSE使用Truststore和Keystore文件来提供客户端和服务器之间的安全数据传输.keytool是一个工具可以用来创建包含公 ...

  8. 【linux】如何查看进程运行在那颗cpu上

    这里介绍一种方法查看进程运行在哪个cpu上, 首先top 然后按字母:f 按字母:j 回车即可 其中P列表示进程运行在哪个CPU上

  9. Android适配API23之后权限的动态申请

    一.权限介绍 对于6.0以下的权限及在安装的时候,根据权限声明产生一个权限列表,用户只有在同意之后才能完成app的安装,造成了我们想要使用某个app,就要默默忍受其一些不必要的权限(比如是个app都要 ...

  10. rocketmq安装

    1 安装Rocketmq https://my.oschina.net/daijunjian/blog/732560 2 可视化管理控台 http://blog.csdn.net/jayjjb/art ...