button-test-simplified

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
button-test-simplified [2024/01/24 17:43] – yiler.huangbutton-test-simplified [2024/01/24 17:50] (current) – yiler.huang
Line 22: Line 22:
     </script>     </script>
     <style>     <style>
-        @media only screen and (max-width: 767px) { +        .button { 
-            .button { +            width: 400px; 
-                width: 79%; +            height: 400px; 
-                height: 79%; +            background-color: none; 
-                background-color: none; +            position: relative; 
-                position: relative; +            overflow: hidden; 
-                overflow: hidden; +            margin: 3px; 
-                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>
  • button-test-simplified.1706146994.txt.gz
  • Last modified: 2024/01/24 17:43
  • by yiler.huang