9个独特的 CSS 背景视觉效果

这几年的web设计中,大背景的设计变得越来越流行。特别是在现在大屏大行其道的情况下,设计师在设计中越来越多的使用大分辨率的背景图来填充屏幕,这样更能制造独特的视觉效果,能更好的传达他们想要向用户传达的内容。

但是,大部分的设计仅仅是硬生生的把大背景图填充就了事了。其实,借助于CSS和JavaScript的力量,可以创建一些独特的视觉效果,可以使体验更加优雅。

下面就来陈列一些使用不同的CSS和JavaScript技术来创建的一些独特的带有大背景的视觉效果,当然也会对它们所使用的技术做一个简单的说明,可以快速的应用到项目中去。

CSS颜色混合模型(Blend Mode)视觉效果

CSS的混合模型(Blend Mode)是一个新属性,可以实现Photoshop中的图层的混合模型的效果。利用它和鼠标的滚动可以实现一些非常酷的颜色滚动效果。比如下面这个例子就使用CSS的混合模型(Blend Mode)和背景图片实现的一个效果:

视差滚动动画

视差滚动的应用在web中已经应用的很广泛了,也又很多种表现形式,这里说的这种是两个不同的图片在水平方向上往不同的方向运动:

斜切视觉效果

把背景图片进行一定角度的斜切的视觉效果,在最近这段时间已经风靡设计圈了。在之前要实现这样的效果,可能要做很多额外的事情。不过现在好了,利用CSS新的属性transform可以非常轻松的实现这样的效果:

渐变动画视觉效果

如果,运用大量背景图片动画,可能会分散用户的注意力。使用渐变颜色的动画,在一些场景下就不会有这样的问题,因为渐变颜色的动画效果非常的微弱,在视觉上不会造成很大的干扰:

滚动模糊视觉效果

滚动模糊这种视觉效果也应用的非常广,特别是当你想使用背景图片吸引用户而且还能让用户在滚动的时候阅读图片上文字的时候,就很适合使用它。只需要借助一点点JavaScript来改变图片的background-size属性就可以实现这样的效果:

视差滚动Hero Image图片效果

下面这个效果应用的也非常多。首先,是一张大的图片在文章的顶部并且图片上面还覆盖了一个遮罩图层用来营造一种不同的颜色视觉效果。然后用渐隐渐显的动画效果来引入图片,最后在滚动的时候,使用了视差的效果来隐藏图片。这个效果完完全全只需要一点点CSS代码,不需要JavaScript。

图片移动放大缩小视觉效果

下面这个效果在一些电商网站上用的比较多。当鼠标在图片移动的时候,图片会跟随鼠标的位置放的图片该位置以便可以看到更多的细节。这种简单的交互可以很好的吸引用户的注意力。

图片前后对比视觉效果

这种效果经常用来对比图片使用,比如在一些压缩图片的网站上,就经常使用这种效果来对比压缩前和压缩后图片效果,用来突出压缩效果。

滚动改变颜色视觉效果

有时候仅仅是简简单单的改变一下背景的颜色就可以起到四两拨千斤的效果。比如下面这个效果,就是通过监听网页滚动的位置来改变背景颜色,简简单单就可以营造一种别样的视觉效果。

一点点看法

在新的设计理念中,背景图片不再仅仅是一种设计的表现手段,而是内容的一部分。这一点从现在很多的web上也可以看出来,有各种各样的方法来加强图片在内容中的重要性,也有各种各样的技术来通过使用图片提高用户的使用体验

以上效果的详细代码可前往http://svgtrick.com/tricks/dc4f73cd7193fff5f61dfdb1d36a4b6c查看


本文作者:janily

原文链接:http://svgtrick.com/tricks/dc4f73cd7193fff5f61dfdb1d36a4b6c

原文发布于微信公众号 - 腾讯NEXT学位(NextDegree)

原文发表时间:2018-01-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏无原型不设计

技巧分享: 如何快速搭建一致统一的设计系统

以下内容由摹客(https://www.mockplus.cn)团队翻译整理,仅供学习交流,摹客设计系统是国内独家设计规范制作平台。

1202
来自专栏姬小光

写给设计师的移动页面适配小知识

话说从设计稿到前端页面实现,是产品流程中非常重要的一环,这个阶段决定了设计师设计的设计稿能否完美地变成真正的产品雏形。废话不多说,本文主要介绍以下三块内容:移动...

1122
来自专栏数据小魔方

图表案例——关于欧盟公投的年龄分布比较

今天跟大家分享一个图表案例——关于欧盟公投的年龄分布比较。 原图表如下: ? 乍看有点儿摸不着头脑,这个图表反应的信息其实很简单,就是不同年龄段中选择留在欧盟...

3686
来自专栏React Native开发圈

React Native 并没有死!

最近的React Native 备受打击,Google 发布了首个 Flutter 预览版、Vue.js 在 GitHub 上的 star 数量超过了 Reac...

1262
来自专栏HTML5学堂

无技术基础 看懂HTML5

HTML5学堂:如果你对C语言、网站制作等技术没有什么了解,你可以查看这篇文章。无论你是唱歌的艺术生,还是学习机械专业的工科生,或者大学读的文学学科。只要你平时...

48211
来自专栏数据小魔方

字体也有性格

今天是2016年的第一天,很特殊的也很特别的日子,祝大家新年快乐,小魔方会一如既往的每天陪大家一起分享,一起成长。 上一期给大家简单介绍了字体的基础知识,今天就...

3096
来自专栏HTML5学堂

1分钟读懂HTML5技术

HTML5学堂:如何来理解HTML5技术是什么呢?我们从几个角度进行阐述,分别是狭义上的HTML5(就技术来讨论技术)、广义上的HTML5(平时技术会议、聊天时...

3528
来自专栏直播系统开发

关于直播系统和短视频系统安卓手机屏幕适配的方向思路

直播与短视频的接踵而至,将互联网推向了网红经济时代,而智能手机的更新迭代为二者的发展提供了“温床”。但随着Android机型的增多,设备碎片化的程度也在不断加深...

1390
来自专栏MixLab科技+设计实验室

谈设计与技术,以WEB布局为例

本文基于“跨界”思维,以 WEB 布局为例,从3个方面,谈谈设计与技术的关系: 1 自适应布局与响应式布局 2 CSS 的布局特性演进 3 设计语言与 W...

3217
来自专栏数据小魔方

数据地图系列12|PowerMap(下)图层叠加与复合数据地图!

今天要跟大家分享数据地图系列12——PowerMap(下)图层叠加与复合数据地图! 昨天跟大家介绍的powermap数据地图还有最后一种图形没有来得及介绍,就是...

3587

扫码关注云+社区

领取腾讯云代金券