css3 实现盒子四周光晕_【css炫酷动画】css3完成盒子缺角动画

最新推荐文章于 2021-08-04 00:50:51 发布

weixin_42365804

最新推荐文章于 2021-08-04 00:50:51 发布

阅读量323

点赞数

文章标签： css3 实现盒子四周光晕

本文链接：https://blog.csdn.net/weixin_42365804/article/details/112436391

版权

点击上方蓝字关注我们

今天分享一个用 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 抖动文字动画

weixin_42365804

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3 实现盒子四周光晕_【css炫酷动画】css3完成盒子缺角动画

点击上方蓝字关注我们今天分享一个用 css3 来实现的盒子缺角动画，并且鼠标移动上去以后，缺角会自动折叠回去，形成一个完整的盒子。下面先来看一下成品图标签元素部分<body><divclass="folding">折叠动画div>body>具体样式<style> @keyframes folding { ...
复制链接

扫一扫