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
css好看的图片投影,css3常见好看的投影效果_css3阴影box-shadow高大上用法相关推荐
- css设置背景图片缩小,css3 设置背景图片大小(缩略图形式缩小)
[译]libev和libevent的设计差异 本文译自what's the difference between libev and libevent? 作者是libev作者 [问]两个库都是为异步i ...
- 纯CSS实现非常好看的图片轮播演示
简介: 这是一款使用纯 CSS 实现的非常好看的图片轮播/幻灯片,切换方式为淡入淡出 网盘下载地址: http://kekewangLuo.cc/5ZtqYb6bqd60 图片:
- ppt中如何合并流程图_PPT中图片如何排版才能好看
做PPT多了,我们就会知道图片在PPT中的重要作用:它是提高PPT逼格.提升视觉效果的有力武器. 可问题来了,既然图片很重要,那么PPT里面图片如何放置.如何排版呢?1.2张图片很好办,但多了怎么办? ...
- css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
正方形图片使用CSS如何实现成圆形布局,不使用PS软件处理,直接使用DIV CSS布局如何实现图片圆形化. 正方形图片实现圆形布局 一.图片实现圆形条件 - TOP 原本不是圆形图片,通过CS ...
- 拍照已经成为我们手机中必备的功能之一,但是我们很多人都无法使用手机原相机拍出好看的图片,这是为什么呢?
拍照已经成为我们手机中必备的功能之一,但是我们很多人都无法使用手机原相机拍出好看的图片,这是为什么呢? 善于发现的小伙伴们,肯定发现了,拍照好看的人使用原相机拍照,都会打开HDR功能,那么HDR到底是 ...
- css3控制html中图片,如何使用CSS控制前端图片HTTP请求
Web前端图片加载的方式多种多样,其所产生的HTTP请求也各异,这里我们就来列举CSS控制前端图片HTTP请求的各种情况示例,需要的朋友可以参考下 图片的http请求,有很多种情况,那么究竟什么情况下 ...
- 好看的~图片素材网站
嘿,你那么好看的图片哪找的? 综合图片库 宇宙星空图片库 食物食材图片库 设计师网站 一.综合图片库: 1.https://www.pexels.com/ 2.colorhub.me 3.Beauti ...
- 05 react img css修改svg图片样式
react img css修改svg图片样式 svg图片的相关理论 定义 优点 前端引入svg图片的方式 方式一:<svg>标签引入,内嵌到 HTML 中 方式二,修改svg的颜色 方式三 ...
- css怎么分开背景图片,css切背景图片(background-position)
给元素添加背景图片的方式有很多,个人总结的有: 用img插入图片: css3的方式手动绘图: 单独用background-image单独插入图片: 其中用background-image有两种方法,一 ...
最新文章
- 你真的会学习吗?从结构化思维说起
- 《软件工程》实验报告——需求获取与分析
- 阿里Druid连接池监控的两个坑
- R语言第四讲 之R语言数据类型
- css 不规则边角_如何实现带有边角的CSS边框
- 《互联网+ 电商平台设计与运营》一一2.4 小结
- lr接口压测_LoadRunner+Java接口性能测试
- 颠覆网站 C/S 模式,没有服务器的网站会怎样?
- 华为数通VRRP配置实验
- java wav 转 mp3_使用jave2将音频wav转换成mp3格式
- 2022制冷与空调设备安装修理特种作业证考试题库及答案
- Are you referring to request attributes outside of an actual web request
- uni-app 蓝牙通信
- 实现从淘宝(天猫)定时抓取订单数据、打印电子面单并保存到ERP表中
- 一些前端的开发环境配置
- 【计算几何】向量叉积和凸包 | 引射线法 | 判断点是否在多边形内部 | 葛立恒扫描法 | Cross Product and Convex Hul
- 三极管原理--我见过最通俗讲法
- 从零起步认识XAML
- shp文件的可视化与编辑
- IntelliJ IDEA 2020.2发布,诸多亮点助提效
热门文章
- 小米5(mi5)开启-全面屏手势-详细步骤
- 小程序更新后,wx.getUserInfo 接口不再出现授权弹窗,新方法获取用户信息
- iOS新方法systemFontOfSize: weight:
- 20亿美金独角兽Notion,和它在中国的“抄袭”者们
- 微擎 人人商城 头像获取失败问题
- qemu里pci设备的热插拔
- [玩机] 如何获取Windows Store 商店应用下载链接
- 【DB笔试面试696】在Oracle中,什么OSWatcher工具?
- oracle进行列合并,oracle列合并的实现方法
- 51单片机入门学习篇-led灯、按键、数码管、中断