TweenMax+svg cpu过热警报动画效果代码-html代码-BFW代码库

TweenMax+svg cpu过热警报动画效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax+svg cpu过热警报动画效果代码

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

<html>
<head>
    <meta charset="UTF-8"><style>
        body {
            background-color: #f63;
            overflow: hidden;
            text-align: center;
        }
        body,
        html {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        svg {
            width: 100%;
            height: 100%;
            visibility: hidden;
            /*  max-width:800px;
  max-height:600px; */
        }
    </style>
</head>
<body>

    <svg viewBox="0 0 800 600" xmlns="https://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
        <rect x="207" y="110" width="380" height="380" rx="70" ry="70" fill="#16212f" stroke="#232C38" stroke-width="20" />

        <line id="exclamationLine" x1="399" y1="265" x2="399" y2="317" fill="none" stroke="#ededed" stroke-linecap="round" stroke-miterlimit="10" stroke-width="22" />
        <circle id="exclamationDot" cx="399.29" cy="349.01" r="11.5" fill="#ededed" />
        <g id="cpuGroup" stroke-linejoin="round" stroke="#f63" stroke-linecap="round" stroke-miterlimit="10" stroke-width="20" fill="none">
            <path d="M342.94,377a40.07,40.07,0,1,1,0-74.66" />
            <path d="M378,342.7h19.33c14.1,0,25.63-9.71,25.63-21.58h0c0-11.87-11.53-21.58-25.63-21.58H378v80.16" />
            <path d="M511.72,299.55v53.7a26.54,26.54,0,0,1-26.46,26.46h0a26.54,26.54,0,0,1-26.46-26.46v-53.7" />
        </g>
        <path id="outline" d="M400,381.54h70.4a20.57,20.57,0,0,0,17.82-30.86l-70.4-121.93a20.57,20.57,0,0,0-35.64,0l-70.4,121.93a20.57,20.57,0,0,0,17.82,30.86H400" fill="none" stroke="#f63" stroke-linecap="round" stroke-miterlimit="10" stroke-width="22" />
        <g id="heatlineGroup" fill="none" stroke="#f63" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="16">
            <path d="M471.66,251l13.56-15.06a12.16,12.16,0,0,0,0-16.27L479,212.74a12.16,12.16,0,0,1,0-16.27l6.23-6.93a12.16,12.16,0,0,0,0-16.27L471.66,158.2" />
            <path d="M391.66,251l13.58-15.09a12.12,12.12,0,0,0,0-16.22l-6.28-7a12.12,12.12,0,0,1,0-16.22l6.28-7a12.12,12.12,0,0,0,0-16.22L391.66,158.2" />
            <path d="M311.66,251l13.6-15.11a12.09,12.09,0,0,0,0-16.18l-6.32-7a12.09,12.09,0,0,1,0-16.18l6.32-7a12.09,12.09,0,0,0,0-16.18l-13.6-15.11" />
        </g>
    </svg>



    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/DrawSVGPlugin.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/AnticipateEase.min.js"></script>
    <s.........完整代码请登录后点击上方下载按钮下载查看