镂空背景动图 Logo
查看效果
第一步：绘制 Logo 图形
<svg viewBox="0 400 1079 1024" width="420" height="400">
<path d="M89.577 734.832l-28.38-7.474c12.847-32.35 11.329-107.913 5.256-148.672l70.423 26.861s-18.57 31.767-27.912 55.942c-10.511 26.978-17.986 71.591-19.387 73.343zM152.876 611.854l-16 53.723 105.46 10.394-50.686 71.591 45.43 7.474 52.905-108.029s-33.401-4.087-69.372-13.197c-35.854-9.343-67.737-21.956-67.737-21.956z" fill="#1296DB" p-id="2329"></path>
<path d="M129.051 700.613l58.861 5.956s-26.627 44 -52 95c-25.226 51.153-39.824 89.693-39.824 89.693l124.496-55.124-16.234 63.416s-13.547 1.168-73.11 12.847c-53.955 10.51-78.948 19.27-78.948 19.27l76.613-231.942zM312.876 651.679l-70.54 247.941s13.78-2.92 42.744-5.956c22.89-2.336 35.154-1.985 35.154-1.985l6.773-176.7 40.292 10.043 15.65 165.372s9.226-1.05 31.883-1.635c22.657-0.467 32.934 0.584 32.934 0.584v-60.146l-42.51 18.92 19.386-178.57s-22.073-1.05-56.642-5.605c-23.007-2.92-55.124-12.263-55.124-12.263zM503.942 667.912s9.343 0.234 40.642 0c19.737-0.116 46.248-2.219 46.248-2.219l-69.606 227.154s-4.087-1.285-17.284-1.869c-13.431-0.584-16.468-0.467-16.468-0.467l16.468-222.599zM600.526 763.212l-14.482 48.817v96.467s19.387-1.635 35.97-1.751c19.971-0.117 35.971 1.401 35.971 1.401l-57.46-144.934zM684.73 655.066s29.898-2.92 57.577-8.643c33.518-6.89 63.883-16.584 63.883-16.584l-3.037 28.38-122.277 72.058 3.854-75.211zM861.781 620.847s26.511-3.738 63.533-13.08c38.423-9.694 63.533-17.519 63.533-17.519s-2.92 9.226-2.92 38.424c0 23.941 0.7 37.021 0.7 37.021l-63.532-8.175-65.752-8.409 4.438-28.262zM806.307 684.964v40.992l-117.49 132.088-7.941-76.964zM857.226 673.285l135.358 53.022s-0.35 19.854 8.993 64.934 25.343 89.81 25.343 89.81L854.657 712.76l2.57-39.474zM867.62 780.146l-59.795 5.372-82.57 122.978s70.424 1.752 119.008 6.073c48.467 4.322 130.452 16 130.452 16L867.62 780.146z m40.059 106.861s-27.329-2.219-57.694-2.219-54.19 2.22-54.19 2.22l43.563-76.964 68.32 76.963zM831.182 737.518l-20.671 30.716 45.898-5.022z" fill="#1296DB" p-id="2330"></path>
</svg>
第二步：定义剪切
<svg viewBox="0 400 1079 1024" width="420" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="cut-off-jirengu">
<path d="M89.577 734.832l-28.38-7.474c12.847-32.35 11.329-107.913 5.256-148.672l70.423 26.861s-18.57 31.767-27.912 55.942c-10.511 26.978-17.986 71.591-19.387 73.343zM152.876 611.854l-16 53.723 105.46 10.394-50.686 71.591 45.43 7.474 52.905-108.029s-33.401-4.087-69.372-13.197c-35.854-9.343-67.737-21.956-67.737-21.956z" fill="#1296DB" p-id="2329"></path>
<path d="M129.051 700.613l58.861 5.956s-26.627 44.847-51.854 95.884c-25.226 51.153-39.824 89.693-39.824 89.693l124.496-55.124-16.234 63.416s-13.547 1.168-73.11 12.847c-53.955 10.51-78.948 19.27-78.948 19.27l76.613-231.942zM312.876 651.679l-70.54 247.941s13.78-2.92 42.744-5.956c22.89-2.336 35.154-1.985 35.154-1.985l6.773-176.7 40.292 10.043 15.65 165.372s9.226-1.05 31.883-1.635c22.657-0.467 32.934 0.584 32.934 0.584v-60.146l-42.51 18.92 19.386-178.57s-22.073-1.05-56.642-5.605c-23.007-2.92-55.124-12.263-55.124-12.263zM503.942 667.912s9.343 0.234 40.642 0c19.737-0.116 46.248-2.219 46.248-2.219l-69.606 227.154s-4.087-1.285-17.284-1.869c-13.431-0.584-16.468-0.467-16.468-0.467l16.468-222.599zM600.526 763.212l-14.482 48.817v96.467s19.387-1.635 35.97-1.751c19.971-0.117 35.971 1.401 35.971 1.401l-57.46-144.934zM684.73 655.066s29.898-2.92 57.577-8.643c33.518-6.89 63.883-16.584 63.883-16.584l-3.037 28.38-122.277 72.058 3.854-75.211zM861.781 620.847s26.511-3.738 63.533-13.08c38.423-9.694 63.533-17.519 63.533-17.519s-2.92 9.226-2.92 38.424c0 23.941 0.7 37.021 0.7 37.021l-63.532-8.175-65.752-8.409 4.438-28.262zM806.307 684.964v40.992l-117.49 132.088-7.941-76.964zM857.226 673.285l135.358 53.022s-0.35 19.854 8.993 64.934 25.343 89.81 25.343 89.81L854.657 712.76l2.57-39.474zM867.62 780.146l-59.795 5.372-82.57 122.978s70.424 1.752 119.008 6.073c48.467 4.322 130.452 16 130.452 16L867.62 780.146z m40.059 106.861s-27.329-2.219-57.694-2.219-54.19 2.22-54.19 2.22l43.563-76.964 68.32 76.963zM831.182 737.518l-20.671 30.716 45.898-5.022z" fill="#1296DB" p-id="2330"></path>
</clipPath>
</defs>
</svg>
第三步： 加载图片，剪切图片
<svg viewBox="0 400 1079 1024" width="420" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="cut-off-jirengu">
<path d="M89.577 734.832l-28.38-7.474c12.847-32.35 11.329-107.913 5.256-148.672l70.423 26.861s-18.57 31.767-27.912 55.942c-10.511 26.978-17.986 71.591-19.387 73.343zM152.876 611.854l-16 53.723 105.46 10.394-50.686 71.591 45.43 7.474 52.905-108.029s-33.401-4.087-69.372-13.197c-35.854-9.343-67.737-21.956-67.737-21.956z" fill="#1296DB" p-id="2329"></path>
<path d="M129.051 700.613l58.861 5.956s-26.627 44.847-51.854 95.884c-25.226 51.153-39.824 89.693-39.824 89.693l124.496-55.124-16.234 63.416s-13.547 1.168-73.11 12.847c-53.955 10.51-78.948 19.27-78.948 19.27l76.613-231.942zM312.876 651.679l-70.54 247.941s13.78-2.92 42.744-5.956c22.89-2.336 35.154-1.985 35.154-1.985l6.773-176.7 40.292 10.043 15.65 165.372s9.226-1.05 31.883-1.635c22.657-0.467 32.934 0.584 32.934 0.584v-60.146l-42.51 18.92 19.386-178.57s-22.073-1.05-56.642-5.605c-23.007-2.92-55.124-12.263-55.124-12.263zM503.942 667.912s9.343 0.234 40.642 0c19.737-0.116 46.248-2.219 46.248-2.219l-69.606 227.154s-4.087-1.285-17.284-1.869c-13.431-0.584-16.468-0.467-16.468-0.467l16.468-222.599zM600.526 763.212l-14.482 48.817v96.467s19.387-1.635 35.97-1.751c19.971-0.117 35.971 1.401 35.971 1.401l-57.46-144.934zM684.73 655.066s29.898-2.92 57.577-8.643c33.518-6.89 63.883-16.584 63.883-16.584l-3.037 28.38-122.277 72.058 3.854-75.211zM861.781 620.847s26.511-3.738 63.533-13.08c38.423-9.694 63.533-17.519 63.533-17.519s-2.92 9.226-2.92 38.424c0 23.941 0.7 37.021 0.7 37.021l-63.532-8.175-65.752-8.409 4.438-28.262zM806.307 684.964v40.992l-117.49 132.088-7.941-76.964zM857.226 673.285l135.358 53.022s-0.35 19.854 8.993 64.934 25.343 89.81 25.343 89.81L854.657 712.76l2.57-39.474zM867.62 780.146l-59.795 5.372-82.57 122.978s70.424 1.752 119.008 6.073c48.467 4.322 130.452 16 130.452 16L867.62 780.146z m40.059 106.861s-27.329-2.219-57.694-2.219-54.19 2.22-54.19 2.22l43.563-76.964 68.32 76.963zM831.182 737.518l-20.671 30.716 45.898-5.022z" fill="#1296DB" p-id="2330"></path>
</clipPath>
</defs>
<image id="image" x="0" y="0" width="1480" height="1024" xlink:href="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" clip-path="url(#cut-off-jirengu)" />
<style>
#image {
animation: 3s move linear infinite alternate-reverse;
}
@keyframes move {
0% {
x: 0;
}
100% {
x: -300px;
}
}
</style>
</svg>