在设计图会经常使用到的阴影效果，如何用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: %;color: #fff;

  text-shadow:   1px  hsl(,%,%),

                 2px  hsl(,%,%),

                 3px  hsl(,%,%),

                 4px  hsl(,%,%),

                 5px  hsl(,%,%),

                 6px  hsl(,%,%),

                 7px  hsl(,%,%),

                 8px  hsl(,%,%),

                  5px rgba(,,,.),

                 1px 3px rgba(,,,.),

                 3px 5px rgba(,,,.),

                 5px 10px rgba(,,,.),

                 10px 10px rgba(,,,.),

                 20px 20px rgba(,,,.);

}

</style>

<div class="shadow_wrap">

  <h1>3D效果-fly63.com</h1>

</div>

4、动画投影效果:

fly63

代码如下：

<style>

.shadow_wrap h1 {

    font-family: 'Righteous', serif;

    margin: ;

      position: relative;

      display: inline-block;

      color: #61d9a8;

      font-size: 8em;

      text-shadow: .03em .03em  hsla(,%,%,);

}

.shadow_wrap h1:after {

    content: attr(data-shadow);

    position: absolute;

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

    z-index: -;

    text-shadow: none;

    background-image:linear-gradient(45deg,transparent %,hsla(,%,%,) %,hsla(, %, %,) %,transparent );

    background-size: .05em .05em;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: shad-anim 15s linear infinite;

}

@keyframes shad-anim {

  % {background-position:  }

  % {background-position: % -%}

}

</style>

<div class="shadow_wrap">

  <h1 data-shadow='fly63'>fly63</h1>

</div>

巴特西

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

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

2、悬浮投影效果:

悬浮投影

3、3D文字投影效果:

3D效果-fly63.com

4、动画投影效果:

fly63

最新文章

热门文章