灯泡闪亮动画效果-html代码-BFW代码库

灯泡闪亮动画效果

代码语言：html

所属分类：动画

代码描述：灯泡闪亮动画效果

代码标签：效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
svg {
  width: 100vw;
  height: 100vh;
}

#bulb {
  fill-opacity: 0;
}

#lights path {
  fill-opacity: 0;
  stroke: #ffd15c;
  stroke-width: 4;
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
}
</style>

</head>
<body translate="no">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_1" x="0" y="0" viewBox="0 0 512 512" xml:space="preserve">
<path id="bulb" d="M314.667 391.467c6.4-21.333 19.2-40.533 36.267-55.467 32-26.667 52.267-67.2 52.267-112 0-83.2-69.333-151.467-154.667-147.2C172.8 80 110.933 144 108.8 219.733 107.733 266.667 128 308.267 161.067 336 179.2 350.933 192 370.133 198.4 391.467h116.267z" fill="#ffd15c" stroke="#ffd15c" />
<path id="thing" d="M242.133 393.6h9.6l-42.667-158.933h3.2c5.333 0 10.667-2.133 14.933-6.4 2.133-2.133 4.267-3.2 7.467-3.2 3.2 0 5.333 1.067 7.467 3.2 7.467 8.533 20.267 8.533 27.733 0 2.133-2.133 4.267-3.2 7.467-3.2 2.133 0 5.333 1.067 7.467 3.2 4.267 4.267 8.533 6.4 14.933 6.4h3.2l-41.6 158.933h9.6l43.733-166.4c0-2.133 0-4.267-2.133-5.333-2.133-1.067-4.267 0-5.333 1.067-2.133 2.133-4.267 3.2-6.4 3.2-3.2 0-5.333-1.067-8.533-3.2-4.267-4.267-8.533-6.4-13.867-6.4s-9.6 2.133-13.867 6.4-10.667 4.267-14.933 0c-3.2-4.267-8.533-6.4-13.867-6.4-5.333 0-10.667 2.133-13.867 6.4-2.133 2.133-5.333 3.2-8.533 3.2-2.133 0-5.333-1.067-6.4-3.2-1.067-1.067-3.2-2.133-5.333-1.067-2.133 1.067-3.2 3.2-2.133 5.333l42.666 166.4z" fill="#ccc" />
<g fill="#344a5e">
<path d="M222.933 489.6C228.267 502.4 241.067 512 256 512s27.733-9.6 33.067-22.4h-66.134z" />
<path d="M295.467 490.667H217.6a19.12 19.12 0 01-19.2-19.2V390.4h116.267v81.067c0 10.666-8.534 19.2-19.2 19.2z" />
</g>
<g fill="#415a6b">
<path d="M313.6 430.933H198.4c-6.4 0-11.733-5.333-11.733-11.733S192 407.467 198.4 407.467h115.2c6.4 0 11.733 5.333 11.733 11.733S320 430.933 313.6 430.933z" />
<path d="M313.6 468.267H198.4c-6.4 0-11.733-5.333-11.733-11.733S192 444.801 198.4 444.801h115.2c6.4 0 11.733 5.333 11.733 11.733 0 6.399-5.333 11.733-11.733 11.733z" />
</g>
<g id="lights" fill="#ffd15c">
<path d="M256 0c-5.333 0-10.667 4.267-10.667 10.667v36.267c0 5.333 4.267 10.667 10.667 10.667 6.4 0 10.667-4.267 10.667-10.667V10.667C266.667 4.26.........完整代码请登录后点击上方下载按钮下载查看