疫情期间待在家里最安全svg动画效果-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：疫情期间待在家里最安全svg动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<style>
.page-content {
    position: relative;
    background: #fafafa;
     width: 100%;
  padding:15px 0px;
}

svg
{
  padding:10px;
  background-color:white;
      box-shadow: 0 0 25px rgba(40,47,60,.05), 0 20px 25px rgba(40,47,60,.05), 0 3px 4px rgba(40,47,60,.05);
  border-radius:5px;
}

.container{width:80%;}



#l5
{
    cursor: pointer;
    animation: swing ease-in-out 1.5s infinite alternate;
    transform-origin: bottom;
    transform-box: fill-box;
}

#leaf2
{
  cursor: pointer;
    animation: swing ease-in-out 1.7s infinite alternate;
    transform-origin: bottom;
    transform-box: fill-box;
}

#l3
{
  cursor: pointer;
    animation: swingreverse ease-in-out 1.7s infinite alternate;
    transform-origin: bottom;
    transform-box: fill-box;
}

#l4
{
  cursor: pointer;
    animation: swingreverse ease-in-out 1.6s infinite alternate;
    transform-origin: bottom;
    transform-box: fill-box;
}

#leaf1
{
  cursor: pointer;
    animation: swingreverse ease-in-out 1.9s infinite alternate;
    transform-origin: bottom;
    transform-box: fill-box;
}

#l1
{
  cursor: pointer;
    animation: swingreverse ease-in-out 1.5s infinite alternate;
    transform-origin: bottom;
    transform-box: fill-box;
}

#facemain
{
    cursor: pointer;
    animation: girlface ease-in-out 1.8s infinite alternate;
    transform-origin: bottom;
    transform-box: fill-box;
}


#book
{
  cursor: pointer;
    animation: book ease-in-out 2.5s infinite alternate;
    transform-origin: bottom;
    transform-box: fill-box;
}


#dogt
{
  cursor: pointer;
    animation: swingreverse ease-in-out 0.9s infinite alternate;
    transform-origin: bottom;
    transform-box: fill-box;
}

#oldhand
{
    cursor: pointer;
    animation: oldhand ease-in-out 1.5s infinite alternate;
    transform-origin: 34px bottom;
    transform-box: fill-box;
}

#oldface12
{
  cursor: pointer;
    animation: oldhand ease-in-out 1.3s infinite alternate;
    transform-origin: bottom;
    transform-box: fill-box;
}


@keyframes girlface
{
  0% {transform: rotate(2deg);}
  100% { transform: rotate(-3deg); }
}

@keyframes oldhand {
    0% { transform: rotate(5deg); }
    100% { transform: rotate(-5deg); }
}

@keyframes swing {
    0% { transform: rotate(5deg); }
    100% { transform: rotate(-5deg); }
}


@keyframes swingreverse {
    0% { transform: rotate(-6deg); }
    100% { transform: rotate(6deg); }
}


@keyframes book {
    0% { transform: rotate(-4deg); }
    100% { transform: rotate(4deg); }
}


svg #Home {
  stroke:#37233c;
  stroke-width:1px;
  fill:#fd1b0b;
}


#Vector_62, #Vector_61, #Vector_60, #Vector_59, #Vector_63, #Vector_64{
  transform-box:fill-box;
  transform-origin:center;
}
</style>

