SVG+CSS3 吸引用户注意力的五角星发光动画

Glowing Attention Star

css3, star, glow

《使用js把svg图形转成png图像》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.container {
    height: 100%;
    width: 100%;
    position: absolute;
}
#star {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
}
#star svg {
    width: 200px;
    -webkit-animation: tada 1.5s infinite ease;
    animation: tada 1.5s infinite;
}
#outer_glow {
    -webkit-animation: explodeem 1s infinite ease;
    animation: explodeem 1s infinite ease;
    -webkit-animation-fill-mode: forwards;
}
#inner_glow {
    -webkit-animation: explodeem 0.5s infinite ease;
    animation: explodeem 0.5s infinite ease;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    10%,
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes tada {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    10%,
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        -ms-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes explodeem {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes explodeem {
    /* Credentials */
    
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.me {
    position: absolute;
    color: #dadada;
    bottom: 10px;
    right: 10px;
    width: 100%;
    text-align: center;
    text-decoration: none;
    font-family: Helvetica, sans-serif;
}
.me:hover {
    color: skyblue;
}

HTML

</div>
</div>

<div class="me"><a href="https://twitter.com/quiz_master" class="me">Made by @Quiz_Master</div>

Glowing Attention Star

css3, star, glow

编辑器支持Emmet

快捷键

Glowing Attention Star

css3, star, glow

HTML5 CSS3 6个吸引用户注意力的按钮动画设计

使用SVG+CSS3实现带旋转星辰背景的动画图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：