美文网首页
过渡动画、圆角、阴影、透明度

过渡动画、圆角、阴影、透明度

作者: 姓高名旭升 | 来源:发表于2018-12-01 15:45 被阅读0次

    1.transition 过渡
    2.border-radius 圆角
    /水平偏移 垂直偏移 羽化大小 扩展大小 颜色/
    3.box-shadow 阴影
    4.rgba(前三个数值表示颜色,最后一个表示颜色的透明度(0-1))


    变形

    1.transform变换
    2.translate(x,y)设置盒子位移
    3.scale(x,y)设置盒子缩放
    4.skew(x-angle,y-angle)设置盒子斜切
    5.rotate(360deg)设置盒子旋转
    设置平缓过渡效果transition:all 1s ease;


    animation动画

    1.@keyframes 定义关键帧动画
    2.animation-delay 动画延迟
    3.alternate 原路返回
    4.infinite 无限次
    5.animation-play-state: paused 停止
    6.animation-play-state: running 开始
    7.forwards 结束时抻开状态

    • linear 匀速
    • ease 开始和结束慢速
    • ease-in 开始时慢速
    • ease-out 结束时慢速
    • steps 动画步数

    相关文章

      网友评论

          本文标题:过渡动画、圆角、阴影、透明度

          本文链接:https://www.haomeiwen.com/subject/fjhrcqtx.html