利用CSS3给图片添加旋转背景特效
首先看旋转特效: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给图片添加旋转背景特效的更多相关文章
- css3相册图片3D旋转展示特效
查看效果:http://hovertree.com/texiao/css/14/ 本效果用css3的animation实现动画 定义和用法animation 属性是一个简写属性,用于设置六个动画属性: ...
- 纯css3 3D图片立方体旋转动画特效
纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...
- 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效
在线预览 源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...
- CSS3 3D图片立方体旋转
html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览 ...
- 利用CSS3实现div页面淡入动画特效
利用CSS3实现页面淡入动画特效 摘要 利用CSS3动画属性"@keyframes "可实现一些动态特效,具体语法和参数可以网上自行学习.这篇文章主要是实践应用一下这个动画属性 ...
- 利用CSS3实现图片无间断轮播图的实现思路
前言:图片轮播效果现在在各大网站都是非常普遍的,以前我们都是通过postion的left or right来控制dom的移动,这里我要说的是利用css3来制作轮播!相比以前通过postion来移动do ...
- 利用php给图片添加文字水印--面向对象与面向过程俩种方法的实现
1: 面向过程的编写方法 //指定图片路径 $src = '001.png'; //获取图片信息 $info = getimagesize($src); //获取图片扩展名 $type = image ...
- CSS3实现图片循环旋转
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- 基于EasyNVR二次开发实现自己的摄像机IPC/NVR无插件化直播解决方案
在之前的博客中<基于EasyNVR实现RTSP/Onvif监控摄像头Web无插件化直播监控>,我们已经比较多的描述EasyNVR所实现的功能,这些也在方案地址:http://www.eas ...
- 九度OJ 1010:A + B (字符串处理)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:7166 解决:3646 题目描述: 读入两个小于100的正整数A和B,计算A+B. 需要注意的是:A和B的每一位数字由对应的英文单词给出. ...
- Linux RabbitMQ的安装、环境配置、远程访问 , Windows 下安装的RabbitMQ远程访问
Linux RabbitMQ的安装和环境配置 1.安装 RabbitMQ是使用Erlang语言编写的,所以安装RabbitMQ之前,先要安装Erlang环境 #对原来的yum官方源做个备份 1.mv ...
- 前端几个笔试题及答案(bd)
1. 行内元素.块级元素和空元素(void)举例. 块级元素:<address>.<caption>.<dd>.<div>.<dl>.& ...
- Machine Learning No.5: Neural networks
1. advantage: when number of features is too large, so previous algorithm is not a good way to learn ...
- Dubbo动态负载均衡(socket环境实现)
消费者 去注册中心获取信息 然后缓存到本地 如果有生产者某个服务宕机了 会通过通知的方式告知 (订阅的方式) 微服务rpc远程调用框架中,服务的负载均衡都是采用本地负载均衡的,Spring Clou ...
- 深入理解JVM - Java内存区域与内存溢出异常 - 第二章
一 运行时数据区域 JVM在执行Java程序的过程中会把它管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途,以及创建和销毁的时间. 程序计数器 程序计数器(Program Counter ...
- POJ 3744 Scout YYF I:概率dp
题目链接:http://poj.org/problem?id=3744 题意: 有n个地雷,位置为pos[i]. 在每个位置,你向前走一步的概率为p,向前走两步的概率为1-p. 你的初始位置为1. 问 ...
- L94
Early-morning births are genetically programmed THE notion that nothing good happens after midnight ...
- zero to one (4)
复盘--天下武功唯快不破 There is no martial art is indefectible, while the fastest speed is the only way for lo ...