zoukankan      html  css  js  c++  java
  • 19 01 04 CSS3 圆角 grba(带通明的) tansition动画 transform变换 animation动画

    CSS3圆角

    设置某一个角的圆角,比如设置左上角的圆角:
    border-top-left-radius:30px 60px;

    同时分别设置四个角: border-radius:30px 60px 120px 150px;

    设置四个圆角相同:
    border-radius:50%;

    rgba(新的颜色值表示法)

    2、rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度

    CSS3 transition动画

    1、transition-property 设置过渡的属性,比如:width height background-color
    2、transition-duration 设置过渡的时间,比如:1s 500ms
    3、transition-timing-function 设置过渡的运动方式,常用有 linear(匀速)|ease(缓冲运动)
    4、transition-delay 设置动画的延迟
    5、transition: property duration timing-function delay 同时设置四个属性

    CSS3 transform变换

    1、translate(x,y) 设置盒子位移
    2、scale(x,y) 设置盒子缩放
    3、rotate(deg) 设置盒子旋转
    4、skew(x-angle,y-angle) 设置盒子斜切
    5、perspective 设置透视距离
    6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
    7、translateX、translateY、translateZ 设置三维移动
    8、rotateX、rotateY、rotateZ 设置三维旋转
    9、scaleX、scaleY、scaleZ 设置三维缩放
    10、tranform-origin 设置变形的中心点
    11、backface-visibility 设置盒子背面是否可见

    CSS3 animation动画

    1、@keyframes 定义关键帧动画
    2、animation-name 动画名称
    3、animation-duration 动画时间
    4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
    5、animation-delay 动画延迟
    6、animation-iteration-count 动画播放次数 n|infinite
    7、animation-direction 动画结束后是否反向还原 normal|alternate
    8、animation-play-state 动画状态 paused(停止)|running(运动)
    9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
    10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

  • 相关阅读:
    《网络对抗技术》exp7 网络欺诈防范
    《网络对抗技术》exp6 MSF基础应用
    《网络对抗技术》exp5 信息搜集与漏洞扫描
    《网络对抗技术》exp4 恶意代码分析
    《网络对抗技术》Exp3 免杀原理与实践
    《网络对抗技术》exp2 简单后门
    k8s弹性伸缩
    python常见算法
    JavaScript 中创建对象的方法(读书笔记思维导图)
    JavaScript 中的闭包和作用域链(读书笔记)
  • 原文地址:https://www.cnblogs.com/fromlantianwei/p/10219248.html
Copyright © 2011-2022 走看看