纳马斯特中性设计动画效果-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-de.........完整代码请登录后点击上方下载按钮下载查看