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 animation绘制彩色光点背景动画特效,感兴趣的可以下载学习一下。
10款风格不同的CSS3 Animation Menus动画版网站菜单,个性十足的CSS3动画菜单,有横向的,竖向的,有漂亮的鼠标悬停特效,动画效果流畅,每一款都有自己的特点,来自国外的HTML5达人网站,里面有许多实用的CSS3开发...
主要介绍了CSS3中Animation属性的使用详解,是CSS3入门学习中的基础知识,需要的朋友可以参考下
CSS3的动画 Transitions和Transforms和Animation 示例与快速学习
一款非常简单的CSS3彩色柱状阶梯波浪动画特效,CSS3基于animation属性制作,新手可以下载学习学习。
【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或...
在CSS3中我们可以使用animation属性来创建复杂的动画效果,本文就要借助它实现雪花飘落特效,功能代码如下,希望对大家学习css3有所帮助
├01 css3元素选择器 属性选择器 伪类选择器.mp4 ├02 css3文本选择器 表单选择器 子选择器.mp4 ├03 rgba 字体单位 text-shadow box-shadow.mp4 ├04 盒子尺寸 box-sizing 分栏 background-size linear-gradient ...
主要介绍了CSS的animation属性使用实例讲解,是CSS入门学习中的基础知识,需要的朋友可以参考下
这是一组效果非常炫酷的纯CSS3 loading加载动画特效。这组loading动画共10种不同的效果,全部使用animation帧动画制作而成。这些特效代码简洁,效果炫酷,非常值得学习借鉴。
这是本人写的一个小例子,放到这里供大家学习,主要是针对初学者,大神是用不到的
纯css3实现了一个正六边形的走马灯效果,记录一下css3动画的学习情况,效果如下: 主要用到的css3技术有:keyframes、perspective、perspective-origin、transform(translate、rotate)、animation、transform-...
济公学习,非商业用途。一个完全使用css3既可以实现的文字3D效果,主要使用了css3中的transition 和 animation 两个属性,当然IE8是无法浏览的,请使用CHROME 或者 FF 浏览器...
animation才是css3正宗的动画,主要是用于实现某种持续的动画效果(当然简单的过渡动画也可以实现),常用于自动触发的效果。例如加载中的持续动画效果等等。 在学习这两种动画之前要最好是先了解一下 transition-...
通过使用css3新增的动画(animation)属性来完成,主要采用的是steps,steps()是一个timing function,允许我们将动画或者过渡分割成段,而不是从一种状态持续到另一种状态的过渡。