CSS3 透明球体不规则肿胀动画

animation-fill-mode animation-fill-mode 属性是设置对象动画时间之外（动画开始前后）的状态。具体可参考： http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1351
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: black;
}
@-webkit-keyframes circle {
    0% {
        border-radius: 50% 50% 50% 50%;
        opacity: 1;
        transform: rotate(0deg);
    }
    10% {
        border-radius: 30% 50% 50% 45%;
        opacity: 0.9;
        transform: rotate(0deg);
    }
    20% {
        border-radius: 50% 50% 50% 50%;
        opacity: 0.8;
        transform: rotate(45deg);
    }
    30% {
        border-radius: 50% 40% 50% 50%;
        opacity: 0.2;
        transform: rotate(90deg);
    }
    40% {
        border-radius: 50% 50% 50% 50%;
        opacity: 0.5;
        transform: rotate(45deg);
    }
    50% {
        border-radius: 50% 40% 40% 50%;
        opacity: 0.8;
        transform: rotate(90deg);
    }
    60% {
        border-radius: 50% 50% 40% 50%;
        opacity: 1;
        transform: rotate(90deg);
    }
    70% {
        border-radius: 50% 50% 50% 40%;
        opacity: 0.7;
        transform: rotate(135deg);
    }
    80% {
        border-radius: 50% 50% 50% 50%;
        opacity: 0.9;
        transform: rotate(90deg);
    }
    90% {
        border-radius: 30% 50% 47% 50%;
        opacity: 0.9;
        transform: rotate(180deg);
    }
    100% {
        border-radius: 50% 50% 50% 50%;
        opacity: 1;
        transform: rotate(180deg);
    }
}
.container {
    position: relative;
    width: 500px;
    height: 500px;
    top: 50px;
    left: 200px;
}
.outer {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 2px solid rgba(235, 0, 0, 0.7);
    box-shadow: 0px 0px 60px rgba(235, 0, 0, 0.9), inset 0px 0px 280px rgba(235, 0, 0, 0.5);
    background: transparent;
    animation: circle 7s 0.6s 20 cubic-bezier(1, 0.015, 0.295, 1.225) alternate;
    -webkit-animation: circle 10s 1.3s 20 cubic-bezier(1, 0.015, 0.295, 1.225) alternate;
    -webkit-animation-fill-mode: forwards;
}
.outer1 {
    top: 10px;
    left: 10px;
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 2px solid rgba(235, 0, 0, 0.2);
    box-shadow: 0px 0px 160px rgba(235, 0, 0, 0.9), inset 0px 0px 80px rgba(235, 0, 0, 0.2);
    background: -webkit-radial-gradient(center, ellipse cover, #eb0000 0%, rgba(0, 0, 0, .5) 80%);
    animation: circle 10s 1.3s 20 cubic-bezier(1, 0.015, 0.295, 1.225) alternate;
    -webkit-animation: circle 5s 0.3s 20 cubic-bezier(1, 0.015, 0.295, 1.225) alternate;
    -webkit-animation-fill-mode: forwards;
}

HTML

animation-fill-mode animation-fill-mode 属性是设置对象动画时间之外（动画开始前后）的状态。具体可参考： http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp

编辑器支持Emmet

快捷键

animation-fill-mode animation-fill-mode 属性是设置对象动画时间之外（动画开始前后）的状态。具体可参考： http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp

HTML5 CSS3水晶球里面的圣诞节日动画

CSS3 带阴影效果的正方体齿轮动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：