css3中可以实现动画效果，主要是通过css3中新增加的属性(transform , transition,animation )来完成。
他们的详细解释可以参考 W3CSCHOOL
下面是效果图：
类似于tab选项卡，当点击某个input的时候，就以动画的效果来显示对应的内容区域。
<html lang="zh" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
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;
}
</style>
<body>
<div class="container">
<div class="st-container">
<input type="radio" name="radio-set" checked="checked" id="st-control-1">
<a href="#st-panel-1">Serendipity</a>
<input type="radio" name="radio-set" id="st-control-2">
<a href="#st-panel-2">Happiness</a>
<input type="radio" name="radio-set" id="st-control-3">
<a href="#st-panel-3">Tranquillity</a>
<input type="radio" name="radio-set" id="st-control-4">
<a href="#st-panel-4">Positivity</a>
<input type="radio" name="radio-set" id="st-control-5">
<a href="#st-panel-5">Passion</a>
<div class="st-scroll">
<!-- Placeholder text from http://hipsteripsum.me/ -->
<section class="st-panel" id="st-panel-1">
<h2>Serendipity</h2>
<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>
</section>
<section class="st-panel st-color" id="st-panel-2">
<h2>Happiness</h2>
<p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>
</section>
<section class="st-panel" id="st-panel-3">
<h2>Tranquillity</h2>
<p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
</section>
<section class="st-panel st-color" id="st-panel-4">
<h2>Positivity</h2>
<p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
</section>
<section class="st-panel" id="st-panel-5">
<h2>Passion</h2>
<p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
</section>
</div><!-- // st-scroll -->
</div><!-- // st-container -->
</div>
</body>
</html>
相关推荐
总的来说，这个压缩包提供了学习和实践CSS3动画属性，特别是关于加载提示框效果的一个实例。通过研究和理解这些代码，开发者可以更深入地了解如何利用CSS3的动画功能为网站或应用程序增添动态效果，提高用户体验。
在《Pro CSS3 Animation》中，作者专门用一章内容来讲解如何使用@keyframes规则来创建关键帧动画，这对于那些想要学习如何设计流畅和具有吸引力的动画效果的设计师和开发者来说，是非常宝贵的资源。 ### CSS3动画与...
在IT领域，CSS3 Animation是一种强大的技术，用于创建动态、交互式的网页元素，尤其是文字动画特效。...无论是初学者还是经验丰富的前端工程师，都可以从中学习到如何有效地利用CSS3 Animation来提升网站的设计水平。
**CSS3 Animation详解** 在网页设计中，CSS3（Cascading Style Sheets Level 3）引入了许多新特性，其中动画（Animation）功能让开发者能够创建出动态、丰富的用户体验。本项目"基于CSS3 animation的鼠标滑过按钮...
CSS3的animation属性是一组属性的简写形式，包括`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction`、`animation-fill...
【StarWar Prelude CSS...学习和分析这个项目，不仅可以提升对CSS3动画的理解，还能激发创新思维，创造出更多个性化的网页动画效果。同时，了解如何将电影元素融入Web设计中，也是提高用户体验和品牌识别度的有效方式。
在本文中，我们将深入探讨如何使用CSS3 Animation技术来创建点击波特效，这是一种现代Web设计中常见的视觉增强手法。点击波特效通常应用于按钮或图片，当用户点击这些元素时，会产生一个向外扩散的波纹效果，增加了...
在IT行业中，CSS3是网页样式表语言的最新版本，为网页设计师提供了强大的新功能，其中之一就是`animation`。这个特性使得我们能够通过...如果你拥有这个文件，可以通过解压并查看其内容来学习和实践这些CSS3动画技巧。
本文将深入探讨标题"30种css3 animation页面加载等待动画特效"所涵盖的知识点，并解释如何利用CSS3动画实现各种页面加载等待效果。 首先，我们需要理解CSS3中的`@keyframes`规则，这是创建动画的基础。`@keyframes`...
通过学习和运用CSS3的动画、选择器和伪类，我们可以创造出丰富多彩的交互式菜单，提升网站的视觉效果和用户体验。在实际项目中，可以根据需求和设计风格灵活应用这些技术，打造出独具特色的网页导航。
在本文中，我们将深入探讨如何使用CSS3 Animation技术来创建一个彩色光点背景动画。CSS3 Animation是现代网页设计中的一个重要工具，它允许开发者通过关键帧（keyframes）定义元素在不同时间点上的样式，从而实现...
通过学习和实践这个压缩包中的源码，你可以掌握如何使用CSS3 Animation来提升网页交互体验，创建吸引人的按钮动画效果。无论是颜色变化、形状转换还是其他视觉特效，都可以通过CSS3轻松实现，让网页设计更加生动和...
《CSS3 实战》是一本深入探讨CSS3技术的专业书籍，对于想要提升Web设计技能的开发者来说，是不可或缺的学习资源。CSS3（层叠样式表3）是网页样式设计的标准，它极大地扩展了CSS2的功能，引入了许多新的特性和模块，...
**CSS3 动画概述** CSS3（Cascading Style Sheets Level 3）是样式表语言的最新版本，为网页设计带来了许多强大的新特性，其中动画...这个名为"CSS3 animator"的资源集合，无疑是一个学习和探索CSS3动画的宝贵资料。
通过学习"CSSAnimation101从零开始介绍CSS动画开源电子书"，开发者不仅可以掌握CSS动画的基本用法，还能了解到更高级的技巧和最佳实践，从而在项目中创建出既美观又高效的动画效果。无论你是初学者还是经验丰富的...
这个名为"css3 animation动态天气图标特效.zip"的压缩包文件，显然包含了一个使用这些技术实现的动态天气图标效果。现在，我们将深入探讨这些知识点。 首先，CSS3（层叠样式表第三版）是Web设计中的一个重要组成...