<!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. Spring Boot跨域问题解决方案

    @Configurationpublic class CorsConfig { @Bean public FilterRegistrationBean corsFilter() { UrlBasedC ...

  2. 调用API接口，查询手机号码归属地（1）

    使用https://www.juhe.cn/提供的接口,查询归属地 在官网注册key即可使用. 代码如下 #!/usr/bin/python # -*- coding: utf-8 -*- impor ...

  3. Rsync 恢复 libselinux.SO.1

    libselinux.SO.1  这个文件对 CentOS 7很重要, 误删掉后,会导致很多命令无法使用(比如yum ,rpm  命令),利用rsync这个工具来修复. 服务端执行如下配置:(选取正常 ...

  4. leetcode.数组.27移除元素-Java

    1. 具体题目 给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度.不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空 ...

  5. springfox-swagger原理解析与使用过程中遇到的坑

    swagger简介 swagger确实是个好东西,可以跟据业务代码自动生成相关的api接口文档,尤其用于restful风格中的项目,开发人员几乎可以不用专门去维护rest api,这个框架可以自动为你 ...

  6. Excel_VBA 常用代码

    单元格编辑后改变背景色(6号,355832828) Dim oldvalue As Variant Private Sub Worksheet_Change(ByVal Target As Range ...

  7. <%#Eval() %>的常用方法

    <%# %>用于数据绑定,通常是用在数据源控件里,比如GridView,Repeater等. 1.绑定Repeater 基础用法 <%# Eval("DriverName& ...

  8. ElementUI的Loading组件 —— 想实现在请求后台数据之前开启Loading组件，请求成功或失败之后，关闭Loading组件

    我在实际项目开发中,遇到了这个需求,记录一下~~~~~~ 在ElementUI官网上有几种实现Loading的方法,但官网上是在一个方法里写了开启与关闭组件,所以可以根据官网的实现方法进行一个封装,便 ...

  9. python_django_静态文件

    什么是静态文件? 是django中用于存放css,js,图片,json文件,字体文件等的文件,使代码更好管理. 1.配置 https://www.cnblogs.com/Vera-y/p/114923 ...

  10. vue实现curd功能

    一.实现效果 二.实现 (一)实现增加用户功能 Vuserlist组件中 <template> <div class="panel panel-default"& ...