js实现炫酷三维翻转弹出提示确认框弹出层动画效果代码-html代码-BFW代码库

js实现炫酷三维翻转弹出提示确认框弹出层动画效果代码

代码语言：html

所属分类：弹出层

代码描述：js实现炫酷三维翻转弹出提示确认框弹出层动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">




    <meta name="viewport" content="width=460, user-scalable=no" />


    <style>
        @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none; }
    
    body {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      font-family: Roboto, "Helvetica Neue", sans-serif;
      font-size: 18px;
      -webkit-perspective: 1000px;
              perspective: 1000px;
      background-color: #f5f5f5;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center; }
    
    .description {
      margin-top: 50px;
      text-align: center;
      color: #999;
      -webkit-transition: opacity 0.3s ease;
              transition: opacity 0.3s ease; }
    
    .description a {
      color: #4A9DF6;
      text-decoration: none; }
    
    .btn.is-open ~ .description {
      opacity: 0; }
    
    .btn {
      display: block;
      position: relative;
      width: 200px;
      height: 80px;
      -webkit-transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
              transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transform-origin: 50% 50%;
          -ms-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      text-align: center; }
    
    .btn-front {
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      line-height: 80px;
      background-color: #F44336;
      color: #fff;
      cursor: pointer;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      -webkit-tap-highlight-color: transparent;
      -webkit-transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
              transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1); }
      .btn-front:hover {
        background-color: #f77066; }
    
    .btn-back {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #eee;
      color: #222;
      -webkit-transform: translateZ(-2px) rotateX(180deg);
              transform: translateZ(-2px) rotateX(180deg);
      overflow: hidden;
      -webkit-transition: box-shadow 0.8s ease;
              transition: box-shadow 0.8s ease; }
      .btn-back p {
        margin-top: 27px;
        margin-bottom: 25px; }
      .btn-back button {
        padding: 12px 20px;
        width: 30%;
        margin: 0 5px;
        background-color: transparent;
        border: 0;
        border-radius: 2px;
        font-size: 1em;
        cursor: pointer;
        -webkit-appea.........完整代码请登录后点击上方下载按钮下载查看