|
|
Line 100: |
Line 100: |
| background-color: #555; /* Add a dark-grey background on hover */ | | background-color: #555; /* Add a dark-grey background on hover */ |
| } | | } |
− |
| |
− | .slider_container {
| |
− | margin: 30px auto;
| |
− | width: 530px;
| |
− | height: 400px;
| |
− | position: relative;
| |
− | border: 20px solid;
| |
− | border-color: #fff;
| |
− | border-bottom-width: 30px;
| |
− | background-color: #f5f5f5;
| |
− | box-shadow: #666 0 0 5px;
| |
− | }
| |
− |
| |
− | .slider_container div {
| |
− | position: absolute;
| |
− | top: 0;
| |
− | left: 0;
| |
− | opacity: 0;
| |
− | filter: alpha(opacity=0);
| |
− | }
| |
− |
| |
− | .slider_container div {
| |
− | -webkit-animation: round 55s linear infinite;
| |
− | animation: round 55s linear infinite;
| |
− | }
| |
− |
| |
− | @-webkit-keyframes round {
| |
− | 4% {
| |
− | opacity: 1;
| |
− | filter: alpha(opacity=100);
| |
− | /* 0 - 1秒 淡入*/
| |
− | }
| |
− | 20% {
| |
− | opacity: 1;
| |
− | filter: alpha(opacity=100);
| |
− | /* 1- 5秒靜止*/
| |
− | }
| |
− | 24% {
| |
− | opacity: 0;
| |
− | filter: alpha(opacity=0);
| |
− | /* 5-6秒淡出*/
| |
− | }
| |
− | }
| |
− | @keyframes round {
| |
− | 4% {
| |
− | opacity: 1;
| |
− | filter: alpha(opacity=100);
| |
− | /* 0 - 1秒 淡入*/
| |
− | }
| |
− | 20% {
| |
− | opacity: 1;
| |
− | filter: alpha(opacity=100);
| |
− | /* 1- 5秒靜止*/
| |
− | }
| |
− | 24% {
| |
− | opacity: 0;
| |
− | filter: alpha(opacity=0);
| |
− | /* 5-6秒淡出*/
| |
− | }
| |
− | }
| |
− |
| |
− |
| |
− | .slider_container div:nth-child(1) {
| |
− | -webkit-animation-delay: 0s;
| |
− | animation-delay: 0s;
| |
− | }
| |
− |
| |
− | .slider_container div:nth-child(2) {
| |
− | -webkit-animation-delay: 5s;
| |
− | animation-delay: 5s;
| |
− | }
| |
− |
| |
− | .slider_container div:nth-child(3) {
| |
− | -webkit-animation-delay: 10s;
| |
− | animation-delay: 10s;
| |
− | }
| |
− |
| |
− | .slider_container div:nth-child(4) {
| |
− | -webkit-animation-delay: 15s;
| |
− | animation-delay: 15s;
| |
− | }
| |
− |
| |
− | .slider_container div:nth-child(5) {
| |
− | -webkit-animation-delay: 20s;
| |
− | animation-delay: 20s;
| |
− | }
| |
− |
| |
− | .slider_container div:nth-child(6) {
| |
− | -webkit-animation-delay: 25s;
| |
− | animation-delay: 25s;
| |
− | }
| |
− |
| |
− | .slider_container div:nth-child(7) {
| |
− | -webkit-animation-delay: 30s;
| |
− | animation-delay: 30s;
| |
− | }
| |
− |
| |
− | .slider_container div:nth-child(8) {
| |
− | -webkit-animation-delay: 35s;
| |
− | animation-delay: 35s;
| |
− | }
| |
− |
| |
− | .slider_container div:nth-child(10) {
| |
− | -webkit-animation-delay: 40s;
| |
− | animation-delay: 40s;
| |
− | }
| |
− |
| |
− | .slider_container div:nth-child(11) {
| |
− | -webkit-animation-delay: 45s;
| |
− | animation-delay: 45s;
| |
− | }
| |
− |
| |
− | .slider_container div:nth-child(12) {
| |
− | -webkit-animation-delay: 50s;
| |
− | animation-delay: 50s;
| |
− | }
| |
− |
| |
− | .slider_container span {
| |
− | color: #000;
| |
− | background: #fff;
| |
− | position: absolute;
| |
− | left: 0%;
| |
− | top: 280px;
| |
− | width: 400px;
| |
− | height: 100px;
| |
− | font-size: 30px;
| |
− | text-align: center;
| |
− | line-height: 100px;
| |
− | -webkit-transform:scaleY(0);
| |
− | -ms-transform:scaleY(0);
| |
− | transform:scaleY(0);
| |
− | -webkit-transition: all 0.5s ease-in-out;
| |
− | transition: all 0.5s ease-in-out;
| |
− | }
| |
− |
| |
− | .slider_container:hover span {
| |
− | width: 100%;
| |
− | -webkit-transform:scaleY(1);
| |
− | -ms-transform:scaleY(1);
| |
− | transform:scaleY(1);
| |
− | }
| |
− |
| |
− | .slider_container:hover div {
| |
− | -webkit-animation-play-state: paused;
| |
− | animation-play-state: paused;
| |
− | }
| |
| | | |
| | | |