炫酷 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

背景不再只是体现内容框的一种手段 – 现在,他们通常是内容本身的一部分。有这么多有趣的方式可以利用它们,尝试各种背景技术是值得的,看看他们如何提高下一个项目的用户体验。

原文地址:https://segmentfault.com/a/1190000016830479

原文地址:https://www.cnblogs.com/lalalagq/p/9943633.html

时间: 2024-11-06 07:24:47

炫酷 CSS 背景效果的 10 个代码片段的相关文章

炫酷CSS

<!DOCTYPE html><!--To change this license header, choose License Headers in Project Properties.To change this template file, choose Tools | Templatesand open the template in the editor.--><html> <head> <title>TODO supply a ti

基于css3炫酷页面加载动画特效代码

基于CSS3实现35个动画SVG图标.这是一款基于jQuery+CSS3实现的SVG图标动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="loaders"> <div class="loader"> <div class="loader-inner ball-pulse"> <div></div> <div></div

Sublime Text自定制代码片段(Code Snippets)

在编写代码的整个过程中,开发人员经常会一次又一次的改写或者重用相同的代码段,消除这种重复过程的方法之一是把我们经常用到的代码保存成代码片段(snippets),这使得我们可以方便的检索和使用它们. 为了提高你的编码效率,Sublime Text提供了一种让你可以轻松添加自定义代码片段的功能.这篇文章中,我们将看到在Sublime Text中如何创建.管理以及使用代码片段来极大的简化我们的工作流程. 创建代码片段 为了创建代码片段,我们需要打开 Tools > New Snipptes. Subl

CSS+DIV:实现炫酷网页样式与布局

虽然之前也接触过HTML和CSS,也做过一段时间的项目,使用过CSS和DIV,但是终究没有体会到这两者融会贯通后,所能达到的效果,远远超乎我的想象. 其实很多写过前端页面的人都知道DIV和CSS其实特别简单,但是要想实现需求中的或者自己心中想象的效果,也决非易事.这里面有很多的技巧,如果你不熟悉和精通,那么你做出的页面将会达不到预期的效果,有时候会特别的难看. 首先我们来看一下DIV是啥玩意? DIV是标记语言HTML中众多标签的一个,但是却是文档页面布局使用最频繁的一个标签.它可定义文档中的分

炫酷的CSS3抖动样式:CSS Shake

CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像): 炫酷的CSS3抖动样式:CSS Shake 这是一个很微小的动画,但使用得当也是挺不错的,比如用在广告.图像.按钮上,这样可以用来吸引用户眼球从而促使去点击它. 这个Csshake有9个抖动样式,三个状态,如鼠标经过拉动.无限抖动.鼠标悬停拉动. CSS Shake 使用方法: 首先引入css shake的样式表文件.css3按钮:?http://www.hui

原创炫酷代码公开——连接董铂然github

公开了github部分项目(均为原创)更多代码请看https://github.com/dsxNiubility SXWaveAnimate SXFiveScoreShow SXPhotoShow SXNews  主要介绍: 用于做一个圆形容器中的灌水效果,demo程序是前一个页面传值出动画,也可以做成当前页面获得数据后刷新出动画.现在封装的也基本完善,使用者需要复用我写的自定义cell. 提供三种样式,后续还会完善一些关于水花无限流动等扩充功能. 主要介绍: 这个程序是关于绘制图表的.传入五个

神奇的Python,一行代码能做哪些炫酷的事情?

可能大家在网上已经看过类似的python单行代码可以实现的功能,比如: 九九乘法表: print(' '.join([' '.join(['%s*%s=%-2s'%(y,x,x*y)for y in range(1,x+1)]) for x in range(1,10)])) 或者输出前100项斐波那契数列的值: print([x[0] for x in [ (a[i][0], a.append((a[i][1], a[i][0]+a[i][1]))) for a in ([[1,1]], )

教你用原生CSS写炫酷页面切换效果,跟第三方组件说拜拜

因为项目需要,别人想让我给他写一个个人博客,并且给了我一个其他人的网页,可以点此查看.有的同学可能说了,第三方博客框架这么多,为什么还要去手写的,你说这个有可能是没有看到打开这个博客. 样式介绍 给大家看一下这个网页的大体样式. 这个界面可以说是非常漂亮,整体也是一个响应式布局,总体来说还算不错.但是抛开页面设计,这个网站有一个致命的缺点,就是没有做懒加载,这么多页面其实就是一个HTML文件,所有的资源图片以及文字信息等全部是一次性加载,所以你想打开这个界面还是比较困难的,需要等待一些时间. 我

基于Animate.css的炫酷jQuery消息通知框插件

notification是一款基于Animate.css的炫酷jQuery消息通知框插件.该插件可以在屏幕的四个角显示消息通知框,结合Animate.css可以制作出多种效果非常炫酷的CSS3动画特效. 在线预览   源码下载 使用方法 使用该jQuery消息通知框插件需要引入jQuery,notification.js,animate.css和notification.css文件. <link rel='stylesheet' href='css/animate.min.css'> <