温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css3怎么实现图片的简单阴影效果

发布时间:2022-02-24 14:37:46 来源:亿速云 阅读:190 作者:小新 栏目:web开发

这篇文章将为大家详细讲解有关css3怎么实现图片的简单阴影效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

  使用css3实现图片的阴影效果的原理

  一个图形需要带有一个主投影,另一个带有弧度的图形也有自己的阴影效果,让这两个图形发生重叠,让他们的颜色一致然后可以把弧度阴影露出来,这样看到的就是一个曲线阴影的效果。

  text-shadow属性设置

  水平偏移量,正值向右,负值向左。

  垂直偏移量,正值向下,负值向上。

  模糊度,不能为负值。

  阴影的颜色。

  使用css3实现曲面/椭圆投影效果

  <!DOCTYPEhtml>

  <html>

  <head>

  <metacharset="UTF-8">

  <title>曲面/椭圆投影效果</title>

  <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:01px4pxrgba(0,0,0,0.3),0020pxrgba(0,0,0,0.1)inset;

  }

  .shadow_wraph4{

  width:87%;

  height:100px;

  margin-left:6%;

  text-align:center;

  padding-top:60px;

  color:#fff;

  }

  /**stylingshadows**/

  .shadow1:before,.shadow1:after{

  position:absolute;

  content:"";

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

  width:45%;

  background:#9B7468;

  z-index:-1;

  -webkit-box-shadow:020px15px#9B7468;

  -moz-box-shadow:020px15px#9B7468;

  box-shadow:020px15px#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:0040px13px#486685;

  border-radius:100px/20px;

  }

  </style>

  </head>

  <body>

  <divclass="shadow_wrap">

  <divclass="shadow1">

  <h4>椭圆投影1</h4>

  </div>

  <divclass="shadow2">

  <h4>椭圆投影2</h4>

  </div>

  </div>

  </body>

  </html>

  实现效果如图所示

  微信截图_20180926171418.png

  使用css3实现悬浮投影效果

  <!DOCTYPEhtml>

  <html>

  <head>

  <metacharset="UTF-8">

  <title>悬浮投影</title>

  <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:transform1s;

  }

  .floating:after{

  content:"";

  display:block;

  position:absolute;

  bottom:-30px;

  left:50%;

  height:8px;

  width:100%;

  box-shadow:0px0px15px0pxrgba(0,0,0,0.4);

  border-radius:50%;

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

  transform:translate(-50%,0);

  transition:transform1s;

  }

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

  .floating:hover{

  transform:translateY(-40px);

  transition:transform1s;

  }

  .floating:hover:after{

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

  transition:transform1s;

  }

  </style>

  <body>

  <divclass="shadow_wrap">

  <divclass="floating">

  <h4>悬浮投影</h4>

  </div>

  </div

  </body>

  </html>

关于“css3怎么实现图片的简单阴影效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI