<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .main {

             position: absolute;

             width:300px;

             height:500px;

             background-color: fuchsia;

         }

         .content{

             position:absolute;

             width:50px;

             height:50px;

             background-color: red;

             animation: one 6s  infinite;

             /*transition: two 3s ease 0s;*/

         }

         .content1{

             position:absolute;

             width:50px;

             height:50px;

             background-color: yellow;

             border-radius: 50px;

             animation: two 3s ease 0s infinite;

         }

         .content2{

             position:absolute;

             width:50px;

             height:50px;

             background-color: dodgerblue;

             /*animation: three 3s ease 0s infinite;*/

             transition:all 2s;

             transition-delay:5s;

             /*transition-duration: 2s, 4s;*/

         }

         .content2:hover{

            height:300px;

             width:200px;

             transform: translateX(100px) translateY(100px) scale(0.8) rotate(360deg);

         }

         @keyframes one {

             0% {

                 transform:   rotate(0deg) ;

                 left:0px;

             }

             20%{

                 transform: rotate(50deg);

                 left:50px;

                 top:100px

             }

             60%{

                 transform:  rotate(180deg);

                 left:150px;

                 top:150px

             }

             100%{

                 transform:  rotate(360deg);

                 left:230px;

             }

         }

         @keyframes two {

             0% {

                 transform:   rotate(0deg) ;

                 left:0px;

                 width:100px;

             }

             20%{

                 transform: rotate(50deg);

                 left:50px;

                 top:250px;

                 width:120px;

             }

             60%{

                 transform:  rotate(180deg);

                 left:150px;

                 top:400px;

                 width:190px;

             }

             100%{

                 transform:  rotate(360deg);

                 left:250px;

                 width:300px;

             }

         }

         @keyframes three {

             0% {

                 transform:   rotate(0deg) ;

                 left:0px;

             }

             20%{

                 transform: rotate(50deg);

                 left:50px;

                 top:250px

             }

             60%{

                 transform:  rotate(180deg);

                 left:150px;

                 top:400px

             }

             100%{

                 transform:  rotate(360deg);

                 left:250px;

             }

         }

     </style>

 </head>

 <body>

 <div class="main">

     <div class="content"></div>

     <div class="content1"></div>

     <div class="content2"></div>

 </div>

 </body>

 </html>

animation,transition,transform小练习的更多相关文章

  1. animation transition transform

    animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 div{width:100px;height:100px;background:red;animation:move ...

  2. css transition transform animation例子讲解

    1.transition属性: transition属性是一个速记属性有四个属性:transition-property , transition-duration, transition-timin ...

  3. CSS製作動畫效果(Transition、Animation、Transform)

    CSS 2D Transforms https://www.w3schools.com/css/css3_2dtransforms.asp CSS 3D Transforms https://www. ...

  4. css动画(transition/transform/animation)

    在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...

  5. 049——VUE中使用animation与transform实现vue的动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. CSS的Animation&Transition&gradients属性

    ㈠Animation&Transition&gradients 代码示例 圆形,渐变颜色,旋转,当鼠标放在圆上,圆旋转变大 <!DOCTYPE html> <html ...

  7. 用C3中的animation和transform写的一个模仿加载的时动画效果

    用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...

  8. #8.12.16总结#background transition、animation、transform

    background-origin 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat此属性才会生效. background-origin :bord ...

  9. transform animation transition css3动画

    transform 定义   transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 值 应用  如果transform与transition联合起 ...

随机推荐

  1. 40-Ubuntu-用户管理-05-which查看命令所在位置

    which 查看执行命令所在的位置 例: 1.查看修改用户密码的命令--passwd所在位置 which passwd 注: /etc/passwd 是用于保存用户信息的文本文件. /usr/bin/ ...

  2. Centos下的 docker安装

    安装一些必要的系统工具:sudo yum install -y yum-utils device-mapper-persistent-data lvm2 添加软件源信息:sudo yum-config ...

  3. 前端实现预览ppt，word，xls，pdf文件

    1.前端实现pdf文件在线预览功能 ps:刚好工作上有这个需求,所以到处找了一下处理方案,大家有需要可以试一下这几种方案,找到合适自己的 方式一. pdf文件理论上可以在浏览器直接打开预览但是需要打开 ...

  4. Neo4j 小调研

    一. 概况: 在图计算中,基本的数据结构表达式是:G= ( V,E ),V=vertex( 节点 ),E=edge(边) .图数据库中数据模型主要以节点和关系(边)来体现,也可以处理键值对.数据具有如 ...

  5. 如何恢复误删的OneNote页面

    今天不小心把半个月的日记删掉了!(为了减少页面数量,每个月的日记会放在同一个页面上). 幸运的是OneNote有自动备份功能,喜极而泣. 操作方法来自微软支持 打开丢失了最近笔记的笔记本. 单击“文件 ...

  6. Mysql ibd恢复(delete 数据)

    转载:https://www.linuxidc.com/Linux/2017-05/143870.htm 首先呢,请各位注意Percona Data Recovery Tool for InnoDB工 ...

  7. 打开桌面上的图标就会弹出"打开些文件可能会对您的计算机有害"解决方案

    问题截图 方案步骤 运行 gpedit.msc 用户配置--管理模板--windows组件--附件管理器 找到中等危险文件类型抱含列表后右键-编辑 在指定中等风险扩展名中加入你文件的扩展名 应用, 确 ...

  8. PHP ftp_site() 函数

    定义和用法 The ftp_site() 函数向 FTP 服务器发送 SITE 命令. SITE 命令没有标准化,在不同的服务器上不尽相同.对于处理文件权限或组关系方面的事情,SITE 命令很有用. ...

  9. PHP PDO 大对象 (LOBs)

    应用程序在某一时刻,可能需要在数据库中存储"大"数据. "大"通常意味着"大约 4kb 或以上",尽管某些数据库在数据达到"大&q ...

  10. NOIp2018集训test-10-15 (bike day1)

    B 君的第一题 求斐波那契数列模n的循环节. 1.暴力bsgs,毕姥爷好像说循环节最大是6*n还是多少的,反之比较小,直接bsgs这题是可以过的.但是我非常蠢重载运算符的时候把相等返回成了小于,然后根 ...