CSS3的开门效果
admin 发布于：2018-04-19 22:02:01
阅读：loading
记得在2010年的时候，学了一下flex语言，看到一个示例是一个开门效果，那时感觉很高大上，虽然早已有了CSS3，但发现从网上找了一下类似这种效果的实现还是真的比较少，反正搜了一些相关的没有搜索到，点击图片查看效果，示例写的比较简单，右键源文件为相关代码。
点击图片开门效果，门开了没关上，只能开一次
<title>开门大吉-点击图片</title>
<style type="text/css">
.imageBox{
margin: 10px auto; width: 300px; height: 300px; position: relative; overflow: hidden; } #bg_box{ width: 100%; height: 300px; position:absolute; top:0; left: 0; background:url("bg.jpg") no-repeat scroll; transition: 5s; opacity: 0.2; } #fg_left{ width: 50%; height: 100%; background: url("fg.jpg") no-repeat scroll left 0px; transition: 5s; position:absolute; top:0; left: 0; } #fg_right{ width: 50%; height: 100%; background: url("fg.jpg") no-repeat scroll right 0px; transition: 5s; position:absolute; top:0; right: 0; }
</style>
<script type="text/javascript">
function openImage(){ var right = document.getElementById("fg_right"); right.style.transform = "translate(100%,0) rotateY(160deg)"; var left = document.getElementById("fg_left"); left.style.transform = "translate(-100%,0) rotateY(-160deg)"; var bgBox = document.getElementById("bg_box"); bgBox.style.opacity = 1;
}
</script>
<div class="imageBox"> <div id="bg_box"></div> <div id="fg_left" onclick="openImage()"></div> <div id="fg_right" onclick="openImage()"></div>
</div>
注
上述许多内容已经过时和过期了，留存本篇文章仅为方便个人查看，原始文章的信息参考：
原始链接：https://www.chendd.cn/information/viewInformation/myLog/238.a
最后更新：2018-04-19 22:02:01
访问次数：596
评论次数：2+
点赞个数：4，[相当给力：4]
点赞
