<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>Transform</title>
<style type="text/css">
.test-box{
width:600px
margin:50px auto}
.pic{
-webkit-transition:all 1s ease-in-out
transition:all 1s ease-in-out
cursor:pointer}
.top-pic{
position:absolute
transform:scale(0,0)}
.test-box:hover .top-pic{
-webkit-transform-origin:top right
-webkit-transform:scale(1,1)}
.test-box:hover .bot-pic{
-webkit-transform:scale(0,0)
-webkit-transform-origin:bottom left
opacity: .5
-webkit-transform:rotate(120deg)
-webkit-transform-origin:bottom left
}
</style>
</head>
<body>
<div class="test-box">
<img class="pic top-pic" src="test-pic01.jpg" />
<img class="pic bot-pic" src="test-pic02.jpg" />
</div>
</body>
</html>
随便写了几个效果，没有用到JS，不过要用到JS只要把触发事件替换掉上面的hover就行了，比如：
$(".button").click(function () {
。。。
})
这里面用到CSS3，所以请不要用IE11以下的低版本浏览器，不然你啥都看不见
这个情况是图片没有加载可能情况
1，路径内没有图片
你看一下图片是不是在你放的文件夹内
2，图片名字不对
你看一下是png图片还是jpg图片
名字一定要对
3，建议用你用相对路径，不建议你用绝对路径
你用绝对路径的话
换个电脑就不会显示了
你代码写的没问题
图片不显示
一般都是12出错了
你先试一下
不行了再问我
可以右击页面
找到审查元素
查看那里错误
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）