![b18a3c691fa54d4668d6715cf94ea0d5.png](https://i-blog.csdnimg.cn/blog_migrate/d2b354bf659c928877e6cdfd1d8ba2ac.png)
点击上方 蓝字 关注我们
![b09a7669a3e8a0b9f809e37e7da456fb.png](https://i-blog.csdnimg.cn/blog_migrate/4b9f1c789dc662cfc28ed9740876a090.png)
![a48b668a92121275e19bf99a9c3499ab.png](https://i-blog.csdnimg.cn/blog_migrate/73f91c5be1127cd201887573a3d299f8.png)
今天分享一个用 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>
完整代码
<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 炫酷小动画
往期动画文章:
【每日一更】css3炫酷文字入场动画
【每日一更】css3发光盒子动画
【每日一更】css3 抖动文字动画