首先看旋转特效: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. EasyPlayerPro Windows播放器读取xml配置文件中的特殊字符问题

    问题被反馈 今日一客户反馈说播放不了带用户名密码的流, 奇怪,这个问题不存在啊-,按照客户的说法, 是将url地址保存在配置文件中,然后再打开EasyPlayerPro运行: 问题复现 在EasyPl ...

  2. t60替换alt,super,ctrl

    发现T60的左边在ctrl 与 alt 有个win 键,所以就进行了映射 网上有一个把alt->ctrl, super-> alt, ctrl->super的script, 见 ht ...

  3. Kibana + ElasticSearch

    上面一张介绍了ElasticSearch的安装和简单用法. 现在应该都知道ElasticSearch是用来做全文搜索的,那今天我就简单介绍下Kibana. 它是专门用来查看ElasticSearch内 ...

  4. 【题解】[CJOI2019Chebnear]

    [题解][CJOI2019Chebnear] 题目描述 给定平面上有\(n\)个仇人,\((x,y) ,x,y \in R^+\) ,\(n\)个人都是仇人关系,而有仇人关系的一对人的切比雪夫距离若\ ...

  5. Java for LeetCode 083 Remove Duplicates from Sorted List

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...

  6. 剑指Offer:字符串排列【38】

    剑指Offer:字符串排列[38] 题目描述 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bc ...

  7. Java基础教程:面向对象编程[3]

    Java基础教程:面向对象编程[3] 内容大纲 基础编程 获取用户输入 java.util.Scanner 是 Java5 的新特征,我们可以通过 Scanner 类来获取用户的输入.我们可以查看Ja ...

  8. 序列化组件(get/put/delete接口设计),视图优化组件

    一 . 知识点回顾 1 . 混入类 , 多继承 class Animal(object): def eat(self): print("Eat") def walk(self): ...

  9. PAT 甲级 1028. List Sorting (25) 【结构体排序】

    题目链接 https://www.patest.cn/contests/pat-a-practise/1028 思路 就按照 它的三种方式 设计 comp 函数 然后快排就好了 但是 如果用 c++ ...

  10. BZOJ 3043 IncDec Sequence:反向差分

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3043 题意: 给定一个长度为n的数列a[i],每次可以选择一个区间[l,r],使这个区间内 ...