简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  css怎么实现图片放大？(酷炫特效示例）

css怎么实现图片放大？(酷炫特效示例）

藏色散人
藏色散人asal
2018-08-06 11:58:515159semak imbas

本篇文章主要介绍如何用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实现图片放大在页面中展示效果如下截图：

 3543760f0a7580e86411454e54322c8.png

【相关文章推荐】

分享一个HTML+css图片放大特效代码

CSS3实现的图片放大镜特效

CSS3实现五点式图片放大镜

jquery实现图片放大点击切换功能实例分享

CSS3鼠标经过图片旋转放大特效


Atas ialah kandungan terperinci css怎么实现图片放大？(酷炫特效示例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css的三大特性以及设置背景透明的介绍Artikel seterusnya：怎么用css3制作样式好看的按钮？

Artikel berkaitan

Lihat lagi