css好看的图片投影,css3常见好看的投影效果_css3阴影box-shadow高大上用法

在设计图会经常使用到的阴影效果，如何用css3来实现呢？这篇文章主要整理box-shadow的一些好看常用的投影效果。

1、曲面/椭圆投影效果:

代码如下：

.shadow_wrap{

width: 100%;background:#E6EEF6;max-width: 600px;margin: auto;overflow: hidden;

}

.shadow1{

background-color: #9ecf68;

}

.shadow2{

background-color: #00bcd4;

}

.shadow1,.shadow2{

position:relative;

width:40%;

height:200px;

float:left;

margin:5% 15px;

border-radius:5px;

box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;

}

.shadow_wrap h3{

width:87%;

height:100px;

margin-left:6%;

text-align:center;

padding-top:60px;

color:#fff;

}

/**styling shadows**/

.shadow1:before, .shadow1:after{

position:absolute;

content:"";

bottom:12px;left:15px;top:80%;

width:45%;

background:#9B7468;

z-index:-1;

-webkit-box-shadow: 0 20px 15px #9B7468;

-moz-box-shadow: 0 20px 15px #9B7468;

box-shadow: 0 20px 15px #9B7468;

-webkit-transform: rotate(-6deg);

-moz-transform: rotate(-6deg);

transform: rotate(-6deg);

}

.shadow1:after{

-webkit-transform: rotate(6deg);

-moz-transform: rotate(6deg);

transform: rotate(6deg);

right: 15px;left: auto;

}

.shadow2:before, .shadow2:after{

position:absolute;

content:"";

top:100px;bottom:5px;left:30px;right:30px;

z-index:-1;

box-shadow:0 0 40px 13px #486685;

border-radius:100px/20px;

}

椭圆投影1

椭圆投影2

豌豆资源搜索网站https://55wd.com

2、悬浮投影效果:

悬浮投影

实现代码：

.shadow_wrap{

margin-top: 50px; margin-bottom: 10px;

}

.floating {

width:60%;max-width: 180px; height: 150px;line-height: 150px; background: #ff9800;color:#fff;text-align: center;cursor: pointer;

position: relative;transform: translateY(0);transition: transform 1s;

}

.floating:after {

content: "";

display: block;

position: absolute;

bottom: -30px;

left: 50%;

height: 8px;

width: 100%;

box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);

border-radius: 50%;

background-color: rgba(0, 0, 0, 0.2);

transform: translate(-50%, 0);

transition: transform 1s;

}

/*鼠标移上去的效果*/

.floating:hover {

transform: translateY(-40px);

transition: transform 1s;

}

.floating:hover:after {

transform: translate(-50%, 40px) scale(0.75);

transition: transform 1s;

}

悬浮投影

3、3D文字投影效果:

3D效果-fly63.com

代码如下：

width:100%;color: #fff;

text-shadow: 0 1px 0 hsl(174,5%,80%),0 2px 0 hsl(174,5%,75%),0 3px 0 hsl(174,5%,70%),0 4px 0 hsl(174,5%,66%),0 5px 0 hsl(174,5%,64%),0 6px 0 hsl(174,5%,62%),0 7px 0 hsl(174,5%,61%),0 8px 0 hsl(174,5%,60%),0 0 5px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.2),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.2),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.3);

}

3D效果-fly63.com

4、动画投影效果:

fly63

代码如下：

font-family: ‘Righteous‘, serif;

margin:0;

position: relative;

display: inline-block;

color: #61d9a8;

font-size: 8em;

text-shadow: .03em .03em 0 hsla(230,40%,50%,1);

}

.shadow_wrap h1:after {

content: attr(data-shadow);

position: absolute;

top: .06em; left: .06em;

z-index: -1;

text-shadow: none;

background-image:linear-gradient(45deg,transparent 45%,hsla(48,20%,90%,1) 45%,hsla(0, 0%, 0%,1) 55%,transparent 0);

background-size: .05em .05em;-webkit-background-clip: text;-webkit-text-fill-color: transparent;

animation: shad-anim 15s linear infinite;

}

@keyframes shad-anim {0% {background-position: 0 0}100% {background-position: 100% -100%}

}

fly63