使用Css制作的炫酷的页面平滑切换(学自慕课网)
其实这种东西使用js或jquery也可以实现,代码量也不大,但是纯css制作比较新鲜嘛。就是css代码略多。。。我们也可以添加不同的字体来使页面更加好看。
基本原理:
主要用了css的check hover after 以及定义动画等方法
1,首先利用radio制作导航,固定在底部
2,主体部分:写一个容器充满屏幕,里面是5个section,设置其寬高均为100%(相当于5个页面),容器设置溢出隐藏属性,切换的原理是通过css选择器使我们点击每个导航使其对应的section向上移动n*100%高度,并设置其切换时间。配合主容器的溢出隐藏属性,实际效果就是页面的平滑切换效果啦
3,图片上方的倒三角也是css制作的,里面的1234也是取自section中我们设置的内容
4,页面中的标题的动画效果也是使用css选择器通过定义动画来实现的
不过这样也有一点缺陷,那就是得添加大量的浏览器兼容代码,css代码略长,还有其他的零零碎碎的小问题
页面(需要引入全局normalize.css文件)
<link rel="stylesheet" type="text/css" href="/assets/css/main.css">
<link rel="stylesheet" type="text/css" href="/assets/css/normalize.css">
<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">Hello</a>
<input type="radio" name="radio-set" id="st-control-2">
<a href="#st-panel-2">你想看什么</a>
<input type="radio" name="radio-set" id="st-control-3">
<a href="#st-panel-3">你想买什么</a>
<input type="radio" name="radio-set" id="st-control-4">
<a href="#st-panel-4">还有谁!!</a>
<input type="radio" name="radio-set" id="st-control-5">
<a href="#st-panel-5">Come On!!</a>
<div class="st-scroll">
<section class="st-panel" id="st-panel-1">
<div class="st-desc" data-icon="1"></div> <!-- 倒三角里面的内容 -->
<h2>Hello</h2>
<p>Welcome To My Shop</p>
</section>
<section class="st-panel st-color" id="st-panel-2">
<div class="st-desc" data-icon="2"></div>
<h2>你想看什么</h2>
<p>什么都可以看</p>
</section>
<section class="st-panel" id="st-panel-3">
<div class="st-desc" data-icon="3"></div>
<h2>你想买什么</h2>
<p>什么都可以买</p>
</section>
<section class="st-panel st-color" id="st-panel-4">
<div class="st-desc" data-icon="4"></div>
<h2>还有谁!</h2>
<p>还有谁这么便宜!</p>
</section>
<section class="st-panel" id="st-panel-5">
<div class="st-desc" data-icon="5"></div>
<h2>Come On</h2>
<p>不注册是不行的 不登陆也是不行的</p>
<button id="mainButton-1" onclick="signupButton()">注册</button>
<button id="mainButton-2" onclick="loginButton()">登陆</button>
</section>
</div>
</div>
</div>
</body>
这个是css文件
/*--------------------导航部分----------------------------*/ body{ background: #cbcbcb; font-weight: 400; font-size: 15px; color: white; height: 100%; overflow: hidden; -webkit-font-smoothing: antialiased; /*字体抗锯齿*/ } a{ text-decoration: none; color: #555; } .clr{ width: 0; height: 0; overflow: hidden; clear: both; padding: 0; margin: 0; } .st-container{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .st-container input,a{ width: 20%; height: 40px; line-height: 40px; position: fixed; bottom: 0; cursor: pointer; } .st-container input{ opacity: 0; z-index: 100; } .st-container a{ z-index: 10; font-weight: 700; font-size: 16px; background: #5f9ace; text-align: center; color: white; text-shadow: 1px 1px 1px rgba(151,24,64,0.2); } #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%; } .st-container input:checked + a , .st-container input:checked:hover + a{ background: #1578bb; } .st-container input:checked + a:after{ content: ""; width: 0; height: 0; overflow: hidden; border: 20px solid transparent; border-bottom-color: #1578bb; position: absolute; bottom: 100%; left:50% ; margin-left: -20px; } .st-container input:hover + a{ background: #1569a6; } /*----------------------选中切换--------------------------*/ .st-scroll{ width: 100%; height: 100%; position: relative; } .st-panel{ width: 100%; height: 100%; } .st-scroll{ left: 0; top: 0; -webkit-transform: translate3D(0,0,0); -moz-transform: translate3D(0,0,0); -o-transform: translate3D(0,0,0); -ms-transform: translate3D(0,0,0); transform: translate3D(0,0,0); -webkit-backface-visibility: hidden; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .st-panel{ background: #57ff54; overflow: hidden; } #st-control-1:checked ~ .st-scroll{ -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } #st-control-2:checked ~ .st-scroll{ -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } #st-control-3:checked ~ .st-scroll{ -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); -o-transform: translateY(-200%); -ms-transform: translateY(-200%); transform: translateY(-200%); -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } #st-control-4:checked ~ .st-scroll{ -webkit-transform: translateY(-300%); -moz-transform: translateY(-300%); -o-transform: translateY(-300%); -ms-transform: translateY(-300%); transform: translateY(-300%); -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } #st-control-5:checked ~ .st-scroll{ -webkit-transform: translateY(-400%); -moz-transform: translateY(-400%); -o-transform: translateY(-400%); -ms-transform: translateY(-400%); transform: translateY(-400%); -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } /*---------------------------------------------主体---------------------------------------------------*/ .st-desc{ width: 200px; height: 200px; background: #ffeb4b; position: relative; left: 50%; top: 0; margin-left: -100px; -webkit-transform: translateY(-50%) rotate(45deg); -moz-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } [data-icon]:after{ content: attr(data-icon); width: 200px; height: 200px; color: white; font-size: 90px; text-align: center; line-height: 200px; position: absolute; left: 50%; top: 50%; margin: -100px 0 0 -100px; -webkit-transform: rotate(-45deg) translateY(25%); -moz-transform: rotate(-45deg) translateY(25%); -ms-transform: rotate(-45deg) translateY(25%); -o-transform: rotate(-45deg) translateY(25%); transform: rotate(-45deg) translateY(25%); } .st-panel h2{ color: blueviolet; font-size: 54px; line-height: 50px; text-align: center; font-weight: 900; width: 80%; position: relative; left: 10%; text-shadow: 1px 1px 1px rgba(151,24,64,0.2); -webkit-backface-visibility: hidden; } #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.3s ease-in-out 0,8s backwards; -moz-animation: moveDown 1.3s ease-in-out 0,8s backwards; -ms-animation: moveDown 1.3s ease-in-out 0,8s backwards; -o-animation: moveDown 1.3s ease-in-out 0,8s backwards; animation: moveDown 1.3s ease-in-out 0,8s backwards; } /*定义h2动画*/ @-webkit-keyframes moveDown { 0%{ -webkit-transform: translateY(-40px); opacity: 0; } 100%{ -webkit-transform: translateY(0px); opacity: 1; } } @-moz-keyframes moveDown { 0%{ -moz-transform: translateY(-40px); opacity: 0; } 100%{ -moz-transform: translateY(0px); opacity: 1; } } @-ms-keyframes moveDown { 0%{ -ms-transform: translateY(-40px); opacity: 0; } 100%{ -ms-transform: translateY(0px); opacity: 1; } } @-o-keyframes moveDown { 0%{ -o-transform: translateY(-40px); opacity: 0; } 100%{ -o-transform: translateY(0px); opacity: 1; } } @keyframes moveDown { 0%{ transform: translateY(-40px); opacity: 0; } 100%{ transform: translateY(0px); opacity: 1; } } .st-panel p{ position: relative; width: 60%; left: 20%; font-size: 20px; line-height: 22px; text-align: center; color: blueviolet; } #mainButton-1{ width:100px; height:40px; margin-top: 5%; left: 32%; font-size:20px; color: #6b6b6b; border-radius: 10px; background-color: #ffd625; border: 1px solid white; position: relative; } #mainButton-1:hover{ background-color: #fff419; color: #242424; } #mainButton-2{ width:100px; height:40px; margin-top: 5%; left: 52%; font-size:20px; color: #6b6b6b; border-radius: 10px; background-color: #ffd625; border: 1px solid white; position: relative; } #mainButton-2:hover{ background-color: #fff419; color: #242424; } #st-control-1:checked ~ .st-scroll #st-panel-1 p, #st-control-2:checked ~ .st-scroll #st-panel-2 p, #st-control-3:checked ~ .st-scroll #st-panel-3 p, #st-control-4:checked ~ .st-scroll #st-panel-4 p, #st-control-5:checked ~ .st-scroll #st-panel-5 p{ -webkit-animation: moveUp 1.3s ease-in-out 0,8s backwards; -moz-animation: moveUp 1.3s ease-in-out 0,8s backwards; -ms-animation: moveUp 1.3s ease-in-out 0,8s backwards; -o-animation: moveUp 1.3s ease-in-out 0,8s backwards; animation: moveUp 1.3s ease-in-out 0,8s backwards; } /*定义p动画*/ @-webkit-keyframes moveUp { 0%{ -webkit-transform: translateY(40px); opacity: 0; } 100%{ -webkit-transform: translateY(0px); opacity: 1; } } @-moz-keyframes moveUp { 0%{ -moz-transform: translateY(40px); opacity: 0; } 100%{ -moz-transform: translateY(0px); opacity: 1; } } @-ms-keyframes moveUp { 0%{ -ms-transform: translateY(40px); opacity: 0; } 100%{ -ms-transform: translateY(0px); opacity: 1; } } @-o-keyframes moveUp { 0%{ -o-transform: translateY(40px); opacity: 0; } 100%{ -o-transform: translateY(0px); opacity: 1; } } @keyframes moveUp { 0%{ transform: translateY(40px); opacity: 0; } 100%{ transform: translateY(0px); opacity: 1; } } .st-color{ background: #fff635; } .st-color .st-desc{ background: #59ff57; }
效果还行吧
相关推荐
这是一款使用html5和纯css3制作的图片手风琴动画效果。该手风琴效果的所有动画都使用css3完成。动画过渡平滑,手风琴切换时带有弹性,效果相当不错。
浮现效果,淡入淡出,效果平滑,采用jQUery 和 CSS实现
jQuery文章章节平滑切换动画特效.zip
cubeTransition.js是一款超酷3D立方体页面切换过渡动画jQuery插件。该插件通过CSS 3D transforms 和 CSS Animations来制作平滑的立方体过渡动画特效
4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越...
119. 非常不错jQuery网页内容图片分类插件带特效 120. 非常实用的jquery幻灯切换广告源码 121. 非常帅的jQeruy图片切换拖影变清淅的神奇特效 1. 2款jQuery图片自动切换常用广告代码 2. jquery+css五屏焦点图...
cubeTransition.js是一款超酷3D立方体页面切换过渡动画jQuery插件。该插件通过CSS 3D transforms 和 CSS Animations来制作平滑的立方体过渡动画特效。
这是一款非常时尚的jQuery和CSS3侧边栏布局和切换页面动画特效。该侧边栏布局采用响应式设计,在点击了某个菜单项之后,侧边栏的右边部会出现一条全屏高度的进度条。进度条动画之后,相应的页面从左向右平滑的滑出。
这是一款基于CSS3的单页切换菜单插件,单页网站现在非常流行,即整个网站点击任何按钮和链接都不需要整体刷新,可以平滑地切换每一个页面。这次分享的这款应用就是在侧边栏悬停一列带小图标的菜单,点击每一个菜单项...
responsive-timeline是一款非常酷的纯CSS3响应式扁平风格垂直时间轴UI设计效果。它使用媒体查询来制作响应式效果,在大屏幕和小屏幕切换时,时间轴元素带有平滑的过渡动画效果。
89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果的代码 90. 又一款jquery自动轮播焦点图+内容的广告代码 91. 又一款非常不错的jQuery+div大气新闻图片切换插件代码(AnythingSlider)下载 92. 基于...
89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果的代码 90. 又一款jquery自动轮播焦点图+内容的广告代码 91. 又一款非常不错的jQuery+div大气新闻图片切换插件代码(AnythingSlider)下载 92. 基于...
jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 jQuery+CSS实用图片收缩与放大效果插件 jquery+div实现同时滑动切换的图文展示特效插件下载 jquery+div带动画按钮图片手动与自动切换的特效代码 jquery一页...
52:___根据鼠标放上切换内容制作的图片导航 53:___浮动的图片广告 54:___清爽简洁的图片交替导航效果 55:___用CSS实现图片的双边框效果 56:___禁止在图片上使用右键 57:___竖向图片滚动 58:___纯CSS代码实现的图片...
平滑切换组件gentlyPage 移动端(基于Zepto)的平滑切换组件组件:Demo:用法只需要引入依赖的资源,遵循下面例子中的模式。路径描述js/gentlyPage.jsjs引用路径。css/base.csscss引用路径。js实例化:var mySwipe = ...
jquery css3 显示内容介绍精美幻灯焦点图代码,由html5技术实现,动画效果十分平滑,本款图片切换可作为产品、商品展示的功能,下边有文字式的缩略图效果,可手动切换图片也可自动播放图片。
cubeTransition.js是一款超酷3D立方体页面切换过渡动画jQuery插件。该插件通过CSS 3D transforms 和 CSS Animations来制作平滑的立方体过渡动画特效。
它可以通过设置生成各种类似CSS3的动画效果。 zepto.js 处理Touch事件 处理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js...
单页应用并不是说应用只需要一个视图,而是说可以将组成应用的多个视图集合在一个网页内呈现,且在视图之间能够自由切换(平滑的动画形式居多)。 我制作单页应用使用的是一种常见方法,像下面这样: CSS Code复制...
89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果的代码 90. 又一款jquery自动轮播焦点图+内容的广告代码 91. 又一款非常不错的jQuery+div大气新闻图片切换插件代码(AnythingSlider)下载 92. 基于...