css3的transition模仿Js的放大镜效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<title>css3的transition模仿js的放大镜效果</title>
<style>
*{margin:0;padding:0px;}
body{background:#b1b1b1;font-family:Arial;font-size:125%;color:#202020;}
li{position:relative;list-style:none;float:left;width:235px;height:220px;margin:10px 0 0 10px;cursor:pointer;}
.tips{width:700px;margin:0 auto;line-height:24px;padding-top:10px;font-size:14px;}
.bredcolor{color:#fff;}
.enlarge {position:relative; width:180px; height:240px; margin:20px 0 200px 10px;margin:0 auto;}
.frame {width:270px; height:360px; position:absolute; left:-9999px; top:0; opacity:0; overflow:hidden;
    -webkit-transition: opacity 0.5s, left 0s 0.5s;
    -moz-transition: opacity 0.5s, left 0s 0.5s;
    -ms-transition: opacity 0.5s, left 0s 0.5s;
    -o-transition: opacity 0.5s, left 0s 0.5s;
    transition: opacity 0.5s, left 0s 1s;
}
.frame img {left: -134px; top: -181px; position:absolute;
    -webkit-transition: 0s 3600s;
    -moz-transition: 0s 3600s;
    -ms-transition: 0s 3600s;
    -o-transition: 0s 3600s;
    transition: 0s 3600s;
}
.frame .inner {position:absolute; left:0; top:0; width:270px; height:360px; box-shadow: inset 0px 0px 15px rgba(0,0,0,0.9);z-index:100;}
.enlarge .area {width:88px; height:118px; background:#fff; opacity:0.5; border:1px solid #000; position:absolute; left:45px; top:60px; z-index:50; display:none;
    -webkit-transition: 0s 3600s;
    -moz-transition: 0s 3600s;
    -ms-transition: 0s 3600s;
    -o-transition: 0s 3600s;
    transition: 0s 3600s;
}
img.control {position:absolute; display:none; width:32px; height:32px; z-index:100;}
img.up {left:74px; top:72px;}
img.down {left:74px; top:136px;}
img.left {left:42px; top:104px;}
img.right {left:106px; top:104px;}
img.dtl {left:42px; top:72px;}
img.dtr {left:106px; top:72px;}
img.dbl {left:42px; top:136px;}
img.dbr {left:106px; top:136px;}
img.ctr {left:74px; top:104px;}
.enlarge:hover .control {display:block;}
.enlarge:hover .area {display:block;}
/* 鼠标移到图上 */
.enlarge:hover .frame {left:250px; opacity:1;
    -webkit-transition: opacity 0.5s, left 0s;
    -moz-transition: opacity 0.5s, left 0s;
    -ms-transition: opacity 0.5s, left 0s;
    -o-transition: opacity 0.5s, left 0s;
    transition: opacity 0.5s, left 0s;
}
img.control:active ~ div.frame img {
    -webkit-transition: 1.5s linear;
    -moz-transition: 1.5s linear;
    -ms-transition: 1.5s linear;
    -o-transition: 1.5s linear;
    transition: 1.5s linear;
}
img.control:active ~ div.area {
    -webkit-transition: 1.5s linear;
    -moz-transition: 1.5s linear;
    -ms-transition: 1.5s linear;
    -o-transition: 1.5s linear;
    transition: 1.5s linear;
}
/* 被放大的图 */
img.up:active ~ div.frame img {top:0;}
img.down:active ~ div.frame img {top:-360px;}
img.left:active ~ div.frame img {left:0;}
img.right:active ~ div.frame img {left:-270px;}
img.dtl:active ~ div.frame img {top:0; left:0;}
img.dtr:active ~ div.frame img {top:0; left:-270px}
img.dbl:active ~ div.frame img {top:-360px; left:0;}
img.dbr:active ~ div.frame img {top:-360px; left:-270px;}
img.ctr:active ~ div.frame img {top:-180px; left:-135px;}
/* 放大镜 */
img.up:active ~ div.area {top:0;}
img.down:active ~ div.area {top:120px;}
img.left:active ~ div.area {left:0;}
img.right:active ~ div.area {left:90px;}
img.dtl:active ~ div.area {top:0; left:0;}
img.dtr:active ~ div.area {top:0; left:90px}
img.dbl:active ~ div.area {top:120px; left:0;}
img.dbr:active ~ div.area {top:120px; left:90px;}
img.ctr:active ~ div.area {top:59px; left:44px;}
</style>
</head>
<body>
<div class="enlarge">
        <img src="//ku.shouce.ren/files/images/201601/56a3352e5ca96.jpg" alt="">
        <img class="control up" src="//ku.shouce.ren/files/images/201601/56a335302a29a.png" alt="">
        <img class="control down" src="//ku.shouce.ren/files/images/201601/56a33530d1f6c.png" alt="">
        <img class="control left" src="//ku.shouce.ren/files/images/201601/56a33531332bb.png" alt="">
        <img class="control right" src="//ku.shouce.ren/files/images/201601/56a335322ee25.png" alt="">
        <img class="control dtl" src="//ku.shouce.ren/files/images/201601/56a33532e7899.png" alt="">
        <img class="control dtr" src="//ku.shouce.ren/files/images/201601/56a33533bd284.png" alt="">
        <img class="control dbl" src="//ku.shouce.ren/files/images/201601/56a335343a1da.png" alt="">
        <img class="control dbr" src="//ku.shouce.ren/files/images/201601/56a33534a4ae5.png" alt="">
        <img class="control ctr" src="//ku.shouce.ren/files/images/201601/56a3353508421.png" alt="">
        <div class="area"></div>
        <div class="frame"><img src="" alt=""><div class="inner"></div></div>
    </div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

css3的transition模仿Js的放大镜效果

分类

CSS3

描述

css3的transition模仿js的放大镜效果，鼠标移到图上，点击代表方向的箭头，可以看到效果。做这个效果要注意的是，时间要保持一致，大图是小图的倍数，不然会出现偏差。小图上放了一个放大镜，css3和js不同，js鼠标任意移动，可以获取鼠标...