X动画效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：X动画效果

代码标签：

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


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

<style>
/* Default use:
  @include min-(width,4,240);

  use width calculation
  @include min-(width,4,240,'calc(100% - 240px)');
*/
main {
  height: 100%;
  display: -webkit-box;
  display: flex;
  width: 100%;
}
@media screen and (max-width: 750px) {
  main {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
  }
}

.example {
  width: 100%;
  height: 100vh;
  overflow: scroll;
  padding: 4.1666666667vw;
}
.example.center {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}
@media screen and (max-width: 750px) {
  .example {
    padding: 2rem;
    height: auto;
  }
}

.description {
  background-color: white;
  width: 33.3333333333vw;
  padding: 4.1666666667vw;
}
@media screen and (max-width: 750px) {
  .description {
    width: 100%;
  }
}
.description code {
  display: block;
  background-color: var(--color-black);
  overflow: scroll;
}
.description code pre {
  display: block;
  font-family: courier;
  color: var(--color-white);
  font-size: 14px;
  padding: 1rem;
}
@media screen and (max-width: 750px) {
  .description {
    padding: 2rem;
  }
  .description h3 {
    font-size: 18px;
  }
  .description p {
    font-size: 12px;
  }
}

.toggle {
  width: 8em;
  height: 4em;
  position: relative;
  background-color: none;
}
.toggle span {
  position: absolute;
  width: 100%;
  height: 1em;
  display: block;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.15, 0.66, 0.5, 1.25);
  transition: -webkit-transform 0.5s cubic-bezier(0.15, 0.66, 0.5, 1.25);
  transition: transform 0.5s cubic-bezier(0.15, 0.66, 0.5, 1.25);
  transition: transform 0.5s cubic-bezier(0.15, 0.66, 0.5, 1.25), -webkit-transform 0.5s cubic-bezier(0.15, 0.66, 0.5, 1.25);
}
.toggle span::before, .toggle span::after {
  border-radius: 1em;
  content: "";
  top: 0;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.15, 0.66, 0.5, 1.25);
  transition: -webkit-transform 0.5s cubic-bezier(0.15, 0.66, 0.5, 1.25);
  transition: transform 0.5s cubic-bezier(0.15, 0.66, 0.5, 1.25);
  transition: transform 0.5s cubic-bezier(0.15, 0.66, 0.5, 1.25), -webkit-transform 0.5s cubic-bezier(0.15, 0.66, 0.5, 1.25);
  width: 100%;
  height: 100%;
  position: absolute;
}
.toggle span::before {
  left: 0em;
  -webkit-transform: translateX(-0.75em) rotate(0deg) scale(0.5, 1);
          transform: translateX(-0.75em) rotate(0deg) scale(0.5, 1);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
.toggle span::after {
  right: 0em;
  -webkit-transform: translateX(0.75em) rotate(0deg) scale(0.5, 1);
          transform: translateX(0.75em) rotate(0deg) scale(0.5, 1);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
.toggle:hover span:nth-child(1)::before {
  -webkit-transform: translateX(-1em) rotate(45deg) scale(0.5, 1);
          transform: translateX(-1em) rotate(45deg) scale(0.5, 1);
}
.toggle:hover span:nth-child(1)::after {
  -webkit-transform: translateX(1em) rotate(-45deg) scale(0.5, 1);
          transform: translateX(1em) rotate(-45deg) scale(0.5, 1);
}
.toggle:hover span:nth-child(2)::before {
  -webkit-transform: translateX(-1em) rotate(45deg) scale(0.5, 1);
          transform: translateX(-1em) rotate(45deg) scale(0.5, 1);
}
.toggle:hover span:nth-child(2)::after {
  -webkit-transform: translateX(1em) rotate(-45deg) scale(0.5, 1);
          transform: translateX(1em) rotate(-45deg) scale(0.5, 1);
}
.toggle--active span:nth-child(1)::before {
  -webkit-transform: translateY(-0.666em) translateX(-0.666em) rotate(45deg) scale(0.5, 1);
          transform: translateY(-0.666em) translateX(-0.666em) rotate(45deg) scale(0.5, 1);
}
.toggle--active span:nth-child(1)::after {
  -webkit-transform: translateY(-0.666em) translateX(0.666em) rotate(-45deg) scale(0.5, 1);
          transform: translateY(-0.666em) translateX(0.666em) rotate(-45deg) scale(0.5, 1);
}
.toggle--active span:nth-child(2)::before {
  -webkit-transform: translateY(0.666em) translateX(-0.666em) rotate(-45deg) scale(0.5, 1);
          transform: translateY(0.666em) translateX(-0.666em) rotate(-45deg) scale(0.5, 1);
}
.toggle--active span:nth-child(2)::after {
  -webkit-transform: translateY(0.666em) translateX(0.666em) rotate(45deg) scale(0.5, 1);
          transform: translateY(0.666em) translateX(0.666em) rotate(45deg) scale(0.5, 1);
}
.toggle--active:hover span:nth-child(1)::before {
  -webkit-transform: translateY(-0.25em) translateX(-0.666em) rotate(22.5deg) scale(0.5, 1);
          transform: translateY(-0.25em) translateX(-0.666em) rotate(22.5deg) scale(0.5, 1);
}
.toggle--active:hover span:nth-child(1.........完整代码请登录后点击上方下载按钮下载查看