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