css+svg实现操作成功失败动画图标效果代码-html代码-BFW代码库

css+svg实现操作成功失败动画图标效果代码

代码语言：html

所属分类：动画

代码描述：css+svg实现操作成功失败动画图标效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>
    <meta charset="UTF-8">
   <style>
 
.demo1 {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center
}

.ui-success,.ui-error {
    width: 100px;
    height: 100px;
    margin: 40px
}

.ui-success-circle {
    stroke-dasharray: 260.75219025px,260.75219025px;
    stroke-dashoffset: 260.75219025px;
    transform: rotate(220deg);
    transform-origin: center center;
    stroke-linecap: round;
    animation: ani-success-circle 1s ease-in both
}

.ui-success-path {
    stroke-dasharray: 60px 64px;
    stroke-dashoffset: 62px;
    stroke-linecap: round;
    animation: ani-success-path .4s 1s ease-in both
}

@keyframes ani-success-circle {
    to {
        stroke-dashoffset: 782.25657074px
    }
}

@keyframes ani-success-path {
    0% {
        stroke-dashoffset: 62px
    }

    65% {
        stroke-dashoffset: -5px
    }

    84% {
        stroke-dashoffset: 4px
    }

    100% {
        stroke-dashoffset: -2px
    }
}

.ui-error-circle {
    stroke-dasharray: 260.75219025px,260.75219025px;
    stroke-dashoffset: 260.75219025px;
    animation: ani-error-circle 1.2s linear
}

.ui-error-line1 {
    stroke-dasharray: 54px 55px;
    stroke-dashoffset: 55px;
    stroke-linecap: round;
    animation: ani-error-line .15s 1.2s linear both
}

.ui-error-line2 {
    stroke-dasharray: 54px 55px;
    stroke-dashoffset: 55px;
    stroke-linecap: round;
    animation: ani-error-line .2s .9s linear both
}

@keyframes ani-error-line {
    to {
        stroke-dashoffset: 0
    }
}

@keyframes ani-error-circle {
    0% {
        stroke-dasharray: 0,260.75219025px;
        stroke-dashoffset: 0
    }

    35% {
        stroke-dasharray: 120px,120px;
        stroke-dashoffset: -120px
    }

    70% {
        stroke-dasharray: 0,260.75219025px;
        stroke-dashoffset: -260.75219025px
    }

    100% {
        stroke-dasharray: 260.75219025px,0;
        stroke-dashoffset: -260.75219025px
    }
}


   </style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="demo1">
        <div class="ui-success"><svg viewBox="0 0 87 87" version="1.1" xmlns=&quo.........完整代码请登录后点击上方下载按钮下载查看