CSS3翻书效果 发表于 2017-07-12 | 分类于 CSS3 | 字数统计 152 字 | 阅读时长 1 分钟 利用html和css3实现翻书效果。 这里用css3实现翻书效果 注意下文html 没有给li标签闭合 是为了处理inline-block元素间隙问题,因浏览器会自动闭合,偷个懒,不建议这么做。CSS3呼吸灯效果翻书效果 关键代码: 12345<ul> <li> <li class="anim"> <li class="anim2"></ul> 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647ul { background: gray; width: 100%; padding: 20px; text-align: center; -webkit-perspective: 200; } li { list-style: none; height: 50px; width: 100px; padding: 0; margin: 0; display: inline-block; background: white; border-radius: 2px; } .anim { animation: anim 1s infinite; width: 100px; margin-left: -100px; background: white } @keyframes anim { to { transform: rotateY(-360deg); } } .anim2 { animation: anim2 1s infinite; width: 100px; margin-left: -100px; background: white } @keyframes anim2 { 25% { transform: rotateY(0deg); } to { transform: rotateY(-360deg); } } 坚持技术分享,您的支持将鼓励我继续创作! 赏 微信打赏 支付宝打赏