Difference between revisions of "Team:ZJU-China/css/home/ZJU-component.css"
| Line 1: | Line 1: | ||
| − | |||
| − | |||
| − | |||
.container1 { | .container1 { | ||
height: 100%; | height: 100%; | ||
| Line 22: | Line 19: | ||
} | } | ||
.js .boxgallery { | .js .boxgallery { | ||
| − | left: 0px; top: | + | left: 0px; top: 70px; width: 100%; height: 100%; |
} | } | ||
.js .panel { | .js .panel { | ||
Revision as of 13:04, 5 September 2015
.container1 { height: 100%; } .js .boxgallery { position: absolute; } .js .boxgallery div { position: absolute; } .js .boxgallery { overflow: hidden; } .bg-tile { overflow: hidden; } .bg-img { overflow: hidden; } .js .boxgallery { left: 0px; top: 70px; width: 100%; height: 100%; } .js .panel { left: 0px; top: 0px; width: 100%; height: 100%; } .panel { z-index: 0; perspective: 1200px; -webkit-perspective: 1200px; } .bg-tile { width: 50%; height: 50%; }
- nth-child(2).bg-tile {
left: 50%; }
- nth-child(4).bg-tile {
left: 50%; }
- nth-child(3).bg-tile {
top: 50%; }
- nth-child(4).bg-tile {
top: 50%; } .bg-img { background: rgb(153, 153, 153); width: 100%; height: 100%; } .bg-img img { height: 200%; display: block; position: absolute; } @media screen and (min-aspect-ratio:1280 / 850) { .bg-img img { width: 200%; height: auto; } }
- nth-child(2).bg-tile .bg-img img {
left: -100%; }
- nth-child(4).bg-tile .bg-img img {
left: -100%; }
- nth-child(3).bg-tile .bg-img img {
top: -100%; }
- nth-child(4).bg-tile .bg-img img {
top: -100%; } .boxgallery > nav span { top: 50%; width: 100px; height: 100px; text-align: left; display: block; position: absolute; z-index: 1000; cursor: pointer; transform: translateY(-50%); -webkit-transform: translateY(-50%); } .boxgallery > nav span.prev { left: 0px; } .boxgallery > nav span.next { right: 0px; } .boxgallery > nav i { width: 100%; height: 100%; display: block; position: relative; } .boxgallery > nav span::before { background: rgb(219, 204, 208); outline: transparent solid 1px; transition:transform 0.3s; left: 50%; width: 3px; height: 50%; position: absolute; content: ""; backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-transition: -webkit-transform 0.3s; } .boxgallery > nav span::after { background: rgb(219, 204, 208); outline: transparent solid 1px; transition:transform 0.3s; left: 50%; width: 3px; height: 50%; position: absolute; content: ""; backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-transition: -webkit-transform 0.3s; } .boxgallery > nav i::before { background: rgb(219, 204, 208); outline: transparent solid 1px; transition:transform 0.3s; left: 50%; width: 3px; height: 50%; position: absolute; content: ""; backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-transition: -webkit-transform 0.3s; } .boxgallery > nav i::after { background: rgb(219, 204, 208); outline: transparent solid 1px; transition:transform 0.3s; left: 50%; width: 3px; height: 50%; position: absolute; content: ""; backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-transition: -webkit-transform 0.3s; } .boxgallery > nav i::before { background: rgb(255, 255, 255); transition:height 0.3s, transform 0.3s; height: 0px; z-index: 100; -webkit-transition: height 0.3s, -webkit-transform 0.3s; } .boxgallery > nav i::after { background: rgb(255, 255, 255); transition:height 0.3s, transform 0.3s; height: 0px; z-index: 100; -webkit-transition: height 0.3s, -webkit-transform 0.3s; } .boxgallery > nav span::before { transform-origin: 50% 0%; top: 50%; transform: translateX(-50%) rotate(-135deg); -webkit-transform: translateX(-50%) rotate(-135deg); -webkit-transform-origin: 50% 0%; } .boxgallery > nav i::before { transform-origin: 50% 0%; top: 50%; transform: translateX(-50%) rotate(-135deg); -webkit-transform: translateX(-50%) rotate(-135deg); -webkit-transform-origin: 50% 0%; } .boxgallery > nav span.next::before { transform-origin: 50% 0%; transform: translateX(-50%) rotate(135deg); -webkit-transform: translateX(-50%) rotate(135deg); -webkit-transform-origin: 50% 0%; } .boxgallery > nav span.next i::before { transform-origin: 50% 0%; transform: translateX(-50%) rotate(135deg); -webkit-transform: translateX(-50%) rotate(135deg); -webkit-transform-origin: 50% 0%; } .boxgallery > nav span::after { transform-origin: 0% 0%; top: 50%; transform: translateX(-50%) rotate(-45deg); -webkit-transform: translateX(-50%) rotate(-45deg); -webkit-transform-origin: 0 0; } .boxgallery > nav i::after { transform-origin: 0% 0%; top: 50%; transform: translateX(-50%) rotate(-45deg); -webkit-transform: translateX(-50%) rotate(-45deg); -webkit-transform-origin: 0 0; } .boxgallery > nav span.next::after { transform-origin: 100% 0%; transform: translateX(-50%) rotate(45deg); -webkit-transform: translateX(-50%) rotate(45deg); -webkit-transform-origin: 100% 0%; } .boxgallery > nav span.next i::after { transform-origin: 100% 0%; transform: translateX(-50%) rotate(45deg); -webkit-transform: translateX(-50%) rotate(45deg); -webkit-transform-origin: 100% 0%; } .no-touch .boxgallery > nav span:hover i::before { height: 50%; } .no-touch .boxgallery > nav span:hover i::after { height: 50%; } .no-touch .boxgallery > nav span:hover::before { transform: translateX(-50%) rotate(-125deg); -webkit-transform: translateX(-50%) rotate(-125deg); } .no-touch .boxgallery > nav span:hover i::before { transform: translateX(-50%) rotate(-125deg); -webkit-transform: translateX(-50%) rotate(-125deg); } .no-touch .boxgallery > nav span.next:hover::before { transform: translateX(-50%) rotate(125deg); -webkit-transform: translateX(-50%) rotate(125deg); } .no-touch .boxgallery > nav span.next:hover i::before { transform: translateX(-50%) rotate(125deg); -webkit-transform: translateX(-50%) rotate(125deg); } .no-touch .boxgallery > nav span:hover::after { transform: translateX(-50%) rotate(-55deg); -webkit-transform: translateX(-50%) rotate(-55deg); } .no-touch .boxgallery > nav span:hover i::after { transform: translateX(-50%) rotate(-55deg); -webkit-transform: translateX(-50%) rotate(-55deg); } .no-touch .boxgallery > nav span.next:hover::after { transform: translateX(-50%) rotate(55deg); -webkit-transform: translateX(-50%) rotate(55deg); } .no-touch .boxgallery > nav span.next:hover i::after { transform: translateX(-50%) rotate(55deg); -webkit-transform: translateX(-50%) rotate(55deg); } .panel.current { z-index: 2; } .panel.active { z-index: 1; } .panel.current .bg-img { transition:transform 1.1s ease-in-out; -webkit-transition: -webkit-transform 1.1s ease-in-out; } [data-effect='effect-1'].boxgallery .panel.active .bg-tile { animation:scaleDown 1.1s ease-in-out; -webkit-animation: scaleDown 1.1s ease-in-out; } [data-effect='effect-2'].boxgallery .panel.active .bg-tile { animation:scaleDown 1.1s ease-in-out; -webkit-animation: scaleDown 1.1s ease-in-out; } [data-effect='effect-2'].boxgallery .panel.current .bg-img { transition:transform 0.9s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: -webkit-transform 0.9s cubic-bezier(0.7, 0, 0.3, 1); } [data-effect='effect-2'].boxgallery .panel.current :nth-child(2).bg-tile .bg-img { transition-delay: 0.15s; -webkit-transition-delay: 0.15s; } [data-effect='effect-2'].boxgallery .panel.current :nth-child(3).bg-tile .bg-img { transition-delay: 0.3s; -webkit-transition-delay: 0.3s; } [data-effect='effect-2'].boxgallery .panel.current :nth-child(4).bg-tile .bg-img { transition-delay: 0.45s; -webkit-transition-delay: 0.45s; } [data-effect='effect-3'].boxgallery .panel::after { background: rgba(0, 0, 0, 0.8); transition:opacity 1.1s ease-in-out; width: 100%; height: 100%; position: absolute; content: ""; -webkit-transition: opacity 1.1s ease-in-out; } [data-effect='effect-3'].boxgallery .panel.current::after { opacity: 0; } [data-effect='effect-3'].boxgallery .panel.active::after { opacity: 0; } [data-effect='effect-3'].boxgallery .panel.current::after { transition:none; -webkit-transition: none; } [data-effect='effect-3'].boxgallery .panel.current .bg-img { transition:transform 1.1s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: -webkit-transform 1.1s cubic-bezier(0.7, 0, 0.3, 1); } [data-effect='effect-3'].boxgallery .panel.current :nth-child(2).bg-tile .bg-img { transition-delay: 0.15s; -webkit-transition-delay: 0.15s; } [data-effect='effect-3'].boxgallery .panel.current :nth-child(3).bg-tile .bg-img { transition-delay: 0.3s; -webkit-transition-delay: 0.3s; } [data-effect='effect-3'].boxgallery .panel.current :nth-child(4).bg-tile .bg-img { transition-delay: 0.45s; -webkit-transition-delay: 0.45s; } @media screen and (max-width:380px) { .boxgallery > nav span { width: 50px; height: 50px; } }