通过一张图教会你CSS3倒影的实现

站长资源 2024/11/24 佚名

2 1538 2

DDR爱好者之家 Design By 杰米

前言

本文主要给大家介绍了关于CSS3倒影实现的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。

效果图如下：

示例图片

在CSS3之前，想要实现示例图片这样的一个倒影效果一般只能通过处理图片的方式，而CSS3问世之后，想要实现这样的效果变得非常简单，只需一个CSS3属性就可以轻松实现了。

这就是今天所要提到的box-reflect属性。

咱们先看看W3C给出的box-reflect语法：

box-reflect：none | <direction> <offset>? <mask-box-image>? （?代表可缺省，也就是后俩属性可有可无）
<direction>= above | below | left | right （分别代表：上 | 下 | 左 | 右）
<offset>= <length> | <percentage>（分别代表：固定值 | 百分比）
<mask-box-image>= none | <url> | <linear-gradient> | <radial-gradient>| <repeating-linear-gradient> | <repeating-radial-gradient>（分别代表：没有遮罩图片 | 遮罩图片路径 | 线性渐变 | 径向渐变 | 重复线性渐变 | 重复径向渐变）
默认值：none

box-reflect可给两种属性值，一种是none，为默认值，也就是没有任何倒影效果，另一种才是我们今天所要讲的，它可以同时赋予三个属性值，它们依次代表倒影方向、元素与倒影之间的距离以及加在倒影上的遮罩图像，其中后两个属性值可以缺省，但如果<mask-box-image>存在，则<offset>必填。

说了那么多干巴巴的解释，还是联系一下示例应该更好理解些吧。

我们现在来一步步地实现文章开头示例图片的投影效果：

①只给一个属性值below。

<!--HTML代码-->
< img class="img" src="imgs/cat.jpg" />

/*CSS代码*/
.img{ -webkit-box-reflect: below; box-reflect: below;}

实现效果：

②再加个5px的间距。

/*CSS代码*/
.img{ -webkit-box-reflect: below 5px; box-reflect: below 5px;}

实现效果：

③最后加个图片遮罩吧。

/*CSS代码*/
.img{ -webkit-box-reflect: below 5px -webkit-linear-gradient(transparent 60%,rgba(0,0,0,.3));
box-reflect: below 5px linear-gradient(transparent 60%,rgba(0,0,0,.3));}

这里的图片遮罩没有用图片，而是用了CSS3中的linear-gradient属性值，它就是用于线性渐变，具体用法这里就不提了，可以直接看这里（https://www.jb51.net/css/369475.html)，写得很详细。

实现效果：

这就是文章开头示例图片的最终效果。

接下来，再说说径向渐变创建图片遮罩和直接使用图片遮罩。

径向渐变的话其实跟线性渐变类似，只需要你掌握CSS3中基本的径向渐变方法，给个简单示例吧：

/*CSS代码*/
.img{ -webkit-box-reflect: left 0 -webkit-radial-gradient(#000 30%,transparent);
 box-reflect: left 0 radial-gradient(#000 30%,transparent);}

实现效果：

效果很棒！好像猫咪真的在照镜子一样~~

那如果直接使用图片遮罩呢？比如说我用这样一张图片作为遮罩：

/*CSS代码*/
.img{ -webkit-box-reflect: right 0 url(imgs/mask.png); box-reflect: right 0 url(imgs/mask.png);}

实现效果：

mask.png

可以看出，遮罩图片会完全拉伸填充倒影图片，并且效果是完全透明部分不会显示出来（其实CSS3渐变图片遮罩原理也跟这个是一样的）。

需要注意的是：以上讲的所有效果不仅仅可以用在图片上，用在其他元素上也是完全可以的，比如说文字。

兼容性：box-reflect虽然看起来效果很不错，但是遗憾的是，目前只有webkit内核浏览器兼容，不过移动端基本已经没有任何问题啦~~

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。

CSS3,倒影

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“通过一张图教会你CSS3倒影的实现”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月24日

通过一张图教会你CSS3倒影的实现

CSS3的颜色渐变效果的示例代码

利用 CSS3 实现的无缝轮播功能代码

评论“通过一张图教会你CSS3倒影的实现”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接