[作业]NO.11 CSS特效练习

admin 2人参与 0 次点击

http://www.5iweb.com.cn/resource/HoverEffectIdeas/index.html

实现网页中,第二个效果。

    1 讨论 | 直到 2018-06-22 5:53:16
  • 郭郭
    1
    <style> 
    * { padding:0px; margin:0px; list-style:none;}
    body { background-color:#666; font-family:Verdana, Geneva, sans-serif; font-size:16px;}
    a { text-decoration:none; color:#FFF;}
    .c {transition: all .5s; -webkit-transition: all .5s;}
    .m{ width:480px; height:360px; background-image:url(http://www.5iweb.com.cn/resource/HoverEffectIdeas/img/1.jpg); margin:10px auto; position:relative;z-index:2;right:0; top:0; overflow: hidden;}
    .m1 { width:480px; height:100px; padding:40px; position:absolute; top:200px;}
    .z { width:480px; height:360px; background-color:rgba(42;152;107;0.9); position:relative; z-index:1;}
    .m:hover { right:20px;}
    .m:hover .m1{ top:180px;}
    .m11 { font-size:25px;}
    .m11 span{ font-weight:bold;}
    
    
    </style>
    <body>
    <a href="#" target="_blank" >
    <div class="m c">
      <div class="z">
    	<div class="m1 c">
    	<p class="m11">Nice<span>Lily</span></p>
    	<p>Lily likes to play with crayons and pencils</p>
    	</div>
    </div>
    </div>
    </a>
    </body>
    

    加了个透明背景但是没显示。。。下面那个字一行行显示不会。。。