css3常见好看的投影效果基础知识教程css3阴影box-shadow高大上用法_投影使用教程

在设计图会经常使用到的阴影效果,如何用css3来实现呢?这篇文章主要整理box-shadow的一些好看常用的投影效果。1、曲面/椭圆投影效果:代码如下:
.shadow_wrap{width: 100%;background:#E6EEF6;max-width: 600px;margin: auto;overflow: hidden;
}
.s

css3常见好看的投影效果基础知识教程css3阴影box-shadow高大上用法

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

css3常见好看的投影效果基础知识教程css3阴影box-shadow高大上用法_投影使用教程

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

css3常见好看的投影效果基础知识教程css3阴影box-shadow高大上用法_投影使用教程

代码如下:

<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

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>
海计划公众号
(0)
上一篇 2020/04/05 01:49
下一篇 2020/04/05 01:49

您可能感兴趣的内容

  • node-tap基础知识_一个测试和代码覆盖工具

    node-tap基础知识 官方网址:https://www.node-tap.org/ GitHub:https://github.com/tapjs/node-tap 简介描述:…

    2020/03/06
  • vue 单文件 scoped 样式简析入门基础_样式小白攻略

    如何使用.klass {/* style */}
    scoped 是一个极其常用的 标签属性,使用后这一块样式能“神奇地”只应用在当前单文件组件,不会干扰到其父子组件。其原理其实很简单,只要加上了 scoped,当前文件所有元素(不包括调用的其他组件)都会加上一串识别码,样式只作用于带码的元素。举个简

    2020/03/20
  • 网站接入QQ登录功能基础入门_登录基础指南

    说明本文中所说的QQ登录功能,是采用官方的OAuth2.0来实现的,这样有更多的自主权。另一种较为简单的JS-SDK开发方式,虽然非常简便,但自主性不够,所以没有采用。下文中所构造的URL,均使用了JavaScript的ES6语法。注册开发者先登录QQ互联官网,登录时所用的QQ号会和相关信息绑定,这一点要注意。登录之后点击顶部导航栏右侧自己的QQ头像,进入开

    2020/03/26
  • 猎聘网基础入门_找工作_精英职业发展平台

    猎聘网基础入门 官方网址:https://www.liepin.com/ 简介描述:找工作_精英职业发展平台 猎聘网为招聘中高端人才提供超过500万条精英职业找工作信息,70000…

    2020/03/06
  • html5ify入门基础_磕首问路,码梦为生

    html5ify入门基础 官方网址:http://html5ify.com 简介描述:磕首问路,码梦为生 朴灵,阿里数据产品部资深工程师。致力前端、数据可视化、Node等领域&nb…

    2020/03/06
  • 只需三步,实时多边形折射教程视频_特效使用帮助

    在本教程中,您将学习如何使用Three.js在三个步骤中使对象看起来像玻璃。渲染3D对象时,无论使用某种3D软件还是使用WebGL进行实时显示,始终都必须为其分配材料以使其可见并具有所需的外观。可以使用Three.js之类的库中的现成程序来模仿许多类型的材料,但是在本教程中,我将向您展示如何使用三个对象(三个步骤)使对象看起来像玻璃一样。步骤1:设定和正面折

    2020/03/23
  • JS Tips使用帮助每天推出一个JS技巧

    JS Tips基础入门 官方网址:http://www.jstips.co/ 简介描述:每天推出一个JS技巧

    2020/03/05
  • FromData入门基础ajax提交数据_数据菜鸟教程

    一般想要不刷新页面提交数据时,可以使用ajax提交。如果数据量不大可以自己写json数据用ajax提交到后台服务,但是数据量多且需要动态添加数据时,自己写json格式数据就有点麻烦了,这时候就需要FormData来替我们完成数据的装载了。Html上传视频文件(vue) <input type="file" class="upload uploadfile"

    2020/03/29
  • node中的全局变量是什么?教程视频_变量入门基础

    JavaScript 中有一个特殊的对象,称为全局对象(Global Object),它及其所有属性都可以在程序的任何地方访问,即全局变量。在浏览器 JavaScript中,通常 window 是全局对象。那么在node中全局变量是什么?在Node.js中全局对象是global,所有全局变量(除了 global 本身以外)都是 global对象的属性。全局变

    2020/03/20
  • 首页白屏优化实践小白攻略_优化使用帮助

    前言自从前端三大框架React、Vue、Angular面世以来,前端开发逐渐趋向规范化、统一化,大多数时候新建前端项目,首先想到使用的技术一定是三大框架之一,框架给前端开发带来了极大的便利和规范,但是由于这三大框架都是JS驱动,在JS没有解析加载完成之前页面无法展示,会处于长时间的白屏,带来了一定的用户体验问题,接下来本篇文章会介绍本人最近在白屏优化时遇到的

    2020/03/24
  • vue-electron下vuex dispatch不响应问题的解决基础入门_响应入门教程

    electron-vue 中的vuex不支持commit,会报错:Please, don’t use direct commit’s, use dispatch instead of this. 用dispatch调用,没有响应。 其原因是用了vuex-electron的插件方法一如果没有和主进程有过多的交互,也不需要和主进程共享store下存储的信息,简单

    2020/03/23
  • vue-i18n入门知识_Vue.js的国际化插件

    vue-i18n入门知识 官方网址:https://kazupon.github.io/vue-i18n/ GitHub:https://github.com/kazupon/vu…

    2020/03/10
  • 理解Js中的Repaint和Reflow基础指南_浏览器使用帮助

    最近,在研究React的虚拟DOM如此之快的原因时,我意识到我们对javascript性能的了解甚少。所以我写这篇文章是为了帮助提高对Repaint和Reflow以及JavaScript性能的认识。在深入了解之前,我们是否了解浏览器的工作原理呢?一图胜过千言万语,所以让我们来了解下浏览器的工作原理en…那么什么是浏览器引擎,什么是渲染引擎呢?浏览器引擎的

    2020/03/29
  • 哪上班招聘网入门基础知识_高质量互联网人才

    哪上班招聘网入门基础知识 官方网址:https://www.nashangban.com/ 简介描述:高质量互联网人才 哪上班招聘网是专注优质互联网招聘平台。高薪工作,企业直招,公…

    2020/03/06
  • lyo入门基础_发布兼容浏览器环境的 Node.js 包

    lyo入门基础 官方网址:https://github.com/bokub/lyo GitHub:https://github.com/bokub/lyo 简介描述:发布兼容浏览器…

    2020/03/06
  • mgGlitch.js小白入门一款能够模拟显示器故障效果的jQuery插件

    mgGlitch.js基础入门 官方网址:https://codepen.io/hmongouachon/pen/LZGwWY GitHub:https://github.com/…

    2020/03/05