纳马斯特中性设计动画效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：纳马斯特中性设计动画效果，采用svg布局实现

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


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

<style>
body
{
background: #1c1f2f;
}

.morelink
{
      clip-path: polygon(0 45%, 0% 100%, 50% 100%);
    height: 200px;
    width: 200px;
    background-color: yellow;
    position: absolute;
    bottom: 0;
    border: 3px solid #1c1f2f;
}



/***********normal-**********/
/** SWITCHING SECTIONS BUTTONS		
**************************************/
.switch-button-1,
.switch-button-2,
.switch-button-3 {
  position: relative;
  width: 250px;
  height: 250px;
  line-height: 50px;
  margin: 0 auto;
  cursor: pointer;
  transition: 0.5s; }
  .switch-button-1 .vcenter,
  .switch-button-2 .vcenter,
  .switch-button-3 .vcenter {
    transform: rotate(-45deg); }
  .switch-button-1 i,
  .switch-button-2 i,
  .switch-button-3 i {
    position: relative;
    transition: 0.2s;
    top: 0; }
  .switch-button-1:hover i,
  .switch-button-2:hover i,
  .switch-button-3:hover i {
    animation: down 1s linear infinite; }
@keyframes down {
  50% {
    top: 10px; }
  100% {
    top: 0; } }
  .switch-button-1 .layer1,
  .switch-button-1 .layer2,
  .switch-button-1 .layer3,
  .switch-button-1 .layer4,
  .switch-button-2 .layer1,
  .switch-button-2 .layer2,
  .switch-button-2 .layer3,
  .switch-button-2 .layer4,
  .switch-button-3 .layer1,
  .switch-button-3 .layer2,
  .switch-button-3 .layer3,
  .switch-button-3 .layer4 {
    margin: 0 auto;
    line-height: 50px;
    position: absolute;
    content: ''; }
  .switch-button-1 .layer1,
  .switch-button-2 .layer1,
  .switch-button-3 .layer1 {
    top: 0px;
    left: 0px;
    right: auto;
    width: 250px;
    height: 1px;
    z-index: -1;
    animation: impuls1 2s linear infinite; }
@keyframes impuls1 {
  0% {
    width: 0px;
    height: 1px; }
  10% {
    width: 250px;
    left: 0;
    right: auto; }
  10.9% {
    width: 250px;
    right: 0;
    left: auto; }
  20% {
    width: 0px; }
  100% {
    width: 0px;
    right: 0;
    left: auto; } }
  .switch-button-1 .layer2,
  .switch-button-2 .layer2,
  .switch-button-3 .layer2 {
    top: 0px;
    left: 0px;
    right: auto;
    width: 1px;
    height: 250px;
    z-index: -1;
    animation: impuls2 2s linear infinite; }
@keyframes impuls2 {
  0% {
    height: 0px;
    width: 1px; }
  10% {
    height: 250px;
    top: 0;
    bottom: auto; }
  10.9% {
    height: 250px;
    bottom: 0;
    top: auto; }
  20% {
    height: 0px; }
  100% {
    height: 0px;
    bottom: 0;
    top: auto; } }
  .switch-button-1 .layer3,
  .switch-button-2 .layer3,
  .switch-button-3 .layer3 {
    top: 0px;
    left: auto;
    right: 0;
    width: 0px;
    height: 250px;
    z-index: -1;
    animation: impuls2 2s 0.3s linear infinite; }
@keyframes impuls2 {
  0% {
    height: 0px;
    width: 1px; }
  10% {
    height: 250px;
    top: 0;
    bottom: auto; }
  10.9% {
    height: 250px;
    bottom: 0;
    top: auto; }
  20% {
    height: 0px; }
  100% {
    height: 0px;
    bottom: 0;
    top: auto; } }
  .switch-button-1 .layer4,
  .switch-button-2 .layer4,
  .switch-button-3 .layer4 {
    bottom: 0px;
    left: 0px;
    right: auto;
    width: 250px;
    height: 0px;
    z-index: -1;
    animation: impuls1 2s 0.3s linear infinite; }
@keyframes impuls1 {
  0% {
    width: 0px;
    height: 1px; }
  10% {
    width: 250px;
    left: 0;
    right: auto; }
  10.9% {
    width: 250px;
    right: 0;
    left: auto; }
  20% {
    width: 0px; }
  100% {
    width: 0px;
    right: 0;
    left: auto; } }
.switch-button-1,
.switch-button-2 {
  transform: rotate(45deg);
  margin-top: 50px; }

.switch-button-3 {
  transform: rotate(-135deg); }
  .switch-button-3 i {
    transform: rotate(180deg); }

