炫酷 CSS 背景效果的 10 个代码片段
在现代网页设计中,大背景图设计非常流行。随着高清(现在是4K)显示器的出现,越来越多的网页设计师使用大背景图来填充屏幕。
因为这样可以造成很大的视觉冲击力,并有助于更好的传递所要表现的内容。
但是,如果只是吧大背景简单的放在网页上效果有限。使用 CSS,偶尔结合 JavaScript ,可以创造出一些惊人的特效。
CSS 混合模式的颜色变化
这种背景效果之所以如此之酷,是因为当用户滚动时,顶部的固定元素似乎会改变颜色。CSS mix-blend-mode 属性的使用允许改变色调化,这取决于背景的内容。
See the Pen CSS background change on scroll by Giana (@giana) on CodePen.0
滚动动画
这一技术让人想起了过去的小游戏,它的特点是两种截然不同的图像向相反的方向滚动。他可以在 CSS transform 和一些 JS 的帮助下完成的。
See the Pen GSAP Animate CSS background-position by Jonathan Marzullo (@jonathan) on CodePen.0
斜切效果
斜切背景是网页设计中最热门的趋势之一。这在印刷设计中是一个非常容易实现的效果,但是在网页上实现很痛苦 – 直到现在。这里有一个纯 HTML / CSS 解决方案,使其变得简单。
See the Pen skew bg by Marcel (@MKasio) on CodePen.0
图片切换效果
使用一个相当简单的 CSS,允许背景在多个图像之间进行平滑的转换。它比传统的 JavaScript 更轻量。
See the Pen Fullscreen CSS Background Image Slideshow by Kevin Lesht (@klesht) on CodePen.0
渐变动画效果
如果不仔细的处理,动画背景就会分散你的注意力。这个动画渐变的例子处理的很好,因为这个动画效果做的很微妙。使用 JavaScript,您可以定义渐变颜色。
See the Pen Animated Background Gradient by Mario Klingemann (@quasimondo) on CodePen.0
滚动时模糊视觉效果
当你真的希望访问者把注意力集中在背景图像的上面一层的内容(比如新闻报道的标题),让文本可以轻松阅读时,滚动时模糊视觉效果可能会非常有用。少量的jQuery 可以在滚动时改变 background-size 属性来创建这种效果。
See the Pen Zoom and Blur background Image by Zach Richard (@zrichard) on CodePen.0
淡入主页横幅并且滚动时覆盖
在这个例子做了一些事情。首先,一个顶部全屏的主页横幅添加了一个颜色叠加,以创建一个不同的色调。然后实现一个淡色动画,以一种视觉平滑的方式来引入背景图像。最后,在混入了一个视觉差滚动效果。这是一个非常现代的效果,只需要一点点 CSS 代码( 无需 JS )。
See the Pen CSS background image stacking with fade and overlay by Rand Seay (@randseay) on CodePen.0
图片移动放大缩小视觉效果
这是我们最近看到的一个效果。当用户鼠标悬停在面板上时,背景图像随着光标的任何移动放大和平移。添加了一些交互性并保持用户兴趣的简单方法。
See the Pen Zoom + pan the image on hover & mouse move by feiwen8772 (@feiwen8772) on CodePen.0
悬停比较效果
这个例子显示了基于用户的鼠标位置显示背景的分屏。很强烈的比较,像“之前”和“后”的镜头。
See the Pen CSS Background reveal by Eric Karkovack (@karks88) on CodePen.0
滚动时改变颜色效果
有时我们会忘记使用简单的纯色是多么的强大。在这里,我们可以看到背景颜色根据滚动位置的变化而产生变化。这种轻量级的解决方案就跟使用大背景图一样直观效果。
See the Pen Changing Background Color on Scroll by Jack Harner (@jackharner) on CodePen.0
背景不再只是体现内容框的一种手段 – 现在,他们通常是内容本身的一部分。有这么多有趣的方式可以利用它们,尝试各种背景技术是值得的,看看他们如何提高下一个项目的用户体验。
相关文章
- 300行HTML+CSS+JS代码实现动态圣诞树
- HTML`CSS_网站页面不同浏览器兼容性问题解决
- Html-Css-li标签增加图片
- Day3 CSS 引入及基本选择器
- CSS中响应式开发—几个概念,开发原理,媒体查询,代码演示
- CSS & JS Effect – Styling Input Radio
- 【彩虹线条爱心】(HTML+JS+CSS+代码+效果)
- 【颜色深度渐变特效】(Html+JS+CSS+效果+代码)
- 【Html+JS+CSS】简易轮播图核心代码分享 + 效果展示
- 【HTML CSS JS 蝴蝶飞舞特效 绝美(附完整代码)】
- 【Html+CSS+JS 表白树-----大胆向女神告白吧!即时一次不行,那就继续写代码,再来!】
- 【动态“心形”---html,js,css实现(附源代码)】
- css选择器的对比样式代码精简
- HTML静态网页设计作业、仿写大学官网 (力争使用最少的Html 、CSS代码实现)
- 【前端面试题】有关html和css的前端面试27问
- CSS:表格样式(设置表格边框/文字/背景的样式)
- 模拟jQuery中的ready方法及实现按需加载css,js实例代码
- CSS * *:before, *:after
- [Scrapy教学4]掌握Scrapy框架重要的CSS定位元素方法
- [译] JavaScript 中的 CSS:基于组件的样式的未来
- [译] 再谈 CSS 中的代码味道
- 使用 BEM 来模块化你的 CSS 代码
- js、css动态压缩页面代码
- 遇见未知的CSS
- 实用的60个CSS代码片段
- 用css让一个容器水平垂直居中
- 重学前端 42 # 用代码挖掘W3C中的CSS属性
- 【转载】使用Sublime Text 3的HTML-CSS-JS Prettify插件格式化代码
- jsp 引入js、css修改后有缓存不及时更新