CSS3实现图形曲线阴形和翘边阴影
首先,来看看完成之后的效果图:
实现原理
①曲线阴影实现:
多个阴影重叠,就是正常阴影+曲线阴影
正常情况下,有个矩形有正常的阴影,作为主投影,这时候再定义一个有一定弧度圆角的圆角矩形,然后放在正常矩形的下面,并露出一点点底部有弧度的阴影,这样的话就可以形成曲线投影的效果。例如下面这个样子:
主要代码:
html部分:
<div class="effect">
</div>
css部分:
/*曲线阴影*/
.effect{
position: relative;
width:500px;
height:200px;
margin: 0 auto;
box-shadow:0 1px 10px rgba(0,120,215,0.7);
-webkit-box-shadow:0 1px 10px rgba(0,120,215,0.7);
-moz-box-shadow:0 1px 10px rgba(0,120,215,0.7);
-o-box-shadow:0 1px 10px rgba(0,120,215,0.7);
}
/*巧用:after和:before,加上绝对定位的特点,形成一个圆角矩形*/
.effect:after,.effect:before{
position: absolute;
content: "";
z-index:-1;
top:50%;
bottom:0;
left:10px;
right:10px;
box-shadow:0 0 20px rgba(0,120,215,0.9);
-webkit-box-shadow:0 0 20px rgba(0,120,215,0.9);
-moz-box-shadow:0 0 20px rgba(0,120,215,0.9);
-o-box-shadow:0 0 20px rgba(0,120,215,0.9);
border-radius: 100px/10px;
-webkit-border-radius: 100px/10px;
-moz-border-radius: 100px/10px;
-o-border-radius: 100px/10px;
/*border-radius:100px/10px,表示的是,水平方向的半径是100px,垂直方向是10px。*/
}
②翘边阴影
原理:利用:before和:after,加上绝对定位的性质,可以形成一个矩形,这个时候结合CSS3的倾斜属性skew和旋转属性rote。就可以形成一个有旋转角度的平行四边形,这个时候再和原来的矩形重叠,则可产生翘边效果。
原理图:
主要代码:
html部分:
<ul class="wrap">
<li><img src="img/12.jpg"></li>
<li><img src="img/21.jpg"></li>
</ul>
css部分:
/*翘边阴影*/
.wrap li{
position: relative;
width:350px;
height:250px;
padding:10px;
background: #fff;
border:solid 1px #ccc;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 15px rgba(0,0,0,0.2);
-o-box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.wrap li img{
width:350px;
height:250px;
}
.wrap li:before{
position: absolute;
content: "";
z-index: -2;
width:325px;
height:220px;
left:22px;
bottom:13px;
background: transparent;
box-shadow: 0 5px 30px rgba(0,0,0,1);
-webkit-box-shadow: 0 5px 30px rgba(0,0,0,1);
-moz-box-shadow: 0 5px 30px rgba(0,0,0,1);
-o-box-shadow: 0 5px 30px rgba(0,0,0,1);
transform:skew(-15deg) rotate(-5deg);
-webkit-transform:skew(-15deg) rotate(-5deg);
-moz-transform:skew(-15deg) rotate(-5deg);
-o-transform:skew(-15deg) rotate(-5deg);
}
.wrap li:after{
position: absolute;
content: "";
z-index: -2;
width:325px;
height:220px;
left:22px;
bottom:13px;
-webkit-box-shadow: 0 5px 30px rgba(0,0,0,0.9);
-moz-box-shadow: 0 5px 30px rgba(0,0,0,0.9);
-o-box-shadow: 0 5px 30px rgba(0,0,0,0.9);
box-shadow: 0 5px 30px rgba(0,0,0,0.9);
-moz-transform:skew(15deg) rotate(5deg);
-o-transform:skew(15deg) rotate(5deg);
-webkit-transform:skew(15deg) rotate(5deg);
transform:skew(15deg) rotate(5deg);
}
完整代码已分享到:
http://git.oschina.net/LuckyWinty/CSS3Shadow
更多CSS3实现的动画效果demo,参考http://git.oschina.net/LuckyWinty/CSS3demo/tree/master/
欢迎关注我的个人微信订阅号:前端生活
转载请注明出处!
转载于:https://www.cnblogs.com/LuckyWinty/p/5270030.html
CSS3实现图形曲线阴形和翘边阴影相关推荐
- html css 画五角星,纯 CSS3 绘制图形(心形、五角星、六边形等)
这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等.我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象 ...
- css 一条线加阴影,CSS3实现曲线阴影和翘边阴影
html> CSS3实现曲线阴影和翘边阴影 /*源于imooc的学习*/ body { font-family: "微软雅黑", "Microsoft YaHei& ...
- html 直线变曲线,CSS3怎么画曲线?
CSS3怎么画曲线?下面本篇文章给大家介绍一下CSS3画曲线的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. CSS3怎么画曲线? 大家都知道,CSS3中border已经可以实 ...
- css图形动画,CSS3 实现图形下落动画效果
先看效果 实现代码 * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100%; height: auto; bac ...
- css3制作翘边阴影
要点讲解: 阴影一要点: 1.用一个圆角的层,设置阴影,z-index层级低于父级即可:但是其相对定位的属性需要另外设置在另一个class上如下图设置在effect上而不设置在wrap上 2.圆角的层 ...
- css实现图片翘边阴影
css阴影: box-shadow 属性用于向框添加一个或多个阴影. 语法: box-shadow: h-shadow v-shadow blur spread color inset; h-shad ...
- 有趣的css3自定义图形
最近在做了一个项目,很漂亮的画面,里面的元素不泛有一些不规则的图形,为了不使用图片去做,我想到了强大的Css3,想看看是否有些属性可以帮助我来用代码去实现,于是,我在查找资料中找到了如下的一些非常棒的 ...
- 如何用css和HTML结合画熊,结合伪元素实现的纯CSS3高级图形绘制
自小编上次整理了一些基础图形的绘制方法之后,大家都纷纷表示对css3的绘图技巧学习很有帮助.虽说万变不离其宗,再复杂的图形也可以用最简单的三角形或者圆弧组合出来,但仍有不少朋友反映,学会基本图形也不懂 ...
- css3转换图形展示,CSS3的常见transformation图形变化用法小结
1.rotate旋转旋转图片,单位deg,为"度"的意思 CSS Code复制内容到剪贴板 -moz-transform: rotate(20deg); -webkit-trans ...
最新文章
- windows 2008 64位oracle11g部署问题(3)之ORA-12514:TNS:监听程序当前无法识别连接描述符中请求的服务...
- 手动创建数据库实例全攻略7:UNDO
- 淘宝客网站的链接跳转形式
- 信息收集——DNS域名系统
- 男人女人小孩共32人c语言,C编程核心要点,你确信你会C语言?看完之后,男人沉默,女人流泪...
- Ubuntu 重置MySQL密码
- ubuntu 18.04下安装Java
- 服务器系统和数据库,服务器系统和数据库
- python画六边形的代码_跟我学python(1)——turtle
- linux校园网自动登录命令,东北大学校园网登录登出shell脚本
- error:LNK2005
- 博士申请 | 澳门大学张一博教授课题组招收计算机视觉方向全奖博士生
- 安卓手机SSH远程链接服务器教程
- 程序设计C 实验六 结构体 题目四 偷菜时间表
- password unchanged Authentication token manipulation error
- Python 分批次处理数据示例
- 给世界上色——滤镜底层原理
- java.io.IOException: The temporary upload location [C:\Users\...\ROOT] is not valid
- 计算机网络与图论,图论与复杂网络.pdf
- linux达梦数据库6001,达梦数据库 防火墙设置
热门文章
- 第三方模块config的使用
- 一、Java Web——JDBC快速入门(详解)
- 论文阅读 - Video Swin Transformer
- LeetCode MySQL 1479. 周内每天的销售情况(dayname星期几)
- LeetCode 2020 力扣杯全国春季编程大赛(1644/4093,前40.2%)
- LeetCode 1277. 统计全为 1 的正方形子矩阵(DP)
- java 工厂模式的写法_java工厂模式三种详解
- java组装树状结构数据集合_JAVA构建List集合为树形结构
- 灰色关联分析_灰色关联分析模型研究综述
- 论文阅读笔记(一)【Journal of Machine Learning Research】Natural Language Processing (Almost) from Scratch(未完)