3个属性：transition,animation,transform

实现步骤：

1.css定位 2.rgba设置颜色透明度 3.转换＋动画 transform＋animation 4.动画平滑过渡 transition

========================美丽分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

animation-delay

!transform 移动 translate(npx,mpx), 缩放 scale[XY](.n) , 倾斜 skew(ndeg), 旋转 rotate[XYZ](ndeg) 或者rotate(1turn)

border 实现正在加载的圆形，翻页效果

动画旋转

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

    @-webkit-keyframes circle /* Safari and Chrome */

    {

        to{transform:rotate(1turn);}

    }

    @keyframes circle{

        to{transform:rotate(1turn);}

    }

    .ball{

        position: absolute;

        top:50%;

        left: 50%;

        width: 50px;

        height: 50px;

        background: red;

        transform-origin:150% center;// transform-origin:250% center;//偏移轴心

        animation:circle 1s infinite linear;

        -webkit-animation:circle 1s infinite linear;

    }

    </style>

</head>

<body>

    <div class="ball"></div>

</body>

</html>

椭圆效果:就是外层加一个div设置多一个动画上下移动的动画 transform:scaleY(200):设置y轴的值缩放转换

摆钟效果:

.ball{

 transform-origin:center top;

 animation:sway 2.2s infinite alternate ease-in-out

}

@keyframes sway{

 to{transform:rotate(30deg);

}

css动画怎么写：3个属性实现的更多相关文章

  1. 【CSS】css动画及过渡和变换属性

    1.css动画 创建一个动画: @keyframes name{ //动画名字 0% { //动画开始 transform: translateY(0); } 100% { //动画结束 transf ...

  2. CSS字体连写及外观属性

    一.font:字体连写 使用font属性时,必须按以下语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开.注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-f ...

  3. web前端学习（三）css学习笔记部分（8）-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

  4. CSS动画总结与呼吸灯效果

    首先,先介绍一下主要用到的css属性:animation,text-shadow. text-shadow就不再介绍了,上一篇已经详细介绍了用法.这里先介绍一下animation属性. 1.anima ...

  5. CSS动画复习

    一.css动画相关的几个属性 属性 含义 理解 transform 一种CSS属性.用于修改CSS视觉格式模型的坐标空间.使用它,元素可以被移动(translate).旋转(rotate).缩放(sc ...

  6. css动画-animation各个属性详解（转）

    CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...

  7. css动画属性性能

    性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...

  8. CSS动画属性性能详细介绍

    CSS动画属性会触发整个页面的重排relayout.重绘repaint.重组recomposite Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐 ...

  9. js监听指定元素的css动画属性

    MDN 监听css动画,开始,迭代次数,结束,中断 回调函数返回 animationEvent属性 <!DOCTYPE html> <html> <head> &l ...

随机推荐

  1. Objective-C中一种消息处理方法performSelector: withObject:

    Objective-C中调用函数的方法是“消息传递”,这个和普通的函数调用的区别是,你可以随时对一个对象传递任何消息,而不需要在编译的时候声明这些方法.所以Objective-C可以在runtime的 ...

  2. setvbuf

    函数名: setvbuf 用 法: int setvbuf(FILE *stream, char *buf, int type, unsigned size); type : 期望缓冲区的类型: _I ...

  3. linux启动的过程

    总结一下,linux的开机整个流程. · 1: 启动电源后,主机第一步先做的就是查询BIOS(全称:basic input/output system 基本输入输出系统)信息.了解整个系统的硬件状态, ...

  4. jQuery动态实现title的修改 失效问题

    最近做了一个网站,一切都很顺利,在上线的时候,突然发现一个严重的问题,开始面对这个问题,完全不知所措(在goole.火狐.IE9及其以上都没得问题:IE8及其低版本都失效)只是浏览器弹出一个bug,但 ...

  5. “DBUtility.DbHelperSQL”的类型初始值设定项引发异常 “DBUtility.DbHelperSQL”的类型初始值设定项引发异常

    今天遇到了一个这样的问题“DBUtility.DbHelperSQL”的类型初始值设定项引发异常“DBUtility.DbHelperSQL”的类型初始值设定项引发异常 也许有和我遇到这问题的人也在这 ...

  6. iOS之Sqlite和FMDB

    在iOS 开发中,总会用到数据库的操作,来实现增.删.改.查. 尤其是查询. 一旦涉及到查询的操作,那就非得用数据库不可了.   SQLite (http://www.sqlite.org/docs. ...

  7. 提升资源利用率的MapReduce框架

    Hadoop系统提供了MapReduce计算框架的开源实现,像Yahoo!.Facebook.淘宝.中移动.百度.腾讯等公司都在借助 Hadoop进行海量数据处理.Hadoop系统性能不仅取决于任务调 ...

  8. 虚拟机及ubuntu环境搭建问题

    1.现象: VMware中ubuntu ping通 宿主机windows VMware中ubuntu ping通 百度 宿主机windows ping不通 VMware中ubuntu 解决办法: 确保 ...

  9. 20160410javaweb之JDBC---DBUtils框架

    DBUtils 1.DbUtils 工具类 2.QueryRunner -- 两行代码搞定增删改查 (1)QueryRunner() --需要控制事务时,使用这组方法 int update(Conne ...

  10. C#微信公众号开发 -- （五）自定义菜单创建

    公众号中,底部都是有自己定义的功能按钮,通过点击某个按钮来实现指定的业务逻辑操作. 下面就来说说这些按钮是怎样放到微信公众平台的,还是先来看看微信的官方解释: 请注意: 1.自定义菜单最多包括3个一级 ...