| OLD | NEW |
|---|
| (Empty) | |
| 1 html, body { |
| 2 padding: 0; |
| 3 margin: 0; |
| 4 width: 100%; |
| 5 height: 100%; |
| 6 } |
| 7 |
| 8 body { |
| 9 overflow: hidden; |
| 10 background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #DEDEDE 75%, #A6A6A
6 100%); |
| 11 } |
| 12 |
| 13 .actor { |
| 14 position: absolute; |
| 15 border-radius: 50px; |
| 16 height: 100px; |
| 17 width: 100px; |
| 18 background-color: blue; |
| 19 } |
| 20 |
| 21 @-webkit-keyframes foil-motion { |
| 22 0% { -webkit-transform: translateY(0); } |
| 23 100% { -webkit-transform: translateY(100px); } |
| 24 } |
| 25 |
| 26 @-webkit-keyframes flip-hide { |
| 27 0% { |
| 28 opacity: 1; |
| 29 -webkit-transform: scale(.99) rotateX(0deg); |
| 30 } |
| 31 20% { |
| 32 opacity: 0.4; |
| 33 -webkit-transform: scale(1.05) rotateX(30deg); |
| 34 } |
| 35 55% { |
| 36 opacity: 0; |
| 37 } |
| 38 100% { |
| 39 opacity: 0; |
| 40 -webkit-transform: scale(1) rotateX(180deg); |
| 41 z-index: 1; |
| 42 } |
| 43 } |
| 44 |
| 45 @-webkit-keyframes flip-show { |
| 46 0% { |
| 47 opacity: 0; |
| 48 } |
| 49 20% { |
| 50 -webkit-transform: scale(1.05) rotateX(150deg); |
| 51 } |
| 52 40% { |
| 53 opacity: 0; |
| 54 } |
| 55 100% { |
| 56 opacity: 1; |
| 57 -webkit-transform: scale(1) rotateX(0deg); |
| 58 z-index: 2; |
| 59 } |
| 60 } |
| 61 |
| 62 #stopJank { |
| 63 opacity: 0; |
| 64 -webkit-transform: rotateX(180deg); |
| 65 } |
| 66 |
| 67 .button { |
| 68 position: absolute; |
| 69 top: -5px; |
| 70 left: 130px; |
| 71 display: inline-block; |
| 72 color: #777777; |
| 73 font-size: 80px; |
| 74 font-family: 'Open Sans', serif; |
| 75 text-decoration: none; |
| 76 padding-top: -5px; |
| 77 padding-bottom: 10px; |
| 78 padding-left: 15px; |
| 79 padding-right: 15px; |
| 80 } |
| 81 |
| 82 .container:hover > .button { |
| 83 color: #555555; |
| 84 } |
| 85 |
| 86 .container:active > .button { |
| 87 -webkit-transform: scale(.99); |
| 88 } |
| 89 |
| 90 .foil { |
| 91 position: absolute; |
| 92 width: 300px; |
| 93 height: 30px; |
| 94 border-radius: 3px; |
| 95 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5b
dc8), color-stop(100%,#28343b)); |
| 96 -webkit-animation: foil-motion 1s infinite alternate; |
| 97 } |
| 98 |
| 99 .container { |
| 100 cursor: pointer; |
| 101 -webkit-user-select: none; |
| 102 z-index: 1; |
| 103 -webkit-transform: translateZ(0); |
| 104 position: absolute; |
| 105 width: 100%; |
| 106 bottom: 40px; |
| 107 left: 40px; |
| 108 } |
| 109 |
| 110 .logo { |
| 111 width: 100px; |
| 112 height: 100px; |
| 113 color: #777777; |
| 114 display: inline-block; |
| 115 font-size: 80px; |
| 116 font-family: 'Open Sans', serif; |
| 117 text-decoration: none; |
| 118 -webkit-transform: translateZ(0) rotate(0deg); |
| 119 } |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1547893003:
WIP - compositor worker mega patch.
Base URL: https://chromium.googlesource.com/chromium/src.git@master