CSS3新特效之酷炫悬浮效果

CSS3新特性

CSS3有很多新特性

• CSS3 选择器（Selector）
• CSS3 的多列布局（multi-column layout）
• CSS3 的渐变效果（Gradient）
• CSS3 的阴影（Shadow）和反射（Reflect）效果
• CSS3 的盒子模型
• CSS3 的 Transitions, Transforms 和 Animation

等等….and so on

这些是我简单在手册查到的，不一一列举了，今天“赵学姐”在其他网站看悬浮效果，我决定帮帮”赵学姐”，更新一篇博客，也算是总结一下酷炫悬浮效果~

废话不多说，先看效果图~

基本思路

先看一下基本的基本的HTML内容；

<div class="item item1 effect-1">               <div class="image-box">                    <img src="images/img-2.jpg" alt="Image-1">               </div>                <div class="text-desc">                    <h3>Your Title</h3>                    <p>Lorem ipsum dolor sit amet,     consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>                    <a href="#" class="btn">Hello World</a>                </div>           </div>

• 第一种效果：
  这里在item的div里面，设置了两个子div，两个子div中，第一个是用来盛放img的，第二个div用来盛放文本信息的；让第二个div进行绝对定位(脱离文档流)，设置属性top: -100%;opacity: 0，这时候就看不到它了；当悬浮在item的时候，图片进行2D缩放过渡，同时隐藏在顶部top：-100%，过渡到0,同时opacity: 0过渡到 opacity: 1；

• 第二种效果
  布局和第一种一样，只不过这时候，图片和描述的过渡不再是缩放和top，而是图片transform: rotateY(360deg) scale(1, 1);的过渡，旋转着同时缩小到scale(0, 0)；
  文字描述opacity: 0和transform: rotateY的方式过渡显示

通用样式设置(包含添加悬浮效果的div、文字描述样式)

/*这是添加悬浮效果的div的样式*/.item{         float: left;          width: 30.33%;         margin: 10px 1%;         position: relative;         overflow: hidden;         text-align: center;         border: 4px solid rgba(255, 255, 255, 0.9);      }

 /*描述文字共同的样式*/      .text-desc{           position: absolute;           left: 0;           top: 0;          background-color: #fff;           height: 100%;          opacity: 0;           width: 100%;         }

第1种效果CSS设置

   /*第一组效果 描述文本特有样式*/   .item1 .text-desc{            opacity: 0.9;            top: -100%;            transition: 0.5s;            color: #000;        }        /*文本过渡*/     .item1.effect-3:hover .text-desc{           top: 0;        }  /*图片进行2D缩放过渡*/       .item1 img{          transition: 0.5s;        }       .item1:hover img{        transform: scale(1.2);       }

第2种效果CSS设置

通用样式和第一种相同

 /*img和文本的过渡*/ .item2.effect-6 .image-box{            transition: 0.5s;            transform: rotateY(360deg) scale(1, 1);         }         .item2.effect-6:hover .image-box {          transform: rotateY(0deg) scale(0, 0);         }         .item2.effect-6 .text-desc {                transform: rotateY(0deg) scale(0, 0);                transition: 0.5s;                opacity: 0;            }        .item2.effect-6:hover .text-desc {            transform: rotateY(360deg) scale(1, 1);            opacity: 1;        }

基本思路和核心代码就这些！其实全部都是对CSS3的使用，再加上一些布局；有不足望给予指点 ^ _ ^

源码传送门