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 编码的网 ...
随机推荐
- 使用K-means进行聚类,用calinski_harabaz_score评价聚类效果
代码如下: """ 下面的方法是用kmeans方法进行聚类,用calinski_harabaz_score方法评价聚类效果的好坏 大概是类间距除以类内距,因此这个值越大越 ...
- Android 开发 PopupWindow弹窗
简介 PopupWindow,顾名思义弹窗.PopupWindow是与AlertDialog在形式上类似的弹窗功能,都是为了在activity最上层显示一个弹窗.但是区别是PopupWindow可以自 ...
- Vue.js中记不住 的东西
给样式背景赋值: :style="{backgroundImage:'url(' + otherInfo.head_image + ')'}" <img :src=" ...
- Convert Adjacency matrix into edgelist
Convert Adjacency matrix into edgelist import numpy as np #read matrix without head. a = np.loadtxt( ...
- iOS开发- 相机(摄像头)获取到的图片自动旋转90度解决办法
http://blog.csdn.net/hitwhylz/article/details/39518463
- python正则表达式写[强口令检测]
关于正则表达式,如果想跟深入学习,建议您看一下<python 核心编程>(第三版)这本书,第一章的内容就是正则表达式. 关于我的学习,我在看<python编程快速上手>这本书第 ...
- mybatis学习 -每天一记 通用mapper 关于UUID回显的配置
在使用通用mapper插入数据UUID回显 在使用通用mapper插入数据时,发现主键没有回显,我这里的主键是UUID的,解决方案是:配置一个MapperScannerConfigurer. @Bea ...
- django之关联field 描述子是如何实现的
model定义时,每个field都是一个类属性,一个对象.在生成类时,属性有contribute_to_class的方法,会调用该方法. m2m field,它会先调用自己的contribute_to ...
- struts2注解json 配置文件json
java提供了便捷的Json-lib 类库,能够让我们很方便的将 Array / JavaBean / Map 解析成 JSON 串,当然反之也是可以的. struts2借助于json-lib类库, ...
- RabbitMQ的安装与配置
一.安装环境 CentOS6.3 64位操作系统. 二.安装文件 1.安装erlang:Rabbitmq是基于erlang语言开发的,所以先需要安装erlang:我选择的安装包是:erlang-17. ...