阴影介绍
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;
}
}
网友评论