利用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 ...
随机推荐
- 【BZOJ2843】极地旅行社 离线+树链剖分+树状数组
[BZOJ2843]极地旅行社 Description 不久之前,Mirko建立了一个旅行社,名叫“极地之梦”.这家旅行社在北极附近购买了N座冰岛,并且提供观光服务.当地最受欢迎的当然是帝企鹅了,这些 ...
- 【BZOJ3291】Alice与能源计划 二分图最大匹配
[BZOJ3291]Alice与能源计划 Description 在梦境中,Alice来到了火星.不知为何,转眼间Alice被任命为火星能源部长,并立刻面临着一个严峻的考验. 为了方便,我们可以将火星 ...
- protobuf json xml比较
1 protobuf/xml/json对比 从数据的存储格式的角度进行对比 假如要存储一个键值对: {price:150} 1.1 protobuf的表示方式 message Test { opti ...
- 《Linux 鸟哥私房菜》 第6章 Linux的文件权限与目录配置
1.文件的类型与权限. 如图红框.权限与类型共有10个字符组成. (1)第一个字符代表这个文件是“目录.文件或链接文件等”. [d]则是目录 [-]则是文件 [|]则是连接文件 [b]则是设备文件里面 ...
- python cookbook第三版学习笔记十三:类和对象(四)描述器
__get__以及__set__:假设T是一个类,t是他的实例,d是它的一个描述器属性.读取属性的时候T.d返回的是d.__get__(None,T),t.d返回的是d.__get__(t,T).说法 ...
- LeetCode 017 4Sum
[题目] Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d ...
- php分10个不同等级压缩优化图片(PNG)
今天找到一个php写的压缩图片程序,可以分10个等级(0-9)来压缩,0等级时压缩比率不是很大,图片不会失真:随着压缩等级不断增大,图片会变得越来越不清晰,通常压缩后图片大小可以减少到原来的50%,压 ...
- spring-boot4代码
App.java package com.kfit; import org.springframework.boot.SpringApplication; import org.springframe ...
- packstack快速安装
1 安装软件库 更新安装的软件包,命令如下: sudo yum update -y 建立RDO库,命令如下: sudo yum install -y https://rdo.fedorapeople. ...
- [UVA 12633] Super Rooks on Chessboard FFT+计数
如果只有行和列的覆盖,那么可以直接做,但现在有左上到右下的覆盖. 考虑对行和列的覆盖情况做一个卷积,然后就有了x+y的非覆盖格子数. 然后用骑士的左上到右下的覆盖特判掉那些x+y的格子就可以了. 注意 ...