zoukankan      html  css  js  c++  java
  • CSS3动画

    Css3的变换/变形

       平移、旋转、缩放、倾斜效果

     样式属性:  Transform

           /*平移*/
                /* transform: translate(100px,100px); */
                /* 缩放 */
                /* transform: scale(1.2); */
                /* 旋转 */
                /* transform: rotate(180deg); */
                /* 倾斜 */
                /* transform: skew(20deg,30deg);
                */
                /* 设置奇点 */
                transform-origin: 20% 40%;

    Hack: -浏览器内核名-样式属性(都要使用)

       IE浏览器:   -ms-           Chrome/Safari:  -webkit-

       火狐浏览器: -moz-        欧朋浏览器: -o-

    div
    {
    transform:rotate(7deg);
    -ms-transform:rotate(7deg);     /* IE 9 */
    -moz-transform:rotate(7deg);     /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
    -o-transform:rotate(7deg);     /* Opera */
    }

    Css3过渡

    样式属性:Transition:

    语法:transition: property duration timing-function delay;

      使用过渡:  transition-property  常用all

      过渡时间: transition-duration属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。transition-duration:5s

      过渡速度: 时间曲线transition-timing-function 属性规定过渡效果的速度曲线。常用: linear  匀速

      设置延时:transition-delay 属性规定过渡效果何时开始。transition-delay 值以秒或毫秒计。

    Csss3动画

    @keyframes : 设置关键帧

      0%  开始点

      100% 结束点

      from 等同于0%

      To 等于100%

     /* 定义一个动画 */
            @keyframes mymove1 {
                0%{left:0px;100px; background-color: orange; height: 100px;} 
                50%{
                   left:300px; 300px; background-color: red; height: 300px;
                }
                100%{
                   left:0px; 100px; background-color: green; height: 100px;
                }
            }
    
            .box{
                border-radius: 50%;
                /*使用动画*/
                animation: mymove1 5s infinite;
                position: relative;
    
            }

    播放次数:n  /  infinite无线循环

  • 相关阅读:
    ftp上传下载
    java生成xml
    Java:删除某文件夹下的所有文件
    java读取某个文件夹下的所有文件
    JFileChooser 中文API
    得到java异常printStackTrace的详细信息
    关于SQL命令中不等号(!=,<>)
    ABP前端保存notify提示在Edge浏览器显示null
    关于MY Sql 查询锁表信息和解锁表
    VS2019 backspace键失效,无法使用
  • 原文地址:https://www.cnblogs.com/64Byte/p/12546261.html
Copyright © 2011-2022 走看看