今天分享一个用 css3 来实现的盒子缺角动画，并且鼠标移动上去以后，缺角会自动折叠回去，形成一个完整的盒子。下面先来看一下成品图
标签元素部分
<body> <div class="folding">折叠动画</div></body>
具体样式
<style> @keyframes folding { 0% { transform: rotate3d(1, 1, 0, 180deg); box-shadow: .05em -.05em .1em rgba(0,0,0,.15); } 10% { transform: rotate3d(1, 1, 0, 160deg); box-shadow: .05em -.05em .1em rgba(0,0,0,.15); } 20% { transform: rotate3d(1, 1, 0, 140deg); box-shadow: .05em -.05em .1em rgba(0,0,0,.15); } 30% { transform: rotate3d(1, 1, 0, 120deg); box-shadow: .05em -.05em .1em rgba(0,0,0,.15); } 40% { transform: rotate3d(1, 1, 0, 100deg); box-shadow: .05em -.05em .1em rgba(0,0,0,.15); } 50% { transform: rotate3d(1, 1, 0, 80deg); box-shadow: .05em -.05em .1em rgba(0,0,0,.15); } 60% { transform: rotate3d(1, 1, 0, 60deg); box-shadow: .05em -.05em .1em rgba(0,0,0,.15); } 70% { transform: rotate3d(1, 1, 0, 40deg); box-shadow: .05em -.05em .1em rgba(0,0,0,.15); } 90% { transform: rotate3d(1, 1, 0, 20deg); box-shadow: .05em -.05em .1em rgba(0,0,0,.15); } 100% { transform: rotate3d(1, 1, 0, 0deg); box-shadow: 0 0 0 0; } } .folding{ margin: 0 auto; position: relative; width: 200px; height: 80px; border-radius: 10px; color: #fff; line-height: 80px; text-align: center; background: linear-gradient(-135deg,transparent 1.5em, #58a 0); cursor: pointer; } .folding:hover:before{ transform: rotate3d(1, 1, 0, 0deg); animation: folding .5s ease; box-shadow: 0 0 0 0; border-bottom-left-radius: inherit; } .folding::before{ content: ""; position: absolute; top: 0; right: 0; background: linear-gradient(to left bottom, #58a 50%,transparent 50%) 100% 0 no-repeat; width: 2.12134em; height: 2.12134em; transform: rotate3d(1, 1, 0, 180deg); transform-origin: bottom right; border-top-right-radius: inherit; box-shadow: .05em -.05em .1em rgba(0,0,0,.15); }</style>
完整代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒子缺角效果</title> </head><body> <style> @keyframes folding { 0% { transform: rotate3d(1, 1, 0, 180deg); box-shadow: .05em -.05em .1em rgba(0,0,0,.15); } 10% { transform: rotate3d(1, 1, 0, 160deg); box-shadow: .05em -.05em .1em rgba(0,0,0,.15); } 20% { transform: rotate3d(1, 1, 0, 140deg); box-shadow: .05em -.05em .1em rgba(0,0,0,.15); } 30% { transform: rotate3d(1, 1, 0, 120deg); box-shadow: .05em -.05em .1em rgba(0,0,0,.15); } 40% { transform: rotate3d(1, 1, 0, 100deg); box-shadow: .05em -.05em .1em rgba(0,0,0,.15); } 50% { transform: rotate3d(1, 1, 0, 80deg); box-shadow: .05em -.05em .1em rgba(0,0,0,.15); } 60% { transform: rotate3d(1, 1, 0, 60deg); box-shadow: .05em -.05em .1em rgba(0,0,0,.15); } 70% { transform: rotate3d(1, 1, 0, 40deg); box-shadow: .05em -.05em .1em rgba(0,0,0,.15); } 90% { transform: rotate3d(1, 1, 0, 20deg); box-shadow: .05em -.05em .1em rgba(0,0,0,.15); } 100% { transform: rotate3d(1, 1, 0, 0deg); box-shadow: 0 0 0 0; } } .folding{ margin: 0 auto; position: relative; width: 200px; height: 80px; border-radius: 10px; color: #fff; line-height: 80px; text-align: center; background: linear-gradient(-135deg,transparent 1.5em, #58a 0); cursor: pointer; } .folding:hover:before{ transform: rotate3d(1, 1, 0, 0deg); animation: folding .5s ease; box-shadow: 0 0 0 0; border-bottom-left-radius: inherit; } .folding::before{ content: ""; position: absolute; top: 0; right: 0; background: linear-gradient(to left bottom, #58a 50%,transparent 50%) 100% 0 no-repeat; width: 2.12134em; height: 2.12134em; transform: rotate3d(1, 1, 0, 180deg); transform-origin: bottom right; border-top-right-radius: inherit; box-shadow: .05em -.05em .1em rgba(0,0,0,.15); }</style> <div class="folding">折叠动画</div></body></html>
关注我，带你每天了解一个 css3 炫酷小动画
