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