利用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 ...
随机推荐
- async & await (转载)
async 和 await 出现在C# 5.0之后,给并行编程带来了不少的方便,特别是当在MVC中的Action也变成async之后,有点开始什么都是async的味道了.但是这也给我们 编程埋下了一些 ...
- 使用SqlDependency监听MSSQL数据库表变化通知
SqlDependency提供了这样一种机制,当被监测的数据库中的数据发生变化时,SqlDependency会自动触发OnChange事件来通知应用程序,从而达到让系统自动更新数据(或缓存)的目的. ...
- cmake默认变量
1 CMAKE_GENERATOR 用来生成工程构建文件的工具的名字,比如visual studio 12,2013,比如xcode,不同的平台使用不同的生成工具. 2 MATCHES if (var ...
- 一起来学linux:例行性任务之at和crontab
对于我们日常生活来说,有很多例行需要进行的工作,比如每天早上起床一杯水,例如家人的生日,每天的起床时间等.这性例行的工作有可能被遗忘,但是如果我们用计算机来进行提醒的话,则方便很多.这里就要介绍到Li ...
- Nginx报出504 Gateway Timeout错误2
昨天,一个程序需要导出500条数据,结果发现到150条是,Nginx报出504 Gateway Timeout错误 经观察,发现大约30秒时超时,php.ini中执行时间配置已经是300秒: 复制代码 ...
- (转)JavaScript中==和===的区别
== 用于比较 判断 两者相等 ==在比较的时候可以转自动换数据类型 ===用于严格比较 判断两者严格相等 ===严格比较,不会进行自动转换,要求进行比较的操作数必须类型 ...
- 前端JSONPJIE解决跨域问题
解决同源策略的两个方法 1 . JSONP jsonp (将 JSON 数据填充进回调函数,这就是JSONP的JSON+Padding 的含义) jsonp是json用来跨域的一个东西,原理是通过sc ...
- Android Weekly Notes Issue #276
September 24th, 2017 Android Weekly Issue #276 本期内容包括LifeCycle与Architecture的相关文章,以及新的JSON解析库Moshi的介绍 ...
- python输出shell命令执行结果
import os,subprocess p = subprocess.Popen("df -h", shell=True, stdout=subprocess.PIPE) out ...
- 《CSS权威指南(第三版)》---第五章 字体
这章主要的内容有: 1.字体:一般使用一种通用的字体. 2.字体加粗:一般从数字100 -900 . 3.字体大小:font-size 4.拉伸和调整字体:font-stretch 5.调整字体大小: ...