前端特效（css3）

時間 2019-12-11

標籤前端特效 css3 css 欄目 CSS 简体版

原文原文鏈接

一、點擊圖片變大特效代碼以下：css

<!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

二、圖片旋轉特效代碼以下：css3

<!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;
           border:2px solid red;
            padding: 20px;
        }
        .box:hover img{
            transform: rotate(45deg); /* css3技術 */
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
        }
        img{
            margin: 0 auto;
            display: block;
            transition: all 0.6s ease-in-out;
            -webkit-transition:0.6s ease-in-out;
            -moz-transition: all 0.6s ease-in-out;
            -o-transition: all 0.6s ease-in-out;
           height: 150px;
            width:300px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="img/aa.jpg" alt=""/>
    </div>
</body>
</html>web

總結：cursor: pointer; 表示食指圖標；transform css3特效可查看http://www.w3school.com.cn/css3/css3_3dtransform.asp 可實現2D旋轉和3D旋轉ui

Chrome 25 以及更早的版本，須要前綴 -webkit-3d

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。