CSS3鼠标悬停图片动画

鼠标放到图片上后:

demo地址:demo

div:

 1     <div class="wai">
 2         <a href="#">
 3             <div class="spinner"></div>
 4             <div class="img">
 5                 <img src="images/example.png" alt="img">
 6             </div>
 7             <div class="info">
 8                 <div class="info-back">
 9                     <h3>Heading here</h3>
10                     <p>Description goes here</p>
11                 </div>
12             </div>
13         </a>
14     </div>

css:

  1         .wai{
  2             height: 220px;
  3             position: relative;
  4             width: 220px;
  5         }
  6         .wai * {
  7             box-sizing: border-box;
  8         }
  9
 10         /*圆形边框*/
 11         .wai .spinner{
 12             border-color: #e53aec #74b9d2 #74b9d2 #e234ec; /*上右下左的边框颜色*/
 13             border-image: none;
 14             border-radius: 50%;
 15             border-style: solid;
 16             border-width: 10px;
 17             height: 230px;
 18             transition: all 0.8s ease-in-out 0s;
 19             width: 230px;
 20         }
 21
 22         /*图片*/
 23         .wai .img::before {
 24             display: none;
 25             border-radius: 50%;
 26             box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
 27             content: "";
 28             height: 100%;
 29             position: absolute;
 30             transition: all 0.35s ease-in-out 0s;
 31             width: 100%;
 32         }
 33         .wai .img {
 34             border-radius: 50%;
 35             bottom: 0;
 36             height: auto;
 37             left: 10px;
 38             position: absolute;
 39             right: 0;
 40             top: 10px;
 41             width: auto;
 42             vertical-align: middle;
 43         }
 44         .wai .img img {
 45             border-radius: 50%;
 46             height: 100%;
 47             width: 100%;
 48
 49         }
 50
 51
 52         /*下方文字的设置*/
 53
 54         .wai .info {
 55             background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
 56             bottom: 0;
 57             left: 10px;
 58             opacity: 0;
 59             right: 0;
 60             top: 10px;
 61             transition: all 0.8s ease-in-out 0s;
 62         }
 63         .info {
 64             backface-visibility: hidden;
 65             border-radius: 50%;
 66             bottom: 0;
 67             left: 0px;
 68             position: absolute;
 69             right: 0;
 70             text-align: center;
 71             top: 0px;
 72         }
 73         .wai .info p {
 74             color: #bbb;
 75             padding: 10px 5px;
 76             font-style: italic;
 77             margin: 0 30px;
 78             font-size: 12px;
 79             border-top: 1px solid rgba(255, 255, 255, 0.5);
 80         }
 81         .wai .info h3 {
 82             color: #fff;
 83             text-transform: uppercase;
 84             position: relative;
 85             letter-spacing: 2px;
 86             font-size: 22px;
 87             margin: 0 30px;
 88             padding: 55px 0 0 0;
 89             height: 110px;
 90             text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
 91         }
 92
 93         /*hover后的动作---*/
 94         .wai a:hover {
 95             text-decoration: none;
 96         }
 97         .wai a:hover .spinner {
 98             -webkit-transform: rotate(180deg);
 99             -moz-transform: rotate(180deg);
100             -ms-transform: rotate(180deg);
101             -o-transform: rotate(180deg);
102             transform: rotate(180deg);
103         }
104
105         .wai a:hover .info {
106             opacity: 1;
107         }
时间: 2024-10-06 17:35:12

CSS3鼠标悬停图片动画的相关文章

15款css3鼠标悬停图片动画过渡特效

分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="htmleaf-container"> <div class="container bs-docs-container"> <div class="row"> <div class="col-md-3

CSS3鼠标悬停图片360度旋转效果

一个用HTML5/css3写成的图片旋转特效,鼠标放上后图片就开始不停的旋转,对CSS3动画效果感兴趣的,更不可错过哦,用CSS3实现动画效果很不错的范例. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>CSS3鼠标悬停图片360度旋转效果丨电表控制器|www.sjzkeda.com</title>

CSS3鼠标悬停图片上浮显示描述代码

效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta

常用的css3鼠标悬停按钮动画特效

css3 按钮制作A标签属性hover css3带冒泡动画按钮 css3动画transform属性鼠标悬停图文列表动画效果 div CSS3动画带有的按钮_css3样式表属性动画按钮 创意CSS3属性鼠标悬停动画菜单 css3按钮动画特效大全鼠标滑过按钮动画特效 div css3 transition属性制作鼠标悬停图标导航菜单动画展示 21种css3 transition属性鼠标悬停导航条动画效果 纯div css3鼠标触碰图标背景渐变动画效果代码 css3动画鼠标滑过栏目图片滑动切换效果 c

鼠标悬停图片移动的效果

当前很多购物网站,像京东,蘑菇街这些都有对展示的图片做这种鼠标悬停图片上移,下移,左移或者右移效果, 实现代码很简单,就用css3的transform便可实现. 下列代码实现的是鼠标悬停,div向上移动30px,鼠标拿开div恢复原始位置. css: <style> div{ margin-top: 100px; width: 100px; height: 100px; background: pink; transition:All 0.4s ease-in-out;//让移动效果变得平滑自

基于jQuery CSS3鼠标点击动画效果

分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <div class="clearfix"> <div class="grid12 small12"> <div class="demos fl" id="demos&quo

鼠标悬停图片上方显示图片文字

//代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>鼠标悬停图片上显示文字 在线演示 www.divcss5.com</title> <style> img{border:0}/* css 注释说明:设置图片边框为0 */ body{behavior:url("csshover.htc");text

两种方式实现鼠标悬停图片逐渐变大

鼠标悬停图片逐渐变大这是一个很常见的效果,这里推荐两种方式,各有优缺点: 1.利用js,通过定时器实现宽高的加减. //鼠标移动图片变大 function change_large(obj,speed,target_width,target_height){ var timer = null; var bengin_width = 140;//初始宽度 var bengin_height = 180;//初始高度 clearInterval(timer); timer = setInterval

CSS3鼠标悬停360度旋转效果

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><title>CSS3鼠标悬停360度旋转效果</title><style>* {margin:0;padding:0;list-style:none;}body {background:#1F1F1F;}.zzsc {width: 220px;height: