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 实现正在加载的圆形,翻页效果

动画旋转

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6. @-webkit-keyframes circle /* Safari and Chrome */
  7. {
  8. to{transform:rotate(1turn);}
  9. }
  10.  
  11. @keyframes circle{
  12. to{transform:rotate(1turn);}
  13. }
  14. .ball{
  15. position: absolute;
  16. top:50%;
  17. left: 50%;
  18. width: 50px;
  19. height: 50px;
  20. background: red;
  21. transform-origin:150% center;// transform-origin:250% center;//偏移轴心
  22. animation:circle 1s infinite linear;
  23. -webkit-animation:circle 1s infinite linear;
  24. }
  25.  
  26. </style>
  27. </head>
  28. <body>
  29. <div class="ball"></div>
  30. </body>
  31. </html>

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

摆钟效果:

  1. .ball{
  2. transform-origin:center top;
  3. animation:sway 2.2s infinite alternate ease-in-out
  4. }
  5. @keyframes sway{
  6. to{transform:rotate(30deg);
  7. }

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. [HAOI2012] 容易题

    有一个数列A已知对于所有的A[i]都是1~n的自然数,并且知道对于一些A[i]不能取哪些值,我们定义一个数列的积为该数列所有元素的乘积,要求你求出所有可能的数列的积的和 mod 1000000007的 ...

  2. ios 工程配置统一增加类的前缀(知识点也只能算知识点)

    在前边的代码规范中提及:团队开发或者个人开发为了打包或者自己工程中避免创建新的类核第三方系统的重复增加类的统一前缀!!又很多人问我这种开发小技巧.下面我就普及一下: 1.首先选中你的工程配置 2.然后 ...

  3. JAVA的反射机制原理

    http://www.cnblogs.com/hongxinlaoking/p/4684652.html 一  反射机制的概念: 指在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法,对于 ...

  4. SAP生产订单状态

    SAP系统的常见订单状态如下: ·        CRTD (创建):标识生产订单刚刚创建,此时禁止做后续发料和报工确认等操作: ·        PREL (部分下达):当生产订单部分下达时,如仅下 ...

  5. java中synchronized使用方法

    synchronized的一个简单样例 public class TextThread { /**  * @param args  */ public static void main(String[ ...

  6. 分布式助手Zookeeper(二)

    分布式助手Zookeeper(二)博客分类: Zookeeper zookeeperzookeeper的安装和配置观察者observer 散仙在上篇文章介绍了,zookeeper的一系列基础知识,如果 ...

  7. Java bit、byte、位、字节、汉字、字符

    package com.suypower.chengyu.test; public class ByteTest { /** * byte 8 bits -128 - + 127 * 1 bit = ...

  8. pixel实践

    安装pixel .安装node.js wget http://nodejs.org/dist/v0.6.1/node-v0.6.1.tar.gz 本地测试下载的是这个版本,如果要高版本的话可以找高版本 ...

  9. 判断app是否在后台

    1.通过RunningTaskInfo类判断(需要额外权限):(测试通过5.1可用,权限名称修改 <uses-permission android:name="android.perm ...

  10. Android开发之从网络URL上下载JSON数据

    网络下载拉取数据中,json数据是一种格式化的xml数据,非常轻量方便,效率高,体验好等优点,下面就android中如何从给定的url下载json数据给予解析: 主要使用http请求方法,并用到Htt ...