常用css属性 | vuvivian's blog

• [x]阴影[box-shadow:属性用于在元素的框架上添加阴影效果 ，该属性可设置的值包括，X偏移，Y偏移，阴影模糊半径，阴影扩散半径，和阴影颜色并以多个逗号分隔。

/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

• [x][反射]box-reflect:属性用于在某一个方向反射元素的内容。

  /* Direction属性定义方向 */
  -webkit-box-reflect: above;
  -webkit-box-reflect: below;
  -webkit-box-reflect: left;
  -webkit-box-reflect: right;
  
  /* Offset属性定义反射偏移的距离 */
  -webkit-box-reflect: below 10px;
  
  /* Mask属性定义遮罩图像 */
  -webkit-box-reflect: below 0 linear-gradient(transparent, white);
  
  /* 全局关键字 */
  -webkit-box-reflect: inherit;
  -webkit-box-reflect: initial;
  -webkit-box-reflect: unset;

• [x]transition：属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;

• [x]transform：属性定义了一系列应用于元素和元素子元素的变换规则集合。

@keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
    0%{
        transform: scale(1);  /*开始为原始大小*/
    }
    25%{
        transform: scale(1.5); /*放大1.1倍*/
    }
    50%{
        transform: scale(1);
    }
    75%{
        transform: scale(1.5);
    }
}

 .o_complex_bar_stay_icon_img{
    &:hover{
        // -webkit-animation-name: scaleDraw; /*关键帧名称*/
        // -webkit-animation-timing-function: ease; /*动画的速度曲线*/
        // -webkit-animation-iteration-count: 1;  /*动画播放的次数*/
        // -webkit-animation-duration: 1s; /*动画所花费的时间*/
        -webkit-animation: scaleDraw 3s ease-in 1;
    }
}