<!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. violet

    操作系统的发展史 1.穿孔卡片 一个计算机机房一次只能被一个卡片使用 缺点:cpu的利用率低 2.联机批处理系统 支持多用户去使用一个计算机机房 3.脱机批处理系统 告诉磁盘 提高文件的读取速度 优点 ...

  2. 如何在react中实现一个table切换？

    废话不说,直接贴代码,供新手参考 <!DOCTYPE html> export default class TabComponent extends Component { constru ...

  3. 压缩与解压缩 gzip bzip2 tar 命令

    gzip压缩与解压缩 命令  gzip -v   解压缩 gzip-d 操作如下. 压缩 .可以看到源文件有5171大小,压缩后,变成了1998大小. 解压缩 .解压缩之后可以看到,原来的man_db ...

  4. centos7.x部署php7.0、mysql

    1.安装httpd yum install httpd systemctl start httpd.service #启动命令 systemctl stop httpd.service #停止命令 s ...

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

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

  6. Thinkphp 3.2 去掉index.php

    1.httpd.conf中去掉LoadModule rewrite_module modules/mod_rewrite.so 前面的#号 2.httpd.conf 中  AllowOverride ...

  7. TYVJ1061 Mobile Service

    P1061 Mobile Service 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 一个公司有三个移动服务员.如果某个地方有一个请求,某个员工必须赶到那 ...

  8. NX二次开发-UFUN由工程图视图tag获取图纸页tag UF_DRAW_ask_drawing_of_view

    #include <uf.h> #include <uf_draw.h> #include <uf_drf.h> #include <uf_obj.h> ...

  9. NX二次开发-UFUN创建表达式UF_MODL_create_exp无TAG

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> UF_initialize(); //创建一个新的表达式,无TAG UF_MOD ...

  10. （转）基于SAML的单点登录介绍

    转:http://www.cnblogs.com/zsuxiong/archive/2011/11/19/2255497.html 一.背景知识: SAML即安全断言标记语言,英文全称是Securit ...