效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>super</title>
<script src="js/vivus.js"></script>动画插件
<style>
.super_logo {
position: absolute;
opacity: 0;
animation: fadeIn 4s infinite linear;
-webkit-animation: fadeIn 4s infinite linear;
}
#super {
position: absolute;
z-index: 1;
stroke-dasharray: 1000;
stroke-dashoffset: 1200;
animation: describe 10s infinite linear;
-webkit-animation: describe 10s infinite linear;
}
@keyframes fadeIn {
from {
opacity: 1;
}
80% {
opacity: 1;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 1;
}
80% {
opacity: 1;
}
to {
opacity: 1;
}
}
@keyframes describe {
from {
stroke-dashoffset: 1200;
opacity: 1;
}
to {
stroke-dashoffset: 0;
opacity: 0;
}
}
@-webkit-keyframes describe {
from {
stroke-dashoffset: 1200;
opacity: 1;
}
to {
stroke-dashoffset: 0;
opacity: 0;
}
}
</style>
</head>
<body style="background-color: #fff;">
<img src="img/hexagon.gif" alt="super" class="super_logo">//需要描边的动态图片
<svg id="super" x="0px" y="0px" width="1131px" height="732px" viewBox="0 0 1131 732">
<path fill="none" stroke-width="3" stroke="#FCC801" d="M569.54027,354.57735 L453.5,421.573231 L453.5,555.564993 L569.54027,622.560874 L685.580539,555.564993 L685.580539,421.573231 L569.54027,354.57735 Z" id="Polygon-2-Copy-10" stroke="#3871FF" transform="translate(569.540270, 488.569112) scale(-1, 1) rotate(-270.000000) translate(-569.540270, -488.569112) "></path>
<path fill="none" stroke-width="3" stroke="#FCC801" d="M135.54027,354.57735 L19.5,421.573231 L19.5,555.564993 L135.54027,622.560874 L251.580539,555.564993 L251.580539,421.573231 L135.54027,354.57735 Z" id="Polygon-2-Copy-14" stroke="#3871FF" transform="translate(135.540270, 488.569112) scale(-1, 1) rotate(-270.000000) translate(-135.540270, -488.569112) "></path>
<path fill="none" stroke-width="3" stroke="#FCC801" d="M136.396418,106.57735 L20.5,173.490179 L20.5,307.315835 L136.396418,374.228663 L252.292836,307.315835 L252.292836,173.490179 L136.396418,106.57735 Z" id="Polygon-2-Copy-11" stroke="#4771FF" transform="translate(136.396418, 240.403007) scale(-1, 1) rotate(-270.000000) translate(-136.396418, -240.403007) "></path>
<path fill="none" stroke-width="3" stroke="#FCC801" d="M568.16439,105.983365 L452.099458,172.993486 L452.099458,307.013726 L568.16439,374.023846 L684.229323,307.013726 L684.229323,172.993486 L568.16439,105.983365 Z" id="Polygon-2-Copy-7" stroke="#4771FF" transform="translate(568.164390, 240.003606) scale(-1, 1) rotate(-270.000000) translate(-568.164390, -240.003606) "></path>
<path fill="none" stroke-width="3" stroke="#FCC801" d="M352,-17.4227565 L235.5,49.788782 L235.5,184.211218 L352,251.422756 L468.5,184.211218 L468.5,49.788782 L352,-17.4227565 Z" id="Polygon-2-Copy-13" stroke="#3871FF" transform="translate(352.000000, 117.000000) scale(-1, 1) rotate(-270.000000) translate(-352.000000, -117.000000) "></path>
<path fill="none" stroke-width="3" stroke="#FCC801" d="M351.964306,480.783654 L235.995947,547.738017 L235.995947,681.646743 L351.964306,748.601107 L467.932665,681.646743 L467.932665,547.738017 L351.964306,480.783654 Z" id="Polygon-2-Copy-8" stroke="#3871FF" transform="translate(351.964306, 614.692380) scale(-1, 1) rotate(-270.000000) translate(-351.964306, -614.692380) "></path>
<path fill="none" stroke-width="3" stroke="#FCC801" d="M998.468359,104.57735 L882.5,171.531713 L882.5,305.44044 L998.468359,372.394803 L1114.43672,305.44044 L1114.43672,171.531713 L998.468359,104.57735 Z" id="Polygon-2-Copy-8" stroke="#3871FF" transform="translate(998.468359, 238.486077) scale(-1, 1) rotate(-270.000000) translate(-998.468359, -238.486077) "></path>
<path fill="none" stroke-width="3" stroke="#FCC801" d="M783.776597,228.904623 L667.70774,295.917009 L667.70774,429.941781 L783.776597,496.954167 L899.845455,429.941781 L899.845455,295.917009 L783.776597,228.904623 Z" id="Polygon-2-Copy-9" stroke="#4771FF" transform="translate(783.776597, 362.929395) scale(-1, 1) rotate(-270.000000) translate(-783.776597, -362.929395) "></path>
<path fill="none" stroke-width="3" stroke="#FCC801" d="M783.568857,-17.4226497 L667.5,49.5897363 L667.5,183.614508 L783.568857,250.626894 L899.637715,183.614508 L899.637715,49.5897363 L783.568857,-17.4226497 Z" id="Polygon-2-Copy-9" stroke="#4771FF" transform="translate(783.568857, 116.602122) scale(-1, 1) rotate(-270.000000) translate(-783.568857, -116.602122) "></path>
<path fill="none" stroke-width="3" stroke="
" d="M352.590909,232.577092 L236.5,299.482116 L236.5,433.290612 L352.590909,500.195635 L468.681818,433.290612 L468.681818,299.482116 L352.590909,232.577092 Z" id="Polygon-2-Copy-12" stroke="#4771FF" transform="translate(352.590909, 366.386364) scale(-1, 1) rotate(-270.000000) translate(-352.590909, -366.386364) "></path>
</svg>
</body>
</html>