寫點前端頁面的一些常見特效吧 - qishuang－IT工程師數位筆記本

文章出處

感覺好久都沒有寫博客了，一直在工作，終于至今暫時忙完了。。。。在模板之家整理了兩百多套模板，項目需要，下載了他們的源代碼，我發現有需要效果平時都沒有常見到，如果讓我寫的話，我可能得需要從網上查，才能寫出來，然后今天終于有時間了，正好可以寫在博客里，能自己看也可以讓別人看到。

首先來說第一個吧，就是鼠標放在一張圖上，那張圖可以緩緩變大
先來看效果
本來是這樣一張圖

然后把鼠標放上

圖片就緩緩放大了

再來看代碼部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<style type="text/css">
.t1{
    width:100%;
    max-width:440px;
    height:250px;
    cursor: pointer;  
    transition: all 0.6s;  
    }
.t1:hover{
     transform: scale(1.2); 
    }


</style>
<body>
<div><img class=" img-responsive t1" src="img/Cementing Manifolds.png" /></div>
</body>
</html>

再來說第二個特效，鼠標放到一張圖上，那張圖會旋轉180度
先來看效果

這樣一張圖，鼠標放上后

會旋轉180度

來看一下代碼

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
    <style>  
        div,img,body{  
            margin: 0;  
            padding: 0;  
        }  
        .box{  
            height: 150px;  
            width:300px;  
            margin: 0 auto;  
            padding: 20px;  
        }  
        .box:hover img{  
            transform: rotate(180deg);  
            -webkit-transform: rotate(180deg);  
            -moz-transform: rotate(180deg);  
            -o-transform: rotate(180deg);  
            -ms-transform: rotate(180deg);  
        }  
        img{  
            margin: 0 auto;  
            display: block;  
            transition: all 0.6s ease-in-out;  
            -webkit-transition: all 0.6s ease-in-out;  
            -moz-transition: all 0.6s ease-in-out;  
            -o-transition: all 0.6s ease-in-out;  
        }  
    </style>  
</head>  
<body>  
    <div class="box">  
        <img src="img/CEMENTING_TRUCK_image.png" alt=""/>  
    </div>  
</body>  
</html>

0.6s是旋轉的時間，數越大它會旋轉的越慢

第三個特效

還是先看效果

這樣的一張圖，鼠標放上去之后

會變成這樣

來看源代碼

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
    <style>  
        .light{
 background: #fff;
 width: 500px;
 height: 350px;
 margin: 100px auto;
 position: relative;
 text-align: center;
 color: #333;
 transform:translate3d(0,0,0);
 
}
.light-inner{
 padding: 60px 30px 0;
 pointer-events: none;
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 right: 0;
 text-align: center;
 transition: background 0.8s;
 backface-visibility: hidden;
}
.light-inner:before, .light-inner:after{
 display: block;
 content: "";
 position: absolute;
 left: 30px;
 top: 30px;
 right: 30px;
 bottom: 30px;
 border: 1px solid #fff;
 opacity: 0;
 transition: opacity 0.35s, transform 0.35s;
}
.light-inner:before{
 border-left: 0;
 border-right: 0;
 transform:scaleX(0,1);
}
.light-inner:after{
 border-top: 0;
 border-bottom: 0;
 transform: scaleY(1,0);
}
.light:hover .light-inner{
 background: #458fd2
}
.light:hover .light-inner:before, .light:hover .light-inner:after{
 opacity: 1;
 transform: scale3d(1,1,1);
}
 
.light-inner p{
 transition: opacity .35s, transform 0.35s;
 transform: translate3d(0,20px,0);
 color: #fff;
 opacity: 0;
 line-height: 30px;
}
.light:hover .light-inner p{
 transform: translate3d(0,0,0);
 opacity: 1;
}
    </style>  
</head>  
<body>  
   <div class="light">
 <img src="img/CEMENTING_TRUCK_image.png"/>
 <div class="light-inner">
  <p>喜歡可以關注</p>
  <p>不定時更新博客</p>
 </div>
</div> 
</body>  
</html>