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
    延迟时间

  • 相关阅读:
    重新看待Jar包冲突问题及解决方案
    一步步完成Maven+SpringMVC+SpringFox+Swagger整合示例
    [ACM] POJ 1611 The Suspects (并查集,输出第i个人所在集合的总人数)
    James Whittaker的软件測试戒律(二)
    <html>
    andorid ndk 各种坑啊 记录下
    Android的ProgressBar进度条-android学习之旅(三十一)
    Android Jsoup 爬取网页数据
    iOS笔记UI--使用storyboard加入约束
    使用appledoc 生成技术API文档具体解释
  • 原文地址:https://www.cnblogs.com/yxyc/p/14939726.html
Copyright © 2011-2022 走看看