/*hover 2018.10.30*/ /*public*/ @charset "utf-8"; .C-line, .C-WH,.C-W ,.C-H, .B-T, .B-T1,[class*="Border"]{ position: relative; width: 100%; height: 100%; z-index: 0; } .C-line:before, .C-WH:before,.C-W:before, .C-H:before, .B-T:before, .B-T1:before, .L-R:before, .L-R1:before,[class*="Border"]:before,[class*="Border"]:after{ transition: 0.5s ease 0s; position: absolute; content: ''; z-index: -1; } /*线条、色块*/ .C-line:before { left: 50%; height: 3px; background: #c9062c; bottom: 0; width: 0; } .C-WH:before { background: #c9062c; top: 50%; left: 50%; width: 0%; height: 0%; opacity: 0; } .C-W:before { background: #c9062c; top: 0; left: 50%; width: 0%; height: 100%; opacity: 0; } .C-H:before { width: 100%; height: 0; background: #c9062c; left: 0; top: 50%; } .B-T:before, .B-T1:before { width: 100%; height: 0; background: #c9062c; left: 0; } .B-T:before { bottom: 0; } .B-T1:before { top: 0; } .L-R, .L-R1 { position: relative; width: 100%; height: 100%; z-index: 1; } .L-R:before, .L-R1:before { width: 0; top: 0; height: 100%; background: #c9062c; } .L-R:before { left: 0; } .L-R1:before { right: 0; } /*线框*/ .Border1:before, .Border1:after, .Border2:before, .Border2:after { width: 0; height: 0; box-sizing: border-box; opacity: 0; } .Border1:before, .Border2:before { left: 0; top: 0; border-top: 1px solid #c9062c; } .Border1:before { border-left: 1px solid #c9062c; } .Border1:after, .Border2:after { bottom: 0; right: 0; border-bottom: 1px solid #c9062c; } .Border1:after { border-right: 1px solid #c9062c; } .Border2:before { border-right: 1px solid #c9062c; } .Border2:after { border-left: 1px solid #c9062c; } .Border2:before { transition: width 0.3s linear 0.9s, height 0.3s linear 0.6s, opacity 0s linear 1.2s; } .Border2:after { transition: height 0.3s linear 0s, width 0.3s linear 0.3s, opacity 0s linear 0.6s; } .Border3:before, .Border3:after { opacity: 0; box-sizing: border-box; } .Border3:before { border-left: 1px solid #c9062c; border-right: 1px solid #c9062c; width: calc(100% + 20px); height: 100%; top: 0; left: -10px; } .Border3:after { border-top: 1px solid #c9062c; border-bottom: 1px solid #c9062c; height: calc(100% + 20px); width: 100%; left: 0; top: -10px; } .Border4:before, .Border4:after { width: 100%; height: 100%; top: 0; left: 0; } .Border4:before { border-left: 1px solid #c9062c; border-right: 1px solid #c9062c; box-sizing: border-box; } .Border4:after { border-top: 1px solid #c9062c; border-bottom: 1px solid #c9062c; box-sizing: border-box; } /*圆*/ .Circular-BG1, .Circular-BG2, .Circular-BG3, .Circular-BG4, [class*="Circular-rotate"] { border-radius: 50%; position: relative; z-index: 0; } [class*="Circular-rotate"] { overflow: hidden; } [class*="Circular-rotate"]>i { position: absolute; width: 50%; height: 100%; top: 0; z-index: -1; overflow: hidden; } [class*="Circular-rotate"]>i.L { left: 0; } [class*="Circular-rotate"]>i.R { right: 0; } .Circular-BG1:before, .Circular-BG3:after { background: #333; transition: 0.6s ease 0s; } .Circular-BG1:after, .Circular-BG2:after { transition: 0.4s ease 0s; background: #c9062c; transform: scale(0.2); opacity: 0; } .Circular-BG3:before { background: #c9062c; transition: 0.3s ease 0s; } .Circular-BG4:before { transition: 0.8s ease 0s;} .Circular-BG1:before, .Circular-BG1:after, .Circular-BG2:after, .Circular-BG3:after, .Circular-BG3:before,.Circular-BG4:before { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 50%; z-index: -1; } .Circular-rotate1>i:before { content: ''; background: #c9062c; width: 100%; height: 100%; display: block; transform: rotate(-180deg); } .Circular-rotate2>i:before { transition: 0.3s linear 0s; content: ''; display: block; height: 100%; border-radius: 50%; border-top: 4px solid #c9062c; padding-left: calc(100% - 4px); padding-right: calc(100% - 4px); box-sizing: border-box; border-left: 4px solid #c9062c; border-right: 4px solid transparent; border-bottom: 4px solid transparent; } .Circular-rotate2>i.L:before { transition: 0.3s linear 0s; transform: rotate(-225deg); } .Circular-rotate2>i.R:before { transition: 0.3s linear 0.3s; margin-left: -100%; transform: rotate(-45deg); } .Circular-rotate1>i.L:before { transition: 0.3s linear 0s; transform-origin: right; } .Circular-rotate1>i.R:before { transition: 0.3s linear 0.3s; transform-origin: left; } .Circular-rotate3:before, .Circular-rotate4:before { content: ''; position: absolute; z-index: 1; width: 6px; height: 6px; background: #c9062c; } .Circular-rotate3:before { left: 50%; top: 0; animation: rotate3 5s linear 0s infinite; transform-origin: 0 25px; transform: translate3d(-50%, -50%, 0); } .Circular-rotate4:before { animation: rotate4-X 4s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate, rotate4-Y 4s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate; } /*动画*/ @keyframes beat { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(0.9, 1.1); } 50% { transform: scale(1.1, 0.9); } 75% { transform: scale(0.95, 1.05); } } @keyframes skew { 0%, 11.1%, 100% { -webkit-transform: none; -moz-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); -moz-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); -moz-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); -moz-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); -moz-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); -moz-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); -moz-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); -moz-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg); } } @keyframes rotate3 { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } } @keyframes rotate4-X { 0% { left: 0px; } 100% { left: calc(100% - 6px); } } @keyframes rotate4-Y { 0% { top: 0px; } 100% { top: calc(100% - 6px); } } @media screen and (min-width: 1101px) { .C-line:hover:before { left: 0; width: 100%; } .C-WH:hover:before { left: 0; top: 0; width: 100%; height: 100%; opacity: 1; } .C-W:hover:before { left: 0; width: 100%; opacity: 1; } .C-H:hover:before { height: 100%; top: 0; } .B-T:hover:before, .B-T1:hover:before { height: 100%; } .B-T1:hover:before { top: auto; bottom: 0; } .L-R:hover:before, .L-R1:hover:before { width: 100%; } .L-R1:hover:before { right: auto; left: 0; } .scale:hover img { transform: scale(1.1); } .Border1:hover:before, .Border1:hover:after, .Border2:hover:before, .Border2:hover:after { width: 100%; height: 100%; opacity: 1; } .Border2:hover:before { transition: width 0.3s linear 0s, height 0.3s linear 0.3s; } .Border2:hover:after { transition: width 0.3s linear 0.6s, height 0.3s linear 0.9s, opacity 0s linear 0.6s; } .Border3:hover:before, .Border3:hover:after { opacity: 1; } .Border3:hover:before, .Border3:hover:after{ width: 100%; height: 100%; top: 0; left: 0; } .Border4:hover:before { width: calc(100% + 20px); left: -10px; opacity: 0; } .Border4:hover:after { height: calc(100% + 20px); top: -10px; opacity: 0; } .Circular-BG1:hover:before { transform: scale(1.3); opacity: 0; } .Circular-BG1:hover:after { transform: scale(1); opacity: 1; transition-delay: 0.1; } .Circular-BG2:hover:after { transform: scale(1); opacity: 1; } .Circular-BG3:hover:after { transform: scale(0); } .Circular-BG4:hover:before { box-shadow: 0 0 0 50px #c9062c inset; } .Circular-rotate1:hover>i:before { transform: rotate(0deg); } .Circular-rotate2:hover>i.R:before { transform: rotate(135deg); } .Circular-rotate2:hover>i.L:before { transform: rotate(-45deg); } [class*="Circular-rotate"]:hover>i.R:before { transition: 0.3s linear 0s; } [class*="Circular-rotate"]:hover>i.L:before { transition: 0.3s linear 0.3s; } .beat1:hover img, .beat2:hover { transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); animation: beat 0.5s 1; } .skew1:hover img, .skew2:hover { -webkit-animation: skew 1s; -moz-animation: skew 1s; animation: skew 1s; } } /* FILE ARCHIVED ON 16:29:59 Jul 13, 2022 AND RETRIEVED FROM THE INTERNET ARCHIVE ON 02:31:56 Apr 21, 2024. JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE. ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C. SECTION 108(a)(3)). */ /* playback timings (ms): captures_list: 0.824 exclusion.robots: 0.172 exclusion.robots.policy: 0.16 cdx.remote: 0.084 esindex: 0.011 LoadShardBlock: 97.897 (3) PetaboxLoader3.datanode: 56.055 (4) PetaboxLoader3.resolve: 81.445 (2) load_resource: 117.756 */