zoukankan      html  css  js  c++  java
  • css特效基础

    css特效基础

    CSS 径向渐变

    径向渐变由其中心定义。

    如需创建径向渐变,您还必须定义至少两个色标。

    语法

    background-image: radial-gradient(shape size at position, start-color, ..., last-color);
    

    默认地,shape 为椭圆形,size 为最远角,position 为中心。

    旋转变形2D

    将transform属性的值设置为rotate(),即可实现旋转变形

    transform:rotate(45deg)旋转45度,角度正顺时针,角度负逆时针

    可以使用transform-origin属性设置自己的自定义变换原点

    缩放变形2D

    将transform属性的值设置为scale(),即可实现缩放变形,表示缩放倍数,当数值小于1时,表示缩小元素;大于1表示放大元素

    斜切变形2D

    将transform属性的值设置为skew(),即可实现斜切变形

    transform:skew(10deg, 20deg);

    x,y斜切角度

    位移变形2D

    将transform属性的值设置为translate(),即可实现位移变形,表示x,y移动多少像素

    和相对定位很像

    3D旋转

    将transform属性的值设置为rotateX( )或者rotateY(),即可实现绕横轴、纵轴旋转

    perspective属性用来定义透视强度,可以理解为“人眼到舞台的距离”,单位是px

    (外部盒子必须设置perspective)

    动画过渡

    过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。

    transition: width 1s linear 0S;

    width属性参与过渡 过渡时长 变化速度曲线 延长时间(多久开始)

    所有数值类型的属性,都可以参与过渡,比如width、height、left、 top、 border-radius

    背景颜色和文字颜色都可以被过渡

    all表示所有属性参与过渡

    transition- property
    哪些属性要过渡
    trans ition-duration
    动画时间
    动画变化曲线(缓动效果)
    transition-delay
    延迟时间

  • 相关阅读:
    JavaScript闭包 懂不懂由你反正我是懂了
    浅析对象访问属性的"."和"[]"方法区别
    PHP:6种GET和POST请求发送方法
    ArcThemALL!5.1:解压、脱壳、压缩样样精通
    nw.exe开发DEMO下载
    解析Javascript事件冒泡机制
    node.js之fs模块
    Node.js读取文件内容
    php-编译模块1
    jenkins--使用命令行自动启动Jenkins的job
  • 原文地址:https://www.cnblogs.com/yxyc/p/14939726.html
Copyright © 2011-2022 走看看