html怎么做动态切换效果,使用CSS制作一个比较炫酷的页面切换动画
今天我们想与大家分享一组创意的页面切换熊效果集合。我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果。虽然有些效果都非常简单,只是简单的滑动动作,但另外的一些则是利用了视角(Perspective)和 3D 转换(3D Transforms)来创造一些立体动感的效果。
温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。
CSS 动画根据它们的实现的效果分为不同的组。为展示页面过渡效果,我们使用以下结构:
CSS Code复制内容到剪贴板
A collection ofPage Transitions
透视容器的位置是相对的,我们增加1200像素透视它。所有动画效果都需要以下的样式:
CSS Code复制内容到剪贴板
.pt-perspective {
position:relative;
width: 100%;
height: 100%;
perspective:1200px;
transform-style: preserve-3d;
}
.pt-page{
width: 100%;
height: 100%;
position:absolute;
top: 0;
left: 0;
visibility:hidden;
overflow:hidden;
backface-visibility:hidden;
transform: translate3d(0, 0, 0);
}
.pt-page-current,
.no-js .pt-page{
visibility:visible;
}
.no-js body {
overflow:auto;
}
.pt-page-ontop {
z-index: 999;
}
上面的 .pt-page-ontop 样式用于某些页面过渡效果,即我们需要让一个页面留在另一个页面的顶部。下面是一个代码例子,展示了动画类和关键帧动画,在不同方向上缩放网页和以及淡入淡出效果:
CSS Code复制内容到剪贴板
/* scale and fade */
.pt-page-scaleDown {
animation: scaleDown .7s easeboth;
}
.pt-page-scaleUp {
animation: scaleUp .7s easeboth;
}
.pt-page-scaleUpDown {
animation: scaleUpDown .5s easeboth;
}
.pt-page-scaleDownUp {
animation: scaleDownUp .5s easeboth;
}
.pt-page-scaleDownCenter {
animation: scaleDownCenter .4s ease-inboth;
}
.pt-page-scaleUpCenter {
animation: scaleUpCenter .4s ease-outboth;
}
/************ keyframes ************/
/* scale and fade */
@keyframes scaleDown {
to { opacity: 0; transform: scale(.8); }
}
@keyframes scaleUp {
from { opacity: 0; transform: scale(.8); }
}
@keyframes scaleUpDown {
from { opacity: 0; transform: scale(1.2); }
}
@keyframes scaleDownUp {
to { opacity: 0; transform: scale(1.2); }
}
@keyframes scaleDownCenter {
to { opacity: 0; transform: scale(.7); }
}
@keyframes scaleUpCenter {
from { opacity: 0; transform: scale(.7); }
}
对于本演示的目的,我们采用了相应的动画类应用到当前页以及即将切换进来的页面,例如:
CSS Code复制内容到剪贴板
//...
case17:
outClass ='pt-page-scaleDown';
inClass ='pt-page-moveFromRight pt-page-ontop';
break;
case18:
outClass ='pt-page-scaleDown';
inClass ='pt-page-moveFromLeft pt-page-ontop';
break;
case19:
outClass ='pt-page-scaleDown';
inClass ='pt-page-moveFromBottom pt-page-ontop';
break;
// ...
查看演示,您可以通过点击第一个按钮来浏览一整套的页面切换效果,您也可以选择从下拉菜单中选择一个特定的效果进行预览。
我希望你会喜欢这个并从中得到启发,创作出一些更加令人兴奋的东西!
html怎么做动态切换效果,使用CSS制作一个比较炫酷的页面切换动画相关推荐
- 用html怎么做动态立体图形,使用CSS创建一个炫酷的球体动画效果
我最近看到了一个纯CSS实现的球体动画效果: 经过研究上面的效果实现起来大致可以分为五个步骤,下面就来一一介绍. 1.使用Jade和SCSS生成一个圆圈 创建一个圆圈的第一步是生成所有组成圆圈的粒子. ...
- html如何做滑动门效果,div+css制作简单滑动门效果
现在流行的网站设计中,水平导航菜单占据了大壁江山.的确,无论是门户网站还是企事业单位网站,都大量的采用水平的导航菜单设计.而水平导航菜单中,又有绝大多数网站采用"滑动门"设计. 首 ...
- css的rotate3d实现炫酷的圆环转动动画
1.实现效果 2.实现原理 2.1 rotate3d rotate3d:rotate3d() CSS 函数定义一个变换,它将元素围绕固定轴移动而不使其变形.运动量由指定的角度定义; 如果为正,运动将为 ...
- html+css+js制作一个超炫酷的雪花特效
❤ 精彩专栏推荐
- 的图片怎么循环渲染_十分钟教你做个炫酷的图片切换过度效果
做个炫酷的图片切换过度效果 首先,今天是520节日.到了520这类为情侣准备的节日,小编都会感到一万点暴击-- 首先酸一波,搞点事情(蹭波热度). 给大家分享一个520特效页面:看完记得回来为小编点个 ...
- html网页切换效果,css图片切换效果
<title>html网页切换效果,css图片切换效果</title><link rel="stylesheet" href="./fami ...
- 记录html+css制作一个上下跳动效果的动画
需求 想用html+css制作一个上下跳动效果的动画,然后记录一下代码,方便今后使用. 实例代码 <!DOCTYPE html > <html><head>< ...
- 用HTML+css制作一个动态的天气图标
前言 本文讲解用HTML+css制作一个动态的天气图标,如果觉得对你有帮助请关注小编,你的支持就是我更新的动力! 成品展示: 本程序是一个动态的 一.HTML部分 <!DOCTYPE html& ...
- HTML+CSS制作一个动画
HTML+CSS制作一个动画 效果图如下: HTML部分结构如下: <!DOCTYPE html> <html lang="zh-Hans"><hea ...
最新文章
- nvidia share有什么用_NVIDIA共享无法在Win10上运行或响应
- python怎么导入txt文件夹-python读取一个目录下所有txt里面的内容方法
- php-mysql管理利器 adminer
- table高度改变时触发什么事件_(立下flag)每日10道前端面试题11 关于事件十问...
- Eclipse安装SVN插件方式简明介绍
- 通孔的作用是什么linux,电路板空洞的作用是什么 如何区分PTH与NPTH两种通孔
- Android之版本检测和更新
- 羞羞的Python模块包
- JavaScript学习_第2章_JS语法规则
- td中使用overflow:hidden; 无效解决方案
- 现代通信原理3.3:两个重要的信号处理模块-乘法器与滤波器
- Spring实战(使用数据)
- 十行以内,你写过哪些比较酷的 Matlab 代码?
- 数据分析实战项目--链家租房数据可视化分析
- 小米电脑如何把计算机放桌面上,小米电脑怎么把此电脑放到桌面上
- 信息系统项目管理师---第十五、十六章 知识管理及项目变更管理历年考题
- 【小程序】promise在小程序中的运用
- Linux 获取磁盘唯一ID方式
- 关于MS edge出现STATUS_STACK_BUFFER_OVERRUN的解决方法
- HTML几种设置水平居中和垂直居中的方式