丸子学CSS （学习半小时 - 阴影应用）

阴影介绍

box-shadow: h-shadow v-shadow blur spread color inset;

● h-shadow：必填参数，设置阴影水平方向的偏移量，可以为负值；
● v-shadow：必填参数，设置阴影垂直方向的偏移量，可以为负值；
● blur：可选参数，设置模糊的半径，值越大，模糊越大，阴影的边缘越模糊，不允许使用负值；
● spread：可选参数，设置阴影的尺寸；
● color：可选参数，设置阴影的颜色；
● inset：可选参数，将默认的外部阴影 (outset) 改为内部阴影。

练习

两边浮脚

.box1{
    border-radius: 4px;
}
.box1::before{
    content:  "";                          
    position: absolute;
    bottom: 15px;
    left: 8px;
    z-index: -3;
    width: 50%;
    height: 20%;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.7);
    transform: rotate(-3deg);
}
.box1::after{
    content:  "";                          
    position: absolute;
    bottom: 15px;
    right: 8px;
    z-index: -3;
    width: 50%;
    height: 20%;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.7);
    transform: rotate(3deg);
}

两边翘脚

.box2{
    border-radius: 0 0 130px 130px/ 0 0 5px 5px;
}
.box2::before{
    content: "";
    position: absolute;
    width: 90px;
    height: 30px;
    left: 20px;
    bottom: 19px;
    z-index: -3;
    transform: skew(-8deg) rotate(-4deg);
    box-shadow: 0 0 8px 16px rgba(0,0,0,.4);
}
.box2::after{
    content: "";
    position: absolute;
    width: 90px;
    height: 30px;
    right: 20px;
    bottom: 19px;
    z-index: -3;
    transform: skew(8deg) rotate(4deg);
    box-shadow: 0 0 8px 16px rgba(0,0,0,.4);
}

倒影

.box3::before{
    content: "";
    position: absolute;
    z-index: -5;
    bottom: 24px;
    left: 13px;
    width: 0px;
    height: 0px;
    box-shadow: 0 -10px 6px 30px rgba(0,0,0,.5);
    transform: skew(35deg);
}

单边浮起翘脚

.box4{
    border-radius: 0 0 130px 0 / 0  0 10px 0;
}
.box4::before{
    content: "";
    position: absolute;
    left: 36px;
    bottom: 20px;
    z-index: -4;
    width: 723px;
    height: 0px;
    background: pink;
    box-shadow: 0 0 10px 30px rgba(0,0,0,.6);
    transform: skew(-18deg);
}

多个阴影

box-shadow 属性也可以同时设定多组阴影效果，每组之间使用逗号分隔，定义的多组阴影效果会按照定义顺序依次罗列，第一个阴影在最上面，以此类推

1) 云彩案例

.cloud {
    margin: 200px;
    width: 80px;
    height: 80px;
    background: #35c0f7;
    box-shadow: -50px 0px 0 -5px #35c0f7,
        -10px -40px 0 -5px #35c0f7,
        30px -30px 0 -10px #35c0f7,
        70px -46px 0 -5px #35c0f7,
        120px -16px 0 -2px #35c0f7,
        67px 8px 0 3px #35c0f7;
    border-radius: 50%;
    opacity: .8;
    animation: move 2s linear infinite alternate;
}
@keyframes move {
    0%{
        transform: translate(0);
    }
    100% {
        transform: translate(300px);
    }
}

2) 动态阴影案例

.box{
  margin: 100px auto;
  position: relative;
  width: 140px;
  height: 300px;
}

.box1{
  width: 140px;
  height: 140px;
  background: rgb(187,187,187);
  box-shadow: 0 -5px 15px rgba(255,255,255,0.4) inset,-2px -1px 42px rgba(0,0,0,0.5) inset, 0  0 3px 1px rgba(0,0,0,0.5);
  border-radius: 50%;
  position: absolute;
  top: 2px;
  animation: jump 1s infinite ;
}
.box1::after{
  content: "";
  width: 100px;
  height: 60px;
  position: absolute;
  left: 50%;
  top: 20px;
  margin-left: -50px;

  background: linear-gradient(to top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
  border-radius: 50%;
}
.box2{
  width: 60px;
  height: 75px;
  margin-left: -30px;
  background: rgba(20, 20, 20, .1);
  box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
  border-radius: 30px / 40px;
  position: absolute;
  left: 50%;
  bottom: 2px;
  z-index: -8;
  transform: scaleY(.3);
  animation: shrink 1s infinite;
}
@keyframes jump {
0% {
  top: 0;
  animation-timing-function: ease-in;
}

50% {
  top: 140px;
  height: 140px;
  animation-timing-function: ease-out;
}

55% {
  top: 160px; 
  height: 120px; 
  border-radius: 70px / 60px;
  animation-timing-function: ease-in;
}

65% {
  top: 120px; 
  height: 140px; 
  border-radius: 70px;
  animation-timing-function: ease-out;
}

95% {
  top: 0;       
  animation-timing-function: ease-in;
}

100% {
  top: 0;
  animation-timing-function: ease-in;
}
}

@keyframes shrink {
0% {
  bottom: 0;
  margin-left: -30px;
  width: 60px;
  height: 75px;
  background: rgba(20, 20, 20, .1);
  box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
  border-radius: 30px / 40px;
  animation-timing-function: ease-in;
}

50% {
  bottom: 30px;
  margin-left: -10px;
  width: 20px;
  height: 5px;
  background: rgba(20, 20, 20, .3);
  box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
  border-radius: 20px / 20px;
  animation-timing-function: ease-out;
}

100% {
  bottom: 0;
  margin-left: -30px;
  width: 60px;
  height: 75px;
  background: rgba(20, 20, 20, .1);
  box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
  border-radius: 30px / 40px;
  animation-timing-function: ease-in;
}
}