CSS3网页动画
CSS3网页动画
概要:CSS3变形是一些效果的集合
如:平移、旋转、缩放、倾斜效果
每个效果都可以称为变形(transform)他们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。
网页中能够实现的动画:动态图、flash、JavaScript
1.transform:[transform-function];
1>translate();平移函数
translate(tx,ty);X轴Y轴的偏移量;
translateX(tx);X轴的偏移量
translateY(ty);Y轴的偏移量
2>scale(sx,sy);X轴Y轴缩放倍数
scaleX(sx);X轴缩放倍数
scaleY(sy);Y轴缩放倍数
eg:transform:scale(1.5,1.5);
3>skew(ax,yx);X轴Y轴倾斜度
skew(ax);X轴倾斜度
skew(yx);Y轴倾斜度
eg:transform:skew(20deg,30deg);
4>rotate(a);单位deg;a取正元素相对原来中心顺时针旋转,只旋转不变形。
2.transition过度
注:使用transition实现过渡动画的使用步骤:
在默认样式中声明元素的初始状态样式。
声明过渡元素最终状态样式,如悬浮状态。
在默认样式中通过添加过渡函数,添加一些不同的样式。
呈现的是一种过渡,是一种动画转换的过程,如渐现、渐弱、动画快慢等
CSS3transition的过渡功能更像是一种“黄油”通过一些CSS的简单动作触发样式平滑过渡。
transition:[transition-property transition-duration transition-timing-function transition-delay]
动态模拟 周期时间 过度函数 延迟时间
定义转换动画的CSS属性名称
1>transition-property:; IDEM:指定css属性(width、height、background-color属性等);
all指定所有的元素支持transition-property属性的样式。
eg:transition-property:width:30px;
2>transition-duration: ;单位s (秒);过渡所需时间。
eg :transition-duration:2s;
3>transition-timing-function:;过度动画函数。
指定浏览器的过渡速度,以及过渡期间的操作进展情况 ,通过给过渡添加一个函数来指定动画的快慢方式。
ease;速度由快到慢(默认值)
linear;速度恒速(均匀速度)
ease-in;速度越来越快(渐显效果)
ease-out;速度越来越慢(渐隐效果)
ease-in-out;速度先加速再减速(渐显渐隐效果)
3.伪类触发
:hover
:active
:focus
:checked
媒体查询:通过@media属性判断设备的尺寸,方向等
JavaScript触发:用JavaScript脚本触发
4.设置关键帧
语法:
@keyframes IDENT{ /*第一种写法*/
from{/*CSS样式*/}
percentage{/*CSS样式*/}
to{/*CSS样式*/}
}
@keyframes spread{ /*第二种写法*/
0%{width:0;}
33%{width:23px;}
66%{width:46px;}
100%{widht:69px;}
}
CSS3网页动画的更多相关文章
- CSS3 @keyframes 动画
CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...
- html5网页动画总结--jQuery旋转插件jqueryrotate
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
- 11款样式新颖的 jQuery/CSS3 网页菜单
今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...
- css3 实现动画
CSS3,我们可以创建动画,它可以取代许多网页动画图像,例如下面这个小球动画 使用css3关键帧动画可以轻松实现 请看下面代码 <!DOCTYPE html> <html lang= ...
- 8款极具表现力的jQuery/CSS3网页菜单
上一篇我向大家分享了7款效果震憾的HTML5应用组件,今天主要来分享一下CSS3网页菜单,因为在一个网站中,菜单起着举足轻重的作用,所以作为WEB开发人员,我们有必要将网站的菜单设计得尽量完美,下面向 ...
- 使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
- 15个前卫的 HTML5 & CSS3 网页设计作品
今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站.在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例. 响应式设计和基于 HTML5 & CSS3 编码的网 ...
随机推荐
- H3路由器映射端口到外网
登录华三路由器 依次点击菜单 “防火墙”-->“NAT”-->“内部服务器” 将看到一个内部服务器转换的列表页面 点击列表页面的的新建然后完善页面提交即可 如下操作:
- Android 开发 Camera类的拍照与录像
前言 在开发Android应用的时候,如果需要调用摄像头拍照或者录像,除了通过Intent调用系统现有相机应用进行拍照录像之外,还可以通过直接调用Camera硬件去去获取摄像头进行拍照录像的操作.本篇 ...
- oo第一次总结博客
一. 多项式求导问题描述 基本概念的声明: 带符号整数 支持前导 0 的带符号整数,符号可忽略,如:+02.-16.19260817 等. 因子 变量因子 幂函数 一般形式 由自变量x和指数组成,指数 ...
- py库:os、shutil、pathlib
https://www.cnblogs.com/MnCu8261/p/5494807.html shutil模块 http://blog.csdn.net/rozol/article/details/ ...
- 记一次使用getRequestDispatcher遇到的坑。。响应页面出现新建下载任务
getRequestDispatcher RequestDispatcher接口提供将请求转发送到另一个资源的功能,它可能是html,servlet或jsp等. 此接口也可用于包括另一资源的内容.它是 ...
- hadoop的环境变量
# hadoop && yarn export HADOOP_PREFIX=/home/ochadoop/apps/hadoop export HADOOP_HOME=${HADOOP ...
- redis-python
一:缓存数据库介绍 NoSQL(NoSQL = Not Only SQL ),意即“不仅仅是SQL”,泛指非关系型的数据库,随着互联网web2.0网站的兴起,传统的关系数据库在应付web2.0网站,特 ...
- python学习笔记----正则表达式
正则: regular expression 常用的场景: #正则的包 >>> import re #match:开头匹配,匹配到,返回一个匹配对象,否则返回None >> ...
- 主成分分析、实例及R语言原理实现
欢迎批评指正! 主成分分析(principal component analysis,PCA) 一.几何的角度理解PCA -- 举例:将原来的三维空间投影到方差最大且线性无关的两个方向(二维空间). ...
- 接口--Comparable接口【哈夫曼树】
我们在字符串中见到过CompareTo方法,知道这个方法是用于比较字符串顺序的,根据字典顺序进行排序.Java中很多类也都有CompareTo方法,甚至于排序算法的底层组成也是依赖于比较的,而这个比较 ...