我想点击document
让div
的图片从中心点向两边展开一张图片的大小
用了css3
的缩放,但是他会把图片弄失真,问下用css3
能否实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:1px;
background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg);
background-size:cover;
height:600px;
margin:100px auto;
-webkit-transform-origin:left top;
-moz-transform-origin:left top;
-o-transform-origin:left top;
-ms-transform-origin:left top;
transform-origin:left top;
-webkit-transition:1s;
-moz-transition:1s;
-o-transition:1s;
}
</style>
</head>
<body>
<div class="outter"></div>
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
<script>
$(function() {
$(document).on('click',function(){
$('div').css({
'-webkit-transform':'scaleX(800)',
'transform':'scaleX(800)'
})
})
});
</script>
</body>
</html>
你的图片是位图,放大肯定会失真,你要用矢量图。你用css3也可以实现,要用高版本的浏览器。但是图片照样会失真。
你只放大x肯定失真。。模糊的话需要用矢量的
方法一:js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:0;
height:0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: 50% 50%;
background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg);
background-size:cover;
}
</style>
</head>
<body>
<div class="outter"></div>
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
<script>
$(function() {
$(document).on('click',function(){
$('div').stop(true).animate({
width: 800,
height: 600
})
})
});
</script>
</body>
</html>
方法二:scale
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 800px;
height: 600px;
margin: 100px auto 0;
transform: scale(0);
transform-origin: 50% 50%;
transition: transform .4s ease-in-out;
background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg);
background-size:cover;
}
</style>
</head>
<body>
<div class="outter"></div>
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
<script>
$(function() {
$(document).on('click',function(){
$('div').css({
"transform": "scale(1)"
})
})
});
</script>
</body>
</html>
方法三:纯CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outter {
width: 800px;
height: 600px;
margin: 100px auto 0;
background-color: gray;
}
.inner {
width: 800px;
height: 600px;
transform: scale(0);
transform-origin: 50% 50%;
transition: transform .4s ease-in-out;
background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg);
background-size:cover;
}
.outter:hover .inner {
transform: scale(1);
}
</style>
</head>
<body>
<div class="outter">
<div class="inner"></div>
</div>
</body>
</html>