Css实现书本翻页效果//样式++
<style>
body{
background-color: #eaf0f2;
}
h1{
font-size: 14px;font-family:"Microsoft Yahei";text-align: center;
}
.paper{
position: relative;width: 500px;height: 300px;margin: 0 auto;
}
.
layer{
position: absolute;left: 0;top: 0;width: 500px;height: 300px;
background-color: #fff;box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
.btnBox{
pointer-events: none;opacity: 0;text-align: center;
margin-top: 140px;text-align: center;
}
.btn{
padding: 10px;border-radius: 2px;color: #fff;display: inline-block;
}
.
JavaBook{
background-color: #3b5998;
}
.IndexLogin{
background-color: #00aced;margin: 0 20px;
}
.HomePage{
background-color: #d34836;
}
.Soange{
pointer-events: none;position: absolute;right: 15px;top: 10px;
color:rgba(0,0,0,0.3);font-size: 20px;z-index: 11;opacity: 0;
cursor: default;color:#999;
}
.paper.folded .Soange{
-webkit-transition: 0.4s;transition: 0.4s;
-webkit-transition-delay: 0.6s;transition-delay: 0.6s;
opacity: 1;cursor: pointer;pointer-events: initial;
}
.paper.folded .btnBox{
opacity: 1;-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
-webkit-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
pointer-events: initial;
}
.paper.folded .layer{
z-index: 1;
-webkit-transition: all 0.1s;
-o-transition: all 0.1s;
transition: all 0.1s;
-
webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.haha{
width: 500px;height: 300px;overflow: hidden;position: absolute;top: 0;left: 0;
}
.haha:before{
content:'';
position: absolute;
htmlbordertop: 0;
right: 0;
border-style: solid;
border-width: 0;
border-color:rgba(0,0,0,0.2) #fff;
border-radius: 0 0 0 4px;
box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
}
.haha:hover:before{
border-right-width: 80px;
border-bottom-width: 80px;
}
.paper.folded .haha:before{
border-right-width: 1000px;
border-bottom-width: 600px;
}</style>
//盒⼦++
<body>
<h1>Java基础教程</h1>
<div class="paper"id="paper">
<div class="layer">
<div class="btnBox">
<img src="~/Content/image/⾼斯林.PNG"class="haha"/>
</div>
<span class="Soange">×</span>
</div>
<div class="haha"id="haha">
<img src="~/Content/image/awhile.PNG"/>
</div>
</div>
<script>
this.className ="paper";
}else{
this.className ="paper folded";
}
});
</script>
</body>
效果图（进⾏动画翻页效果）：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。