CSS3翻书Book效果

2024-09-05 12:19:00

字体：大中小

来源：转载

供稿：网友

CSS3制作实现的翻书效果，呵呵，个人觉得是比较基础的那种效果，与逼真的翻书效果相比，还差一点，不过从中，可以学习到很多CSS3的技巧，了解一下CSS3中相关属性的用法，也是很不错的事情，希望CSS3初学者能够喜欢。

<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>css3-book</title><style>.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}} 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="/d/file/p/2024/09-05/094a67bb02e0a03e235070a189765a95.jpg"/></div><div class="page" id="page2"><img src="/d/file/p/2024/09-05/5f4f3dd09f25750f8854082cca500e61.jpg"/></div><div class="page" id="page3"><img src="/d/file/p/2024/09-05/9bb5f26499d3a1ee6b5fcc42467a01ad.jpg"/></div></div><footer>www.codefans.net 2013  </footer></body></html>

上一篇：HTML5/CSS3卷边菜单效果

下一篇：CSS3实现信息框|仿Twitter的不规则提示框