.layer1 {
    background: linear-gradient(to right, transparent, #ff2f00, transparent);
}

.layer2 {
    background: linear-gradient(transparent, #ff2f00, transparent);
}

.layer3 {
    background: linear-gradient(transparent, #ffe000, transparent);
}

.layer4 {
    background: linear-gradient(to right, transparent, #ffe000, transparent);
}

.pull-left{float:left;}


.switch-button-2 {
        background-color: rgba(10, 11, 12, 0.52);
   box-shadow: 3px 9px 16px rgb(0,0,0,0.4), -3px -3px 10px rgba(255,255,255, 0.06), inset 14px 14px 26px rgb(0,0,0,0.3), inset -3px -3px 15px rgba(255,255,255, 0.05);
background-color: transparent;
  overflow:hidden;
  transition: all 0.3s ease-in-out 0s;
}

.mb-5{margin-bottom:50px;}

.switch-button-2:hover{
      background: linear-gradient(to right, rgba(255, 9, 9, 0.12941176470588237), #ff0000b5, rgba(255, 0, 0, 0.14));
  transition: all 0.3s ease-in-out 0s;
}
.switch-button-2:hover .lamp1
{
   fill:yellow;
   transition-delay:0.1s;
  
}

.switch-button-2:hover .lamp9
{
   fill:yellow;
   transition-delay:0.2s;
}

.switch-button-2:hover .lamp8
{
   fill:yellow;
   transition-delay:0.3s;
}

.switch-button-2:hover .lamp7
{
   fill:yellow;
   transition-delay:0.4s;
}

.switch-button-2:hover .lamp6
{
   fill:yellow;
   transition-delay:0.5s;
}

.switch-button-2:hover .lamp5
{
   fill:yellow;
   transition-delay:0.6s;
}

.switch-button-2:hover .lamp4
{
   fill:yellow;
   transition-delay:0.7s;
}

.switch-button-2:hover .lamp3
{
   fill:yellow;
   transition-delay:0.8s;
}

.switch-button-2:hover .lamp2
{
   fill:yellow;
   transition-delay:0.9s;
}
</style>

</head>
<body translate="no">
<div class="mt-5 container">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="">
<div class="switch-button-2 font-size-28">
<div class="layer1"></div>
<div class="layer2"></div>
<div class="layer3"></div>
<div class="layer4"></div>
<div class="vcenter">
<a class="rest-button1">
<svg viewBox="0 0 60 60" width="100%" xmlns="http://www.w3.org/2000/svg"><g id="Page-1" fill="none" fill-rule="evenodd"><g id="029---Namaste" fill-rule="nonzero" transform="translate(-1)"><path id="Shape" d="m31 32v17c0 3-2 6-5 6-1 0-7 4-7 4h-17v-4c7-4 16-6 16-7v-5l.85-12.24c.1180447-2.3352489.7208261-4.6203694 1.77-6.71l4.7-12.39c.6239497-1.2403496 2.0174991-1.89048879 3.3688481-1.5716846 1.3513491.3188042 2.3073745 1.5232444 2.3111519 2.9116846.0014252.0734724-.0019152.1469599-.01.22-.0456139.313605-.1226688.6218243-.23.92-.81 2.53-3.49 9.41-3.74 15.03.3143509-.1130143.6459514-.1705369.98-.17 1.6568542 0 3 1.3431458 3 3z" fill="#ffe0b2" /><path id="Shape" d="m28 29c-.3340486-.0005369-.6656491.0569857-.98.17.25-5.62 2.93-12.5 3.74-15.03.1073312-.2981757.1843861-.606395.23-.92.0080848-.0730401.0114252-.1465276.01-.22-.0035904-1.0699962-.5768054-2.0570849-1.5043526-2.5905276-.9275471-.53344265-2.0690017-.53247955-2.9956474.0025276.9270492.5321324 1.4990837 1.5190826 1.5 2.588.0014252.0734724-.0019152.1469599-.01.22-.0456139.313605-.1226688.6218243-.23.92-.81 2.53-3.49 9.41-3.74 15.03.3143509-.1130143.6459514-.1705369.98-.17 1.6568542 0 3 1.3431458 3 3v17c0 3-2 6-5 6-1 0-7 4-7 4h3s6-4 7-4c3 0 5-3 5-6v-17c0-1.6568542-1.3431458-3-3-3z" fill="#dfc49c" /><path id="Shape" d="m34.98 29.17c-.3143509-.1130143-.6459514-.1705369-.98-.17-1.6568542 0-3 1.3431458-3 3 0-1.6568542-1.3431458-3-3-3-.3340486-.0005369-.6656491.0569857-.98.17.25-5.62 2.93-12.5 3.74-15.03.1073312-.2981757.1843861-.606395.23-.92.0080848-.0730401.0114252-.1465276.01-.22-.0014252.0734724.0019152.1469599.01.22.0456139.313605.1226688.6218243.23.92.81 .........完整代码请登录后点击上方下载按钮下载查看