利用CSS3给图片添加旋转背景特效

首先看旋转特效：http://www.w2bc.com/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>

时间： 2024-10-12 19:59:24

利用CSS3给图片添加旋转背景特效的相关文章

一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览   源码下载 简要教程 这是一款效果非常炫酷的jQuery和CSS3 3D旋转画廊特效插件.第一个DEMO是一个简单的例子,使用CSS3来制作3d旋转效果,然后用js来控制前后导航按钮.第二个DEMO是第一个DEMO的升级版,它增加了图片标题.查看图片.键盘控制等其它功能. HTML结构 这个3D画廊

CSS3实现图片循环旋转

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片循环旋转</title> <style> .ta_c{text-align: center; margin-top: 100px;} @-webkit-keyframes rotation{ from {-webkit-transform: rotate(0deg);} to

CSS3实现图片放大旋转

知识点: css3动画 transition /*旋转动画*/ @-webkit-keyframes rotation{ from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } 效果: 源码: ----------------------- <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo

php给图片添加文字水印方法汇总

在php中要给图片加水印我们需要给php安装GD库了,这里我们不介绍GD库安装,只介绍怎么利用php给图片添加文字水印的4种方法的汇总.有需要的小伙伴可以参考下. 1: 面向过程的编写方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 //指定图片路径 $src = '001.png'; //获取图片信息 $info = getimagesize($src); //获取图片扩展名 $type = image_type_to_ex

10.14 CSS3制作3D图片立方体旋转特效

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS3制作3D图片立方体旋转特效 - 站长素材</title> <style type="text/css"> html{ background:linear-gradient(#ff0 0%,#F00 80%); height: 100%; } .wrap{

网页特效：用CSS3制作3D图片立方体旋转特效

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS3制作3D图片立方体旋转特效 - 站长素材</title> <style type="text/css"> html{ background:linear-gradient(#ff0 0%,#F00 80%); height: 100%; } .wrap{

可控制转速CSS3旋转风车特效

以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作的风车旋转动画,而且也用CSS 3控制速度. 体验效果:http://hovertree.com/texiao/css3/40/ 效果图: 可以看到,风车的叶片是三角形,使用css画各种图形请参考:http://hovertree.com/h/bjaf/jtkqnsc1.htmhttp://hove

12种炫酷的CSS3鼠标滑过图片遮罩层动画特效

InContent是一款效果非常炫酷的CSS3鼠标滑过图片遮罩层动画特效.这组特效共有12种不同的鼠标滑过图片效果,分为滑动.旋转和翻转3大类.它可以在支持CSS3 transition和transform属性的现代浏览器中正常工作. 在线预览   源码下载 使用方法 使用该CSS3鼠标滑过图片遮罩层动画特效需要在页面中引入由SASS编译的sass-compiled.css文件或由LESS编译的less-compiled.css文件. <link rel="stylesheet"

css3动画应用-音乐唱片旋转播放特效

css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击图片,音乐播放,图片开始旋转. 1.动设置图片为圆形居中,使图片一直不停旋转. 核心代码: #xuanzhuan{ -webkit-animation: play 10s linear infinite; -moz-animation: play 10s linear infinite; anima