button-test-simplified

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision		 Previous revision
button-test-simplified [2024/01/24 17:42] – created yiler.huangbutton-test-simplified [2024/01/24 17:50] (current) – yiler.huang
Line 22: Line 22:
     </script>     </script>
     <style>     <style>
 +        .button {
 +            width: 400px;
 +            height: 400px;
 +            background-color: none;
 +            position: relative;
 +            overflow: hidden;
 +            margin: 3px;
 +        }
                  
 +        .image {
 +            position: absolute;
 +            width: 100%;
 +            height: 100%;
 +            filter: blur(0px);
 +            transition: filter 0.5s;
 +        }
 +
 +        .title {
 +            font-family: 'Arial', sans-serif;
 +            position: absolute;
 +            top: -3%;
 +            left: 5%;
 +            font-size: 36px;
 +            color: white;
 +            font-weight: 650;
 +        }
 +
 +        .description {
 +            line-height: 1.2;
 +            position: absolute;
 +            top: 15%;
 +            left: 5%;
 +            font-size: 21px;
 +            color: white;
 +            opacity: 0;
 +            transition: opacity 0.2s;
 +            overflow-wrap: normal;
 +            word-break: normal;
 +            max-width: 330px;
 +            color: #e7e7e7;
 +            font-weight: 900;
 +        }
 +
 +        .title.worth {
 +            position: absolute;
 +            top: -15%;
 +            opacity: 0;
 +            transition: opacity 0.2s, top 0.2s;
 +            color: #FFECB3;
 +        }
 +
 +        .title.and {
 +            position: absolute;
 +            left: 33.3%;
 +            opacity: 0;
 +            transition: opacity 0.2s;
 +            color: #e7e7e7;
 +        }
 +
 +        .title.value {
 +            position: absolute;
 +            left: 60%;
 +            opacity: 0;
 +            transition: opacity 0.2s, left 0.2s;
 +            color: #8cb6de;
 +        }
 +
 +        .title.success {
 +            position: absolute;
 +            top: -15%;
 +            opacity: 0;
 +            transition: opacity 0.2s, top 0.2s;
 +            color: #8bdaa5;
 +        }
 +
 +        .title.gender {
 +            position: absolute;
 +            top: -15%;
 +            opacity: 0;
 +            transition: opacity 0.2s, top 0.2s;
 +            color: #b6b6f0;
 +        }
 +
 +        .title.and-1 {
 +            position: absolute;
 +            left: 39%;
 +            opacity: 0;
 +            transition: opacity 0.2s;
 +            color: #e7e7e7;
 +        }
 +
 +        .title.society {
 +            position: absolute;
 +            left: 64%;
 +            opacity: 0;
 +            transition: opacity 0.2s, left 0.2s;
 +            color: #96e3e3;
 +        }
 +
 +        .title.women {
 +            position: absolute;
 +            top: -15%;
 +            opacity: 0;
 +            transition: opacity 0.2s, top 0.2s;
 +            color: #F7CAC9;
 +        }
 +
 +        .title.line {
 +            position: absolute;
 +            left: 40%;
 +            opacity: 0;
 +            transition: opacity 0.2s;
 +            color: #e7e7e7;
 +        }
 +
 +        .title.workplace {
 +            position: absolute;
 +            left: 50%;
 +            opacity: 0;
 +            transition: opacity 0.2s, left 0.2s;
 +            color: #a8cff0;
 +        }
 +        
 +        .title.genetics {
 +            position: absolute;
 +            top: -15%;
 +            opacity: 0;
 +            transition: opacity 0.2s, top 0.2s;
 +            color: #ddf0a8;
 +        }
 +
 +        .overlay {
 +            width: 100%;
 +            height: 20%;
 +            background-color: black;
 +            position: absolute;
 +            transform-origin: left;
 +            transform: scaleX(0);
 +            transition: transform 0.15s;
 +            opacity: 0.8;
 +        }
 +
 +        .overlay.two {
 +            top: 20%;
 +            transform-origin: right;
 +            transition-delay: 80ms;
 +        }
 +
 +        .overlay.three {
 +            top: 40%;
 +            transition-delay: 240ms;
 +        }
 +
 +        .overlay.four {
 +            top: 60%;
 +            transform-origin: right;
 +            transition-delay: 400ms;
 +        }
 +
 +        .overlay.five {
 +            top: 80%;
 +            transition-delay: 560ms;
 +        }
 +
 +        .button:hover {
 +            cursor: pointer;
 +        }
 +
 +
 +        .button:hover .image {
 +            filter: blur(7px);
 +            transition: filter 0.9s;
 +        }
 +
 +        .button:hover .overlay {
 +            transform: scaleX(1);
 +        }
 +
 +        .button:hover .overlay {
 +            transform: scaleX(1);
 +        }
 +
 +        .button:hover .title.worth {
 +            transition: top 0.2s, opacity 0.2s;
 +            transition-delay: 0.75s;
 +            opacity: 1;
 +            top: -3%;
 +        }
 +
 +        .button:hover .title.and {
 +            opacity: 1;
 +            transition: opacity 0.2s;
 +            transition-delay: 1s;
 +        }
 +
 +        .button:hover .title.value {
 +            transition: left 0.2s, opacity 0.2s;
 +            transition-delay: 1.25s;
 +            opacity: 1;
 +            left: 51.8%;
 +        }
 +
 +        .button:hover .title.success {
 +            transition: top 0.2s, opacity 0.2s;
 +            transition-delay: 0.75s;
 +            opacity: 1;
 +            top: -3%;
 +        }
 +
 +        .button:hover .title.gender {
 +            transition: top 0.2s, opacity 0.2s;
 +            transition-delay: 0.75s;
 +            opacity: 1;
 +            top: -3%;
 +        }
 +
 +        .button:hover .title.and-1 {
 +            opacity: 1;
 +            transition: opacity 0.2s;
 +            transition-delay: 1s;
 +        }
 +
 +        .button:hover .title.society {
 +            transition: left 0.2s, opacity 0.2s;
 +            transition-delay: 1.25s;
 +            opacity: 1;
 +            left: 56.5%;
 +        }
 +
 +        .button:hover .title.women {
 +            transition: top 0.2s, opacity 0.2s;
 +            transition-delay: 0.75s;
 +            opacity: 1;
 +            top: -3%;
 +        }
 +
 +        .button:hover .title.line {
 +            opacity: 1;
 +            transition: opacity 0.2s;
 +            transition-delay: 1s;
 +        }
 +
 +        .button:hover .title.workplace {
 +            transition: left 0.2s, opacity 0.2s;
 +            transition-delay: 1.25s;
 +            opacity: 1;
 +            left: 45.2%;
 +        }
 +
 +        .button:hover .title.genetics {
 +            transition: top 0.2s, opacity 0.2s;
 +            transition-delay: 0.75s;
 +            opacity: 1;
 +            top: -3%;
 +        }
 +
 +        .button:hover .description.worthAndValue {
 +            opacity: 1;
 +            transition: opacity 0.2s;
 +            transition-delay: 1.5s;
 +        }
 +
 +        .button:hover .description.success {
 +            opacity: 1;
 +            transition: opacity 0.2s;
 +            transition-delay: 1s;
 +        }
 +
 +        .button:hover .description.genderAndSociety {
 +            opacity: 1;
 +            transition: opacity 0.2s;
 +            transition-delay: 1.5s;
 +        }
 +
 +        .button {
 +            float: left;
 +            font-family: Arial, Helvetica, sans-serif;
 +        }
     </style>     </style>
 </head> </head>
  • button-test-simplified.1706146944.txt.gz
  • Last modified: 2024/01/24 17:42
  • by yiler.huang