</head>
<body translate="no">
<div class="page-content">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12">
<svg width="100%" viewBox="0 0 752 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group">
<g id="BACKGROUND">
<path id="Vector" d="M750 0H0V500H750V0Z" fill="#FFDCD6" />
</g>
<g id="OBJECTS">
<g id="Vector_2" style="mix-blend-mode:multiply" opacity="0.5">
<path d="M751.137 384.34H1.13672V500H751.137V384.34Z" fill="#FFDCD6" />
</g>
<g id="Vector_3" style="mix-blend-mode:multiply">
<path d="M697.604 412.671C697.604 413.686 673.49 414.509 643.744 414.509C613.999 414.509 589.885 413.686 589.885 412.671C589.885 411.655 613.999 410.833 643.744 410.833C673.49 410.833 697.604 411.656 697.604 412.671Z" fill="#FFDCD6" />
</g>
<g id="Vector_4" style="mix-blend-mode:multiply">
<path d="M129.904 407.833C159.187 407.833 182.925 405.768 182.925 403.222C182.925 400.675 159.187 398.611 129.904 398.611C100.621 398.611 76.8824 400.675 76.8824 403.222C76.8824 405.768 100.621 407.833 129.904 407.833Z" fill="#FFDCD6" />
</g>
<g id="Vector_5" style="mix-blend-mode:multiply">
<path d="M523.558 398.921C523.558 400.981 458.574 402.651 378.413 402.651C298.251 402.651 233.267 400.981 233.267 398.921C233.267 396.862 298.251 395.192 378.413 395.192C458.574 395.192 523.558 396.861 523.558 398.921Z" fill="#FFDCD6" />
</g>
<path id="Vector_6" d="M537.331 285.49H214.942V329.276H537.331V285.49Z" fill="#222256" />
<path id="Vector_7" d="M234.141 199.685H524.842C532.93 199.685 540.688 202.898 546.407 208.617C552.127 214.337 555.34 222.094 555.34 230.183V304.205H203.642V230.183C203.642 222.094 206.856 214.337 212.575 208.617C218.295 202.898 226.052 199.685 234.141 199.685Z" fill="#3847DC" />
<g id="Vector_8" style="mix-blend-mode:multiply">
<path d="M242.157 304.208H191.265L184.512 269.071C184.323 268.088 184.329 267.078 184.531 266.098C184.732 265.118 185.125 264.187 185.686 263.359C186.247 262.53 186.966 261.821 187.802 261.27C188.637 260.72 189.573 260.34 190.556 260.151L224.667 253.591C225.649 253.402 226.659 253.409 227.638 253.611C228.618 253.812 229.548 254.205 230.375 254.766C231.203 255.327 231.912 256.046 232.461 256.882C233.011 257.717 233.391 258.652 233.579 259.634L242.157 304.208Z" fill="#3847DC" />
</g>
<g id="Vector_9" style="mix-blend-mode:multiply">
<path d="M576.003 269.071L569.242 304.208H518.358L526.928 259.634C527.311 257.651 528.465 255.9 530.137 254.767C531.81 253.634 533.863 253.211 535.847 253.591L569.959 260.151C571.943 260.533 573.694 261.688 574.827 263.36C575.96 265.033 576.383 267.087 576.003 269.071Z" fill="#3847DC" />
</g>
<path id="Vector_10" d="M575.793 260.15L541.684 253.591C540.701 253.402 539.692 253.409 538.712 253.61C537.732 253.812 536.801 254.204 535.973 254.765C535.145 255.326 534.436 256.045 533.885 256.88C533.335 257.715 532.954 258.651 532.766 259.633L522.855 311.174C521.989 315.674 519.583 319.733 516.05 322.651C512.517 325.57 508.077 327.166 503.494 327.166H257.019C252.436 327.166 247.996 325.57 244.463 322.651C240.93 319.733 238.524 315.674 237.658 311.174L227.748 259.633C227.366 257.649 226.212 255.898 224.54 254.765C222.867 253.632 220.813 253.21 218.829 253.591L184.721 260.15C183.738 260.339 182.803 260.719 181.968 261.27C181.132 261.82 180.414 262.53 179.853 263.358C179.292 264.186 178.899 265.116 178.698 266.096C178.496 267.076 178.49 268.086 178.679 269.068L194.96 353.742C195.176 354.864 195.641 355.923 196.322 356.84C197.004 357.758 197.883 358.51 198.895 359.04C200.894 360.726 203.426 361.649 206.04 361.646H553.507C555.73 361.649 557.903 360.983 559.741 359.734C561.188 359.409 562.509 358.669 563.541 357.605C564.573 356.54 565.272 355.198 565.553 353.742L581.834 269.068C582.023 268.086 582.017 267.076 581.815 266.096C581.614 265.116 581.221 264.186 580.66 263.358C580.099 262.53 579.381 261.82 578.546 261.27C577.71 260.719 576.775 260.339 575.793 260.15Z" fill="#3847DC" />
<path id="Vector_11" d="M533.11 370.42H223.716C222.564 370.42 221.423 370.193 220.358 369.752C219.294 369.311 218.327 368.665 217.512 367.85C216.697 367.036 216.051 366.068 215.61 365.004C215.169 363.939 214.942 362.798 214.942 361.646H541.884C541.884 363.973 540.959 366.205 539.314 367.85C537.668 369.496 535.437 370.42 533.11 370.42Z" fill="#00000C" />
<path id="Vector_12" d="M227.032 401.611H221.981L227.816 370.42H236.201L227.032 401.611Z" fill="#00000C" />
<path id="Vector_13" d="M527.111 401.611H532.161L526.326 370.42H517.941L527.111 401.611Z" fill="#00000C" />
<g id="Vector_14" style="mix-blend-mode:multiply">
<path d="M205.016 70.7992H87.4005V188.415H205.016V70.7992Z" stroke="#FFDCD6" stroke-width="2" stroke-miterlimit="10" />
</g>
<g id="Vector_15" style="mix-blend-mode:multiply">
<path d="M192.153 83.6621H100.263V175.552H192.153V83.6621Z" fill="#FFDCD6" />
</g>
<path id="Vector_16" d="M130.318 317.237C131.892 288.921 132.557 260.575 132.312 232.197C132.063 203.921 130.905 175.673 128.839 147.452C127.677 131.584 126.228 115.74 124.491 99.9205C124.283 98.022 121.281 98.0008 121.491 99.9205C124.581 128.111 126.764 156.382 128.039 184.731C129.306 212.98 129.663 241.25 129.113 269.541C128.802 285.449 128.204 301.348 127.318 317.237C127.211 319.166 130.211 319.16 130.318 317.237Z" fill="#FD8970" />
<g id="l1">
<path id="Vector_17" d="M128.375 161.956C127.636 154.819 121.268 149.514 117.085 143.685C108.46 131.664 107.204 115.914 107.822 101.132C108.441 86.3499 110.611 71.3826 107.689 56.8789C123.753 69.2452 134.817 86.9915 138.85 106.859C142.766 126.54 138.575 147.605 128.504 164.961" fill="url(#paint0_linear)" />
<path id="Vector_18" d="M128.375 161.956C128.036 159.679 127.226 157.498 125.997 155.551C124.777 153.609 123.403 151.767 121.888 150.045C120.402 148.292 118.853 146.583 117.427 144.751C116.699 143.845 116.073 142.864 115.404 141.912C114.776 140.935 114.182 139.932 113.616 138.916C111.446 134.792 109.843 130.393 108.848 125.84C107.858 121.3 107.255 116.684 107.045 112.042C106.545 102.761 107.437 93.5258 107.93 84.3606C108.173 79.7744 108.323 75.1924 108.2 70.6272C108.084 66.0762 107.591 61.5426 106.725 57.0732L106.214 54.5269L108.286 56.0975C124.534 68.6254 135.676 86.6312 139.638 106.762C141.465 116.748 141.386 126.99 139.405 136.946C137.432 146.849 133.743 156.33 128.504 164.961C133.363 156.183 136.712 146.651 138.41 136.763C140.174 126.933 140.063 116.859 138.082 107.071C134 87.4221 123.004 69.89 107.092 57.6605L108.653 56.6849C109.512 61.2684 109.989 65.9154 110.079 70.5779C110.175 75.223 109.993 79.8538 109.72 84.4628C109.17 93.678 108.254 102.832 108.528 111.981C108.648 116.549 109.155 121.098 110.043 125.581C110.943 130.055 112.423 134.392 114.446 138.482C114.969 139.492 115.52 140.492 116.105 141.469C116.732 142.421 117.315 143.404 118.003 144.316C119.351 146.162 120.844 147.917 122.28 149.723C123.756 151.505 125.083 153.407 126.246 155.408C127.402 157.419 128.127 159.649 128.375 161.956V161.956Z" fill="#FD8970" />
<g id="Group_2" style="mix-blend-mode:multiply">
<g id="Vector_19" style="mix-blend-mode:multiply">
<path d="M116.54 75.8999C119.063 80.7955 121.269 85.8477 123.146 91.0253C124.11 93.6151 124.872 96.2768 125.63 98.9369C126.342 101.611 126.93 104.316 127.467 107.032C128.465 112.476 129.026 117.992 129.142 123.526C129.288 129.045 128.894 134.566 127.965 140.009C127.665 134.507 127.364 129.072 126.805 123.667C126.511 120.967 126.231 118.27 125.82 115.592C125.467 112.906 125.015 110.236 124.518 107.575C123.559 102.246 122.319 96.9742 120.921 91.7245C119.504 86.4766 117.885 81.244 116.54 75.8999Z" fill="#FD8970" />
</g>
</g>
</g>
<g id="l5">
<path id="Vector_20" d="M131.615 236.347C131.782 211.308 138.965 186.817 152.349 165.654C153.124 164.426 151.177 163.296 150.406 164.518C139.876 181.257 133.09 200.075 130.512 219.681C129.787 225.207 129.403 230.773 129.365 236.347C129.375 236.638 129.498 236.915 129.708 237.117C129.918 237.32 130.198 237.433 130.49 237.433C130.782 237.433 131.062 237.32 131.272 237.117C131.482 236.915 131.605 236.638 131.615 236.347V236.347Z" fill="#FD8970" />
<path id="Vector_21" d="M138.309 191.498C134.502 178.052 142.797 162.565 150.426 150.863C158.055 139.16 167.09 128.153 172.115 115.118C174.887 126.905 175.224 139.133 173.108 151.055C170.991 162.977 166.465 174.341 159.806 184.454C157.348 188.14 154.45 191.772 150.426 193.628C146.402 195.483 141.003 195.016 138.309 191.498Z" fill="url(#paint1_linear)" />
<path id="Vector_22" d="M139.033 191.299C135.408 176.735 143.825 162.264 151.554 150.512C159.115 139.015 167.678 128.197 172.838 115.318H171.392C174.916 130.498 174.399 146.337 169.891 161.254C167.687 168.553 164.527 175.528 160.494 181.998C156.344 188.638 146.849 199.697 138.84 190.968C138.186 190.255 137.127 191.318 137.779 192.028C142.006 196.635 148.659 196.163 153.48 192.677C160.525 187.582 164.988 178.03 168.242 170.257C175.52 152.744 177.127 133.392 172.838 114.919C172.656 114.128 171.643 114.291 171.392 114.919C165.476 129.685 154.939 141.713 146.807 155.217C140.285 166.046 134.385 178.833 137.586 191.697C137.644 191.883 137.772 192.039 137.943 192.132C138.114 192.225 138.314 192.248 138.502 192.196C138.689.........完整代码请登录后点击上方下载按钮下载查看