【每日一练】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;/*将添加进去的内容作为消除浮动的元素*/

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 8,384评论 0 11
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 13,247评论 0 8
  • 阳春三月,人好,物好,心情好. 差不多也是get新技能的时期. 作为一名能力者,我们将目标锁定到了css3 an...
    sherlock221b阅读 7,192评论 0 10
  • 这是真实的故事,一个非洲救助所拯救了这只受伤的花豹,后来它跟这只金毛成了朋友。
    冥璇丶阅读 1,456评论 0 1
  • 写这篇文章还的从与懒家婆公司的相遇、相知说起。 每年暑假老爸来我们家小住一段时间,今年的夏天怎一个“热”字了...
    铿锵玫瑰的花语阅读 2,498评论 0 0