纯css3写的仿真图书翻页效果

对css3研究越深入，越觉得惊艳。css3说不上是万能的，但是它能实现的效果也超出了我的想象。它的高效率和动画效果的流畅性很多情况下能替代js的作用。个人习惯css3能实现的效果就不会用js,虽然在国内貌似没有css3的用武之地，这一点完成不能阻挡我对css3的热情。博主是一个地道的开源支持者，在学习css3的过程中写的一些demo会贴出来跟大家分享，都是一些想法最简单的实现，当然会有很多问题，希望大家指正，一起学习，一起进步。

下面贴一个纯css3实现的仿真图书翻页效果，只是一个很粗糙的雏形，后续会慢慢完善。欢迎大家提供宝贵的意见。

效果图

a-pure-css3-book

老规矩先上demo跟下载地址

       查看示例

       下载地址

       下面是源码：

 

复制代码
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>css3-book</title>
<style> 

footer {
font:14px/1.3 'Microsoft YaHei';
margin-top:150px;    
color: #000;
font-size: 15px;
line-height: 1.6;
padding: 60px 20px 0;
text-align: center;
display: block;
}
footer a{
    color:#000;
    text-decoration:none;
}
footer a:hover{
    text-decoration:underline;
    }
@keyframes book
    {
    0%        {transform: rotate(0deg);left:0px;}
    25%        {transform: rotate(20deg);left:0px;}
    50%        {transform: rotate(0deg);left:500px;}
    55%        {transform: rotate(0deg);left:500px;}
    70%        {transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100%    {transform: rotate(-360deg);left:0px;}
    }

@-webkit-keyframes book
    {
    0%        {-webkit-transform: rotate(0deg);left:0px;}
    25%        {-webkit-transform: rotate(20deg);left:0px;}
    50%        {-webkit-transform: rotate(0deg);left:500px;}
    55%        {-webkit-transform: rotate(0deg);left:500px;}
    70%        {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100%    {-webkit-transform: rotate(-360deg);left:0px;}

    }

@-moz-keyframes book
    {
    0%   {-moz-transform: rotate(0deg);left:0px;}
    25%  {-moz-transform: rotate(20deg);left:0px;}
    50%  {-moz-transform: rotate(0deg);left:500px;}
    55%  {-moz-transform: rotate(0deg);left:500px;}
    70%  {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100% {-moz-transform: rotate(-360deg);left:0px;}
    }

@-o-keyframes book
    {
    0%   {transform: rotate(0deg);left:0px;}
    25%  {transform: rotate(20deg);left:0px;}
    50%  {transform: rotate(0deg);left:500px;}
    55%  {transform: rotate(0deg);left:500px;}
    70%  {transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100% {transform: rotate(-360deg);left:0px;}
    }
    .container{
    position:relative;
    height:155px;
    width:236px;
    margin:40px auto;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
     transform-style:preserve-3d;
    }
    .page2{
    
    width:236px;
    height:155px;
    overflow:hidden;
    -webkit-animation:page 5s ease 1s infinite alternate;
    -moz-animation:page 5s ease 1s infinite alternate;
    -o-animation:page 5s ease 1s infinite alternate;
    animation:page 5s ease 1s infinite alternate;
    }
    #page1
    {
     position:absolute;
     left:0px;
     width:236px;
     height:155px;
     overflow:hidden;
    }
    #page2
    {
     position:absolute;
     left:236px;
     width:0px;
     height:155px;
     overflow:hidden;
     -webkit-animation:page2 2s ease 1s infinite alternate;
     -moz-animation:page2 2s ease 1s infinite alternate;
     -o-animation:page2 2s ease 1s infinite alternate;
     animation:page2 2s ease 1s infinite alternate;
    }
    #page3
    {
     position:absolute;
     left:236px;
     width:0px;
     height:155px;
     overflow:hidden;
     -webkit-animation:page3 2s ease 1s infinite alternate;
     -moz-animation:page3 2s ease 1s infinite alternate;
     -o-animation:page3 2s ease 1s infinite alternate;
     animation:page3 2s ease 1s infinite alternate;
    }
    #page3 img{
    margin-left:-128px;
    -webkit-animation:pagei3 2s ease 1s infinite alternate;
    -moz-animation:pagei3 2s ease 1s infinite alternate;
    -o-animation:pagei3 2s ease 1s infinite alternate;
    animation:pagei3 2s ease 1s infinite alternate;
    }
    @-webkit-keyframes page2
    {
    from {width: 0px;left:236px}
    to {width: 128px;left:0px}
    }
    @-moz-keyframes page2
    {
    from {width: 0px;left:236px}
    to {width: 128px;left:0px}
    }
    @-o-keyframes page2
    {
    from {width: 0px;left:236px}
    to {width: 128px;left:0px}
    }
    @keyframes page2
    {
    from {width: 0px;left:236px}
    to {width: 128px;left:0px}
    }
    @-webkit-keyframes page3
    {
    from {width: 0px;left:236px}
    to {width: 128px;left:128px}
    }
    @-moz-keyframes page3
    {
    from {width: 0px;left:236px}
    to {width: 128px;left:128px}
    }
    @-o-keyframes page3
    {
    from {width: 0px;left:236px}
    to {width: 128px;left:128px}
    }
    @keyframes page3
    {
    from {width: 0px;left:236px}
    to {width: 128px;left:128px}
    }
    @-webkit-keyframes pagei3
    {
    from {margin-left:-236px}
    to {margin-left:-128px}
    }
    @-moz-keyframes pagei3
    {
    from {margin-left:-236px}
    to {margin-left:-128px}
    }
    @-o-keyframes pagei3
    {
    from {margin-left:-236px}
    to {margin-left:-128px}
    }
    @keyframes pagei3
    {
    from {margin-left:-236px}
    to {margin-left:-128px}
    }
</style>
</head>
<body>
<div class="container">
<div class="page" id="page1">
<img src="1.jpg"/>
</div>
<div class="page" id="page2">
<img src="2.jpg"/>
</div>
<div class="page" id="page3">
<img src="2.jpg"/>
</div>
</div>
<footer>Tutorial by &nbsp;&nbsp;<a href="http://bloglaotou.duapp.com" target="_blank">sanyecao</a>&nbsp;&nbsp;©2013&nbsp;&nbsp;</footer>
</body>
</html>
复制代码
复制代码
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>css3-book</title>
<style> 

footer {
font:14px/1.3 'Microsoft YaHei';
margin-top:150px;    
color: #000;
font-size: 15px;
line-height: 1.6;
padding: 60px 20px 0;
text-align: center;
display: block;
}
footer a{
    color:#000;
    text-decoration:none;
}
footer a:hover{
    text-decoration:underline;
    }
@keyframes book
    {
    0%        {transform: rotate(0deg);left:0px;}
    25%        {transform: rotate(20deg);left:0px;}
    50%        {transform: rotate(0deg);left:500px;}
    55%        {transform: rotate(0deg);left:500px;}
    70%        {transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100%    {transform: rotate(-360deg);left:0px;}
    }

@-webkit-keyframes book
    {
    0%        {-webkit-transform: rotate(0deg);left:0px;}
    25%        {-webkit-transform: rotate(20deg);left:0px;}
    50%        {-webkit-transform: rotate(0deg);left:500px;}
    55%        {-webkit-transform: rotate(0deg);left:500px;}
    70%        {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100%    {-webkit-transform: rotate(-360deg);left:0px;}

    }

@-moz-keyframes book
    {
    0%   {-moz-transform: rotate(0deg);left:0px;}
    25%  {-moz-transform: rotate(20deg);left:0px;}
    50%  {-moz-transform: rotate(0deg);left:500px;}
    55%  {-moz-transform: rotate(0deg);left:500px;}
    70%  {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100% {-moz-transform: rotate(-360deg);left:0px;}
    }

@-o-keyframes book
    {
    0%   {transform: rotate(0deg);left:0px;}
    25%  {transform: rotate(20deg);left:0px;}
    50%  {transform: rotate(0deg);left:500px;}
    55%  {transform: rotate(0deg);left:500px;}
    70%  {transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100% {transform: rotate(-360deg);left:0px;}
    }
    .container{
    position:relative;
    height:155px;
    width:236px;
    margin:40px auto;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
     transform-style:preserve-3d;
    }
    .page2{
    
    width:236px;
    height:155px;
    overflow:hidden;
    -webkit-animation:page 5s ease 1s infinite alternate;
    -moz-animation:page 5s ease 1s infinite alternate;
    -o-animation:page 5s ease 1s infinite alternate;
    animation:page 5s ease 1s infinite alternate;
    }
    #page1
    {
     position:absolute;
     left:0px;
     width:236px;
     height:155px;
     overflow:hidden;
    }
    #page2
    {
     position:absolute;
     left:236px;
     width:0px;
     height:155px;
     overflow:hidden;
     -webkit-animation:page2 2s ease 1s infinite alternate;
     -moz-animation:page2 2s ease 1s infinite alternate;
     -o-animation:page2 2s ease 1s infinite alternate;
     animation:page2 2s ease 1s infinite alternate;
    }
    #page3
    {
     position:absolute;
     left:236px;
     width:0px;
     height:155px;
     overflow:hidden;
     -webkit-animation:page3 2s ease 1s infinite alternate;
     -moz-animation:page3 2s ease 1s infinite alternate;
     -o-animation:page3 2s ease 1s infinite alternate;
     animation:page3 2s ease 1s infinite alternate;
    }
    #page3 img{
    margin-left:-128px;
    -webkit-animation:pagei3 2s ease 1s infinite alternate;
    -moz-animation:pagei3 2s ease 1s infinite alternate;
    -o-animation:pagei3 2s ease 1s infinite alternate;
    animation:pagei3 2s ease 1s infinite alternate;
    }
    @-webkit-keyframes page2
    {
    from {width: 0px;left:236px}
    to {width: 128px;left:0px}
    }
    @-moz-keyframes page2
    {
    from {width: 0px;left:236px}
    to {width: 128px;left:0px}
    }
    @-o-keyframes page2
    {
    from {width: 0px;left:236px}
    to {width: 128px;left:0px}
    }
    @keyframes page2
    {
    from {width: 0px;left:236px}
    to {width: 128px;left:0px}
    }
    @-webkit-keyframes page3
    {
    from {width: 0px;left:236px}
    to {width: 128px;left:128px}
    }
    @-moz-keyframes page3
    {
    from {width: 0px;left:236px}
    to {width: 128px;left:128px}
    }
    @-o-keyframes page3
    {
    from {width: 0px;left:236px}
    to {width: 128px;left:128px}
    }
    @keyframes page3
    {
    from {width: 0px;left:236px}
    to {width: 128px;left:128px}
    }
    @-webkit-keyframes pagei3
    {
    from {margin-left:-236px}
    to {margin-left:-128px}
    }
    @-moz-keyframes pagei3
    {
    from {margin-left:-236px}
    to {margin-left:-128px}
    }
    @-o-keyframes pagei3
    {
    from {margin-left:-236px}
    to {margin-left:-128px}
    }
    @keyframes pagei3
    {
    from {margin-left:-236px}
    to {margin-left:-128px}
    }
</style>
</head>
<body>
<div class="container">
<div class="page" id="page1">
<img src="1.jpg"/>
</div>
<div class="page" id="page2">
<img src="2.jpg"/>
</div>
<div class="page" id="page3">
<img src="2.jpg"/>
</div>
</div>
<footer>Tutorial by &nbsp;&nbsp;<a href="http://bloglaotou.duapp.com" target="_blank">sanyecao</a>&nbsp;&nbsp;©2013&nbsp;&nbsp;</footer>
</body>
</html>
复制代码

 

posted @   流浪老三  阅读(1815)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述
Edit by  三叶草  
点击右上角即可分享
微信分享提示
AI IDE Trae