动画及阴影

Posted zhouhai007

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了动画及阴影相关的知识,希望对你有一定的参考价值。

.拼接网页

  将区域整体划分起名 => 对其他区域布局不产生影响
  
提出公共css => reset操作
  
当有区域发送显示重叠(脱离文档流导致的), 需要通过z-index调整层级
  
一定需要最外层,且最外层做自身布局时,不要做过多布局操作

.过渡(动画)

  transition属性

  transition: 过渡时间(必须) 延迟时间(一般不设) 过渡属性(一般采用all默认值) 过渡曲线(贝赛尔曲线)(cubic-bezier())

  过渡属性具体设置给初始状态还是第二状态根据具体需求

  过渡的持续时间: transition-duration: 2s;

  延迟时间: transition-delay: 50ms;

  过渡属性:单一属性 | 属性1, ..., 属性n | all

  transition-property: all;

  过渡曲线: cubic-bezier() | ease | ease-in | ease-out | ease-in-out | linear

  transition-timing-function: cubic-bezier(0, 2.23, 0.99, -1.34);

三.阴影

  x轴偏移量   y轴偏移量   虚化程度   阴影宽度  阴影颜色

  box-shadow: 0 0 10px  10px  black;

  一个盒子可以设置多个阴影, 每一套阴影间用逗号隔开

  box-shadow: 0 -10px 10px -5px black, 0 10px 10px -5px black;

四.伪类实现边框

自身需要定位
.box {
    position: relative;
}
伪类通过定位来完成图层的布局
.box:before {
    content: "";
    /*完成布局*/
    position: absolute;
    top: 10px;
    left: 0;
    /*构建图层*/
    width: 1px;
    height: 100px;
    background-color: black;
}
.box:after {
    content: "";
    position: absolute;
    width: 100px;
    height: 1px;
    background-color: black;
    top: 0;
    left: 10px;
}

























以上是关于动画及阴影的主要内容,如果未能解决你的问题,请参考以下文章

ListRowPresenter 禁用阴影禁用视图重叠

前端之动画与阴影

css有用的代码片段

动画文本阴影淡入和淡出

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段7——CSS动画