浅谈CSS3鼠标移入图片动态提示效果(transform)

时间:2017-11-15

哦,对了,由于这几个例子写在一个html里面 所以提取出了部分公用的样式

body,figure,figcaption,h2,p{margin:0;padding:0;font-family: "微软雅黑";}
figure{position: relative;overflow: hidden;float: left;width:33.33%;height: 350px;}
figcaption{position: absolute;top: 0;left: 0;color:#fff;}
figure img{width:101%;height: 360px;opacity: 0.8;transition: all 0.35s}
figure figcaption p,h2,span,div{transition: all 0.35s}
@media screen and (max-width: 600px) {
    figure{width: 100%;}
}
@media screen and (min-width:601px) and (max-width: 1000px) {
    figure{width: 50%;}
}
@media screen and (min-width: 1001px) {
    figure{width: 33.33%;}
}

 

总结:

之所以选择写博客主要是为了锻炼自己的表达能力,培养一个总结知识点的好习惯,以前看别人写的一些好的文章时都很羡慕,自己却总是不知道从何下手,直到最近投简历的时候发现很多公司都要求注明自己的博客地址,所以有必要逼着自己写一下东西啦!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

  • 共3页:
  • 上一页
  • 3/3下一篇
    上一篇:css3实现画半圆弧线的示例代码 下一篇:浅谈css sticker-footer 布局

    相关文章

    最新文章