<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>title> <style> .center-bg { position: relative; top: 100px; left: 300px; width: 500px; height: 500px; background-color: #ddd; border: 1px solid #fff; } .left-corner { position: absolute; left: 0; top: calc(100% - 100px); width: 0; height: 0; border-bottom: 100px solid #999; border-right: 100px solid transparent; transform: rotate3d(1,1,0,0deg); } .right-corner { position: absolute; top: calc(100% - 100px); left: calc(100% - 100px); width: 0; height: 0; border-bottom: 100px solid #999; border-left: 100px solid transparent; } @keyframes flipBook1 { 0% { transform: rotate3d(1,1,0,0deg); } 100% { transform: rotate3d(1,1,0,90deg); } } .flip-animation-1 { animation: flipBook1 2s forwards; -moz-animation: flipBook1 2s forwards; /* Firefox */ -webkit-animation: flipBook1 2s forwards; /* Safari and Chrome */ -o-animation: flipBook1 2s forwards; /* Opera */ } style> head> <body> <div class="center-bg"> <div class="content-area"> <div> <div class="left-corner flip-animation-1"> div> div> <div> <div class="right-corner"> div> div> div> div> body>html>
css-翻页
原创
©著作权归作者所有:来自51CTO博客作者迩伶贰的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:html的布局demo
下一篇:css效果文字多了就...
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
有趣的CSS - 故障字体效果
用 css 实现一个404故障字体效果。
css 动效 故障效果 404动画 ux -
有趣的CSS - 文字加载动画效果
用 css 实现多字符模拟加载动画效果。
css 加载动画 交互 ux 动效