css怎麼實現圖片放大？(酷炫特效樣本）

最後更新：2018-08-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本篇文章主要介紹如何用css實現圖片放大功能，即利用滑鼠滑過圖片使其懸停放大，移開即恢複正常大小，整體酷炫的特效更能吸引使用者點擊產品圖片。希望本篇文章對大家有所協助。

css實現圖片放大具體代碼如下：

<!DOCTYPE html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>CSS圖片放大特效樣本</title>    <script src="js/mootools-1.js" type="text/javascript"></script>    <link rel="stylesheet" href="js/img-hover.css" type="text/css">    <link rel="stylesheet" href="js/img-hover-main.css" type="text/css">    <script src="js/browserCheck.js" type="text/javascript"></script></head><body><div id="logo"></div><div id="container">    <div class="heading">CSS圖片放大特效樣本</div>    <div id="image-container">        <div class="img" id="img-1">            <div class="mask"></div>            <img src="img/1.png">        </div>        <div class="img" id="img-2">            <div class="mask"></div>            <img src="img/1.png">        </div>        <div class="img" id="img-3">            <div class="mask" id="mask-1"></div>            <div class="mask" id="mask-2"></div>            <img src="img/1.png">        </div>        <div class="img" id="img-4">            <div class="mask"></div>            <img src="img/1.png">        </div>        <div class="img" id="img-5">            <div class="mask"></div>            <img src="img/1.png">        </div>        <div class="img" id="img-6">            <div class="mask"></div>            <img src="img/1.png">        </div>        <div class="clearfix"></div>    </div>    <div class="clearfix"></div>    <br>    <div id="warning" style="margin-top: 20px; text-align: center;"></div></div></body></html>

/*img-hover.css*/.img{   -webkit-transform:scale(0.6);   -moz-transform:scale(0.6);   -o-transform:scale(0.6);   float:left;   margin-left:-50px;   margin-right:-50px;   margin-top:-10px;   -webkit-transition-duration: 0.5s;   -moz-transition-duration: 0.5s;   -o-transition-duration: 0.5s;   }.img img{      padding:10px;      border:1px solid #fff;}.img:hover{   -webkit-transform:scale(0.8);   -webkit-box-shadow:0px 0px 30px #ccc;   -moz-transform:scale(0.8);   -moz-box-shadow:0px 0px 30px #ccc;    -o-transform:scale(0.8);   -o-box-shadow:0px 0px 30px #ccc;   }   .img .mask{   width: 100%;   background-color: rgb(0, 0, 0);   position: absolute;   height: 100%;    opacity:0.6;   cursor:pointer;   -webkit-transition-duration: 0.5s;   -moz-transition-duration: 0.5s;   -o-transition-duration:0.5s;}#img-1:hover .mask{   height:0%; }#img-2:hover .mask{   height:0%;    margin-top:130px;}#img-4:hover .mask{   margin-left:219px;   margin-top:135px;   height:0%;   width:0%;}#img-3 #mask-1 {   width:50%;}#img-3 #mask-2{   width:50%;   margin-left:211px;}#img-3:hover #mask-1{   width:0%;}#img-3:hover #mask-2{   margin-left:430px;   width:0%;}#img-5:hover .mask{   margin-left:219px;   margin-top:135px;   height:0%;   width:0%;   -webkit-transform: rotateX(360deg);   -moz-transform: rotate(360deg);   -o-transform: rotate(-360deg);}#img-6:hover .mask{   margin-left:219px;   margin-top:135px;   height:0%;   width:0%;   -webkit-transform: rotateZ(750deg);   -moz-transform: rotateZ(750deg);   -o-transform: rotat(750deg);}

/*img-hover-main.css*/html{   height:100%;   margin:0;   padding:0;   width:100%;   background-color:#242424;   font-family:arial;}body{   height:100%;   margin:0 auto;   padding:0;   width:980px;}#logo  {   background-color:#242424;   color:#F1F1F1;   font-size:43px;   padding:15px 0 6px;   text-shadow:0 0 2px #FFFFFF;}#logo a {   color:#F1F1F1;}#container{   width:100%;   min-height:800px;   background-color:#000;}a{color: rgb(0, 114, 191); text-decoration: none;    }.heading{   font-size:24px;   color:#dfdfdf;   text-align:center;   padding-top:20px;}.legal{   text-align:center;   color:5f5f5f;   font-size:16px;   margin-top:100px;   background:-moz-linear-gradient(center top , #000, #242424) repeat scroll 0 0 transparent;   background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #000),color-stop(1, #242424));   background:-o-gradient(linear,left top,left bottom,color-stop(0, #000),color-stop(1, #242424));}a{color: rgb(0, 114, 191); text-decoration: none;    }.warning{   color:#555;   text-align:center;   font-size:12px;}.msg{   color:#dfdfdf;   text-align:center;   font-size:14px;   line-height:1.5em;}.clearfix{   clear:both;   float:none;}

css實現圖片放大在頁面中展示效果如下：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More