首先看旋转特效：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. 破解powerdesigner教程

    点Tool

  2. myeclipse安装tomactserver图解

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/shaozucheng/article/details/36673227 选择标题栏中 Window- ...

  3. 用fiddler替换线上网页资源调试界面

    fiddler 是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有进出fiddler的数据(指cookie,html,js,css等文件,这些都 ...

  4. Java多线程系列 基础篇04 线程中断

    1. 中断线程 中断可以理解为线程的一个标志位属性,它表示一个运行中的线程是否被其他线程进行了中断操作,其他线程通过调用该线程的interrupt()方法对其进行中断操作,线程通过检查自身是否被中断来 ...

  5. 网页布局的应用（float或absolute）

    一个浮动(左浮动或右浮动) 垂直环绕布局(float.clear) 左右两列布局(float.absolute) 三栏网页宽度自适应布局(float.absolute) 注意:网页设计中应该尽量避免使 ...

  6. leetcode 863. All Nodes Distance K in Binary Tree

    We are given a binary tree (with root node root), a target node, and an integer value K. Return a li ...

  7. mysql too many connections 解决方法

    1.mysql -u root -p 回车输入密码进入mysql   2.show processlist; 查看连接数,可以发现有很多连接处于sleep状态,这些其实是暂时没有用的,所以可以kill ...

  8. python根据圆的参数方程求圆上任意一点的坐标

    from math import cos, sin,pi x0,y0=0,0 r=4.0 angle=-25 x1 = x0 + r * cos(angle * pi / 180) y1 = y0 + ...

  9. 分享知识-快乐自己：java 中的访问修饰符

    1):Java中的访问修饰符: Java面向对象的基本思想之一是封装细节并且公开接口.Java语言采用访问控制修饰符来控制类及类的方法和变量的访问权限,从而向使用者暴露接口,但隐藏实现细节. 访问控制 ...

  10. nginx websocket

    前两天折腾了下socketio,部署完发现通过nginx代理之后前端的socket无法和后端通信了,于是暴查一通,最后解决问题: location / { proxy_pass http://127. ...