Ianliu1997 (Talk | contribs) |
|||
Line 101: | Line 101: | ||
} | } | ||
+ | .slider_container { | ||
+ | margin: 30px auto; | ||
+ | width: 600px; | ||
+ | height: 300px; | ||
+ | position: relative; | ||
+ | border: 20px solid; | ||
+ | border-color: #fff; | ||
+ | border-bottom-width: 100px; | ||
+ | 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; | ||
+ | } | ||
+ | |||
</style> | </style> | ||
Revision as of 13:03, 5 September 2017