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网页动画的更多相关文章

  1. CSS3 @keyframes 动画

    CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...

  2. html5网页动画总结--jQuery旋转插件jqueryrotate

    CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...

  3. 11款样式新颖的 jQuery/CSS3 网页菜单

    今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...

  4. css3 实现动画

    CSS3,我们可以创建动画,它可以取代许多网页动画图像,例如下面这个小球动画 使用css3关键帧动画可以轻松实现 请看下面代码 <!DOCTYPE html> <html lang= ...

  5. 8款极具表现力的jQuery/CSS3网页菜单

    上一篇我向大家分享了7款效果震憾的HTML5应用组件,今天主要来分享一下CSS3网页菜单,因为在一个网站中,菜单起着举足轻重的作用,所以作为WEB开发人员,我们有必要将网站的菜单设计得尽量完美,下面向 ...

  6. 使用css3的动画模拟太阳系行星公转

    本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...

  7. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  8. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  9. 15个前卫的 HTML5 & CSS3 网页设计作品

    今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站.在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例. 响应式设计和基于 HTML5 & CSS3 编码的网 ...

随机推荐

  1. 使用K-means进行聚类,用calinski_harabaz_score评价聚类效果

    代码如下: """ 下面的方法是用kmeans方法进行聚类,用calinski_harabaz_score方法评价聚类效果的好坏 大概是类间距除以类内距,因此这个值越大越 ...

  2. Android 开发 PopupWindow弹窗

    简介 PopupWindow,顾名思义弹窗.PopupWindow是与AlertDialog在形式上类似的弹窗功能,都是为了在activity最上层显示一个弹窗.但是区别是PopupWindow可以自 ...

  3. Vue.js中记不住 的东西

    给样式背景赋值: :style="{backgroundImage:'url(' + otherInfo.head_image + ')'}" <img :src=" ...

  4. Convert Adjacency matrix into edgelist

    Convert Adjacency matrix into edgelist import numpy as np #read matrix without head. a = np.loadtxt( ...

  5. iOS开发- 相机(摄像头)获取到的图片自动旋转90度解决办法

    http://blog.csdn.net/hitwhylz/article/details/39518463

  6. python正则表达式写[强口令检测]

    关于正则表达式,如果想跟深入学习,建议您看一下<python 核心编程>(第三版)这本书,第一章的内容就是正则表达式. 关于我的学习,我在看<python编程快速上手>这本书第 ...

  7. mybatis学习 -每天一记 通用mapper 关于UUID回显的配置

    在使用通用mapper插入数据UUID回显 在使用通用mapper插入数据时,发现主键没有回显,我这里的主键是UUID的,解决方案是:配置一个MapperScannerConfigurer. @Bea ...

  8. django之关联field 描述子是如何实现的

    model定义时,每个field都是一个类属性,一个对象.在生成类时,属性有contribute_to_class的方法,会调用该方法. m2m field,它会先调用自己的contribute_to ...

  9. struts2注解json 配置文件json

    java提供了便捷的Json-lib  类库,能够让我们很方便的将 Array / JavaBean / Map 解析成 JSON 串,当然反之也是可以的. struts2借助于json-lib类库, ...

  10. RabbitMQ的安装与配置

    一.安装环境 CentOS6.3 64位操作系统. 二.安装文件 1.安装erlang:Rabbitmq是基于erlang语言开发的,所以先需要安装erlang:我选择的安装包是:erlang-17. ...