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

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

 

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

代码如下：

<style>
.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; 
}

</style>

　　

<div class="shadow_wrap">
  <div class="shadow1">
    <h3>椭圆投影1</h3>
  </div>
  <div class="shadow2">
    <h3>椭圆投影2</h3>
  </div>
</div

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

 

2、悬浮投影效果:

悬浮投影

 

 

 

实现代码：

<style>
.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;
}
</style>


<div class="shadow_wrap">
  <div class="floating">
    <h3>悬浮投影</h3>
  </div>
</div>

　　

 

3、3D文字投影效果:

3D效果-fly63.com

 

代码如下：

<style>
.shadow_wrap h1 {
  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);
}
</style>

<div class="shadow_wrap">
  <h1>3D效果-fly63.com</h1>
</div>

 

 

4、动画投影效果:

fly63

代码如下：

<style>
.shadow_wrap h1 {
    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%}
}
</style>

<div class="shadow_wrap">
  <h1 data-shadow='fly63'>fly63</h1>
</div>