css3左右翻页效果-[原创]纯CSS3构建的3D翻页效果

bendan520 2023年9月1日 css3 0

刚刚接触CSS3动画，一时兴起实现了自己设计的一个带有翻页效果的3D动画。 该页面是纯CSS3。 目前只能在Chrome中播放css3左右翻页效果，理论上可以支持Safari。

1、新建HTMLcss3左右翻页效果，代码如下（数据和翻页后的数据都是盲模拟的）

flash翻页效果网站模板_css3左右翻页效果_带动态翻页效果的数字时钟屏保

<!doctype html>
<head><meta charset="utf-8"><title>CSS3 Animation</title><meta name="description" content="CSS3 Animation"><meta name="author" content="Rex Rao"><link rel="stylesheet" href="css/style.css?v=1.0">
</head>
<body class="home"><section id="main"><br><br><br><br><br><div id="rotateDiv"><table class="table"><tr><th style="width:20%">列1</th><th style="width:40%">列2</th><th style="width:40%">列3</th></tr><tr><td>0</td><td>0</td><td>0</td></tr><tr><td>0</td><td>0</td><td>0</td></tr><tr><td>0</td><td>0</td><td>0</td></tr></table></div><br><br><br><div id="pager"><div id="prev" class="button">Previous</div><div id="next" class="button">Next</div></div></section><script src="js/jquery-min.js"></script><script>var tdtext = 0;$().ready(function(){$("#prev").click(function() {var self = $("#rotateDiv table");self.attr("class", "table");rotateRight(self);setTimeout(loadPrev, 500);});$("#next").click(function() {var self = $("#rotateDiv table");self.attr("class", "table");rotateLeft(self);setTimeout(loadNext, 500);});});function rotateLeft(el) {el.addClass("animation-rotate-left");}function rotateLeftBack(el) {el.addClass("animation-rotate-left-back");}function rotateRight(el) {el.addClass("animation-rotate-right");}function rotateRightBack(el) {el.addClass("animation-rotate-right-back");}function loadPrev(){var self = $("#rotateDiv table");
            tdtext -= 1;self.find("td").html(tdtext)rotateRightBack(self);}function loadNext(){var self = $("#rotateDiv table");
            tdtext += 1;self.find("td").html(tdtext)rotateLeftBack(self);}</script>
</body>
</html>

flash翻页效果网站模板_css3左右翻页效果_带动态翻页效果的数字时钟屏保

2.这个html需要css和jquery。 请自行更改jquery连接。 还请匹配css的地址。

带动态翻页效果的数字时钟屏保_css3左右翻页效果_flash翻页效果网站模板

3.创建css，代码如下

.table{border-collapse:collapse;width:100%;box-shadow:5px 5px 1px 1px #aaaaaa;}
.table,.table th,.table td{border:solid 1px #7788aa}
.table th{color:white;background-color:#556677}#rotateDiv{width:600px}
#pager{padding-right:10px}
#pager .button{display:inline-block;width:75px;height:35px;line-height:35px;border:solid 1px #22aaff;text-align:center;vertical-align:center;border-radius:5px}
#pager .button:hover{background-color:#1188ee;cursor:pointer;color:white;-webkit-transform:scale(1.1,1.1)}
#pager .button:active{background-color:#0055aa;cursor:pointer;color:white;-webkit-transform:scale(0.95,0.95)}.animation-rotate-left{-webkit-animation:rotate-left 0.5s ease-in}
.animation-rotate-left-back{-webkit-animation:rotate-left-back 0.5s ease-out}
.animation-rotate-right{-webkit-animation:rotate-right 0.5s ease-in}
.animation-rotate-right-back{-webkit-animation:rotate-right-back 0.5s ease-out}@-webkit-keyframes rotate-left{0%{-webkit-transform:perspective(1200px) rotateY(0deg);opacity:1} 100%{-webkit-transform:perspective(1200px) rotateY(-90deg);opacity:0.5}}
@-webkit-keyframes rotate-left-back{0%{-webkit-transform:perspective(1200px) rotateY(90deg);opacity:0.5} 100%{-webkit-transform:perspective(1200px) rotateY(0deg);opacity:1}}
@-webkit-keyframes rotate-right{0%{-webkit-transform:perspective(1200px) rotateY(0deg);opacity:1} 100%{-webkit-transform:perspective(1200px) rotateY(90deg);opacity:0.5}}
@-webkit-keyframes rotate-right-back{0%{-webkit-transform:perspective(1200px) rotateY(-90deg);opacity:0.5} 100%{-webkit-transform:perspective(1200px) rotateY(0deg);opacity:1}}

4. 好吧，让我们在 Chrome 中玩吧！