首先看旋转特效: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. 九度OJ 1027:欧拉回路 (欧拉回路)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2989 解决:1501 题目描述:     欧拉回路是指不令笔离开纸面,可画过图中每条边仅一次,且可以回到起点的一条回路.现给定一个图,问是 ...

  2. babylon

    https://github.com/babel/babel babylon - npm https://www.npmjs.com/package/babylon Babel is a compil ...

  3. json字符串转集合或者数组

    import java.util.ArrayList; import java.util.Collection; import java.util.HashMap; import java.util. ...

  4. php中$t=date()函数参数意义及时间更改

    php中date()函数用的最多的是:date('Y-m-d H:i:s', time());  这里面的参数意义分别是:Y - 年,四位数字; 如: "2016":m - 月份, ...

  5. 【Android】Android中AlertDialog对话框的使用实例

    package com.ceac.deng; import android.R.string; import android.support.v7.app.ActionBarActivity; imp ...

  6. 在命令符模式下编译并执行Java程序

    对于Java初学者,建议使用纯文本文件来编写Java程序,并在命令符模式下使用工具程序编译和执行Java程序.使用javac工具编译.java,使用java工具执行.class.(推荐sublime编 ...

  7. spring mvc头

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  8. 前端JSONPJIE解决跨域问题

    解决同源策略的两个方法 1 . JSONP jsonp (将 JSON 数据填充进回调函数,这就是JSONP的JSON+Padding 的含义) jsonp是json用来跨域的一个东西,原理是通过sc ...

  9. 《程序员代码面试指南》第八章 数组和矩阵问题 数组的partition 调整

    题目 数组的partition 调整 java代码 package com.lizhouwei.chapter8; /** * @Description: 数组的partition 调整 * @Aut ...

  10. VC++中list::list的使用方法总结

    本文主题 这几天在做图像处理方面的研究,其中有一部分是关于图像分割方面的,图像目标在分割出来之后要做进一步的处理,因此有必要将目标图像的信息保存在一个变量里面,一开始想到的是数组,但是马上就发现使用数 ...