大头

之前在不网站看到过关于css的一些例子 今天自己也写了一个css特效

下面是代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css的旋转巩运用 transition transform filter 的一些属性</title>
        <style type="text/css">
             *{padding: 0; margin:0 ;font-family: "arial rounded mt bold";}
             .main{margin: 0 auto;height: 400px;width: 400px;text-align:center;
                 background: brown;
             }
             .first ,.two,.three,.four{width: 150px;height: 150px;
                 float: left;
                 border: solid whitesmoke 10px;
                 overflow: hidden;
                 margin: 14px; 
                 box-shadow: 5px 5px 5px darkgray;
                 -webkit-box-shadow: 5px 5px 5px darkgray; 
                 }
             .first ,.three{margin-right: 10px;}
             .first .first_one,.two .two_one,.three  .three_one,.four .four_one{
                 height: 100px;
                width: 150px;
                background:darkcyan; 
                font-size: 10px; 
                    
             }
             img{
                 width: 150px;
                 height: 150px;
             
                 }
             /*注意兼容性的写法-webkit- -moz-  -o- */
             .first :hover .first_one,.two:hover .two_one,.three:hover .three_one,.four:hover .four_one{
                 transform: translateY(-100px);
                 -webkit-transform: translateY(-100px);
                 -moz-transform: translateY(-100px);
                 -webkit-transition:-webkit-transform 0.5s ease-in 0.1s; 
                 transition:transform 0.5s ease-in 1s; 
                 -moz-transition:-moz-transform 0.5s ease-in 0.1s; 
             
             }
             .first:hover img,.two:hover img,.three:hover img,.four:hover img{
                 transform:scale(1.5,1.5);
                 -webkit-transform:scale(1.5,1.5);
                 -moz-transform:scale(1.5,1.5);
                 -webkit-transition:-webkit-transform 0.5s ease-in 0.1s;
                 transition:transform 0.5s ease-in; 
                 -moz-transition:-moz-transform 0.5s ease-in 0.1s; 
                 filter: opacity(0.5);
                 -ms-filter: opacity(0.5);
                 -webkit-filter:  opacity(0.5);
                 /*drop-shadow(5px 5px 5px #000) 不能用 为啥*/
                 /*blur(5px)变模糊*/
                 
             }
             /*.first_one:hover{
                 filter: opacity(1);
                 -ms-filter: opacity(1);
                 -webkit-filter:opacity(0.5);
                 }*/
        </style>
    </head>
    <body>
     <div class="main">
          <div class="first">
              <figure>
              <img src="1.jpg"/>
              <div class="first_one">
                  <h4>Wonder girls</h4>
                  <p>css的练习，这次通过overflow 及旋转标签来加深对css的理解。同时提高自己的css的能力</p>
                  <a href="#">查看全文</a>
              </div>
              </figure>
         </div>
         <div class="two">
              <figure>
              <img src="1.jpg"/>
              <div class="two_one">
                  <h4>Wonder girls</h4>
                  <p>css的练习，这次通过overflow 及旋转标签来加深对css的理解。同时提高自己的css的能力</p>
                  <a href="#">查看全文</a>
              </div>
              </figure>
         </div>
         <div class="three">
              <figure>
              <img src="1.jpg"/>
              <div class="three_one">
                  <h4>Wonder girls</h4>
                  <p>css的练习，这次通过overflow 及旋转标签来加深对css的理解。同时提高自己的css的能力</p>
                  <a href="#">查看全文</a>
              </div>
              </figure>
         </div>
         <div class="four">
              <figure>
              <img src="1.jpg"/>
              <div class="four_one">
                  <h4>Wonder girls</h4>
                  <p>css的练习，这次通过overflow 及旋转标签来加深对css的理解。同时提高自己的css的能力</p>
                  <a href="#">查看全文</a>
              </div>
              </figure>
         </div>
     
     </div>
    </body>
</html>
View Code

 

效果图：

posted @ 2016-02-06 22:59  and大头  阅读(244)  评论(0)  编辑  收藏  举报

大头