他们的详细解释可以参考 W3CSCHOOL
下面是效果图：
类似于tab选项卡，当点击某个input的时候，就以动画的效果来显示对应的内容区域。
Html代码
body{ overflow: hidden; } .st-container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; font-family: Arial, sans-serif; } /*put the “navigation” at the top of the page by giving it a fixed position*/ .st-container > input, .st-container > a { position: fixed; top: 0; width: 20%; cursor: pointer; font-size: 16px; height: 34px; line-height: 34px; } .st-container > input { opacity: 0; z-index: 1000; } .st-container > a { z-index: 10; font-weight: 700; background: #e23a6e; color: #fff; text-align: center; text-shadow: 1px 1px 1px rgba(151,24,64,0.2); text-decoration: none; } /*It will have the same background color like the link elements:*/ .st-container:after { content: ''; position: fixed; width: 100%; height: 34px; background: #e23a6e; z-index: 9; top: 0; } /*give input and links respective left values*/ #st-control-1, #st-control-1 + a { left: 0; } #st-control-2, #st-control-2 + a { left: 20%; } #st-control-3, #st-control-3 + a { left: 40%; } #st-control-4, #st-control-4 + a { left: 60%; } #st-control-5, #st-control-5 + a { left: 80%; } /*define a “selected” state for the link elements.*/ .st-container > input:checked + a, .st-container > input:checked:hover + a{ background: #821134; } /*add a little triangle using the pseudo-class :after and give it the same color:*/ .st-container > input:checked + a:after, .st-container > input:checked:hover + a:after{ top: 100%; border: solid transparent; content: ''; height: 0; width: 0; position: absolute; pointer-events: none; border-top-color: #821134; border-width: 20px; left: 50%; margin-left: -20px; } /*define a hover state for the link element:*/ .st-container > input:hover + a{ background: #AD244F; } .st-container > input:hover + a:after { border-bottom-color: #AD244F; } /*define scroll panel style*/ .st-scroll, .st-panel { position: relative; width: 100%; height: 100%; } .st-scroll { top: 0; left: 0; -webkit-transition: all 0.6s ease-in-out; /* Let's enforce some hardware acceleration */ -webkit-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; border: solid 1px #ccc; } .st-panel{ background: #fff; overflow: hidden; } /**define the positions for the st-scroll wrapper for each checked radio button*/ #st-control-1:checked ~ .st-scroll { -webkit-transform: translateY(0%); background-color: green; } #st-control-2:checked ~ .st-scroll { -webkit-transform: translateY(-100%); background-color: green; } #st-control-3:checked ~ .st-scroll { -webkit-transform: translateY(-200%); background-color: green; } #st-control-4:checked ~ .st-scroll { -webkit-transform: translateY(-300%); background-color: green; } #st-control-5:checked ~ .st-scroll { -webkit-transform: translateY(-400%); background-color: green; } #st-control-1:checked ~ .st-scroll #st-panel-1 h2, #st-control-2:checked ~ .st-scroll #st-panel-2 h2, #st-control-3:checked ~ .st-scroll #st-panel-3 h2, #st-control-4:checked ~ .st-scroll #st-panel-4 h2, #st-control-5:checked ~ .st-scroll #st-panel-5 h2{ -webkit-animation: moveDown 1.6s ease-in-out 1.2s backwards; } /** define animation for the scroll panel*/ @keyframes moveDown{ 0% { -webkit-transform: translateY(-40px); opacity: 0; } 100% { -webkit-transform: translateY(0px); opacity: 1; } } .st-panel h2 { color: #e23a6e; text-shadow: 1px 1px 1px rgba(151,24,64,0.2); position: absolute; font-size: 54px; font-weight: 900; width: 80%; left: 10%; text-align: center; line-height: 50px; margin: -70px 0 0 0; padding: 0; top: 50%; -webkit-backface-visibility: hidden; } .st-panel p { position: absolute; text-align: center; font-size: 16px; line-height: 22px; color: #8b8b8b; z-index: 2; padding: 0; width: 50%; left: 25%; top: 50%; margin: 10px 0 0 0; -webkit-backface-visibility: hidden; }
Serendipity Happiness Tranquillity Positivity Passion
Serendipity
Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.
Happiness
Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.
Tranquillity
Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.
Positivity
Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.
Passion
Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.
查看更多关于css3animation学习_html/css_WEB-ITnose的详细内容...