【每日一练】CSS3实现鼠标移入图片旋转放大特效

        “每日一练”刚开始一天就遭到了一些阻力，似乎该改名叫"每周一练"ORZ。。。还是再逼迫自己坚持一下试试(ˇˍˇ) ～

        本来每日一练只打算记界面设计和交互设计的内容，不过这几天赶任务做的是前端动效实现的内容，就先也记在这里。（简书这个编辑器怎么贴代码？只能手敲吗？好累orz）

-------------------------------------------分割线---------------------------------------------

效果图：（甲方说这个动效很不错，开心O(∩_∩)O~）

网页效果

思路：通过伪类实现鼠标移入和移出的效果。

···

#nav ul li:hover img,#nav ul li img:hover{

-webkit-transform:rotate(360deg) scale(1.2);  /*兼容Chrome*/

-moz-transform:rotate(360deg) scale(1.2);      /*兼容Firefox*/

-ms-transform:rotate(360deg) scale(1.2);      /*兼容IE*/

-o-transform:rotate(360deg) scale(1.2);        /*兼容Opera*/

}

···

图片放在list中：

<div id="nav">

     <ul>

           <li><img src="/images/1.png"></li>

           <li><img src="/images/2.png"></li>

           ......

   </ul>

</div>

关键代码：

#nav ul li img{

top:0px;left:0px;right:0px;bottom:0px;margin:auto;z-index:2;position:absolute;

transition:1s;

-webkit-transition:1s;

-moz-transition:1s;

}

/*不知道下面这个选择器叫伪类嵌套还是什么，这个的实现方法想了很久，最后被学习群里的大神一语道破*/

#nav ul li:hover img,#nav ul li img:hover{                                     

-webkit-transform:rotate(360deg) scale(1.5);           /*兼容webkit内核浏览器，如火狐*/

-moz-transform:rotate(360deg) scale(1.5);              /*兼容Mozilla内核浏览器，如谷歌*/

-ms-transform:rotate(360deg) scale(1.5);                /*兼容微软IE浏览器*/

-o-transform:rotate(360deg) scale(1.5);                  /*兼容Opera浏览器*/

}

demo截图

这个demo还给<li>加了效果：

#nav ul li:before{

content:"";height:105px;width:180px;background:rgba(0,0,0,.5);position:absolute;top:0px;left:0px;

transform:rotate(60deg);

-webkit-transform:rotate(60deg);

-moz-transform:rotate(60deg);

}

#nav ul li:after{

content:"";height:105px;width:180px;background:rgba(0,0,0,.5);position:absolute;top:0px;left:0px;z-index:1;

transform:rotate(-60deg);

-webkit-transform:rotate(-60deg);

-moz-transform:rotate(-60deg);

}

--------------------------------我是快乐的题尾分割线----------------------------------

还有最近一点题外的页面布局技巧也记一下：

1.无法实现图片在父元素中/页面水平居中？

比较好的解决办法：<img>标签是内联块状元素，可以在<img>外套一层<p>来实现，即

<p style="text-align:center"><img src="..."/></p>

（基础知识不扎实。练习得太少，以至于常用的知识点掌握不牢。）

2.通过问题1，复习：

①水平居中设置-行内元素

②水平居中设置-定宽块状元素

③水平居中设置-不定宽块状元素（方法一、二、三）

④垂直居中-父元素高度确定的单行文本

⑤垂直居中-父元素高度确定的多行文本

⑥隐性改变display类型

3.清除浮动：clear——解决网页塌陷问题（网页塌陷：父元素不含非浮动元素的时候，父元素塌陷，浮动元素溢出。）

解决思路：

在外围容器中添加一个不可见、不占位的内容的内容（文档流）。外围容器中有内容了，便可以自动判定高度，将浮动的元素包含进去，解决塌陷。

实现方法：（不用记，需要的时候Ctrl+C，Ctrl+V）

将父元素设置成clearfix类，并设置如下CSS样式：

.clearfix{zoom:1;}/*zoom属性：IE专用，这一句用于解决IE老版本中的塌陷问题*/

.clearfix:after{   /*为对象选择符（:after）：在对象被浏览器渲染后添加一些内容*/

 content:"父元素内容";/*content里面随意写内容，一般写空格或点。配合伪对象*/

display:block;/*将内容转为块状元素*/

visibility:hidden;/*设置为不可见，但保留占位空间（物理空间）*/

height:0;/*将内容高度设置为0，消除其占位*/

clear:both;/*将添加进去的内容作为消除浮动的元素*/

}