文本视差背景效果

最新推荐文章于 2024-10-16 11:23:07 发布
最新推荐文章于 2024-10-16 11:23:07 发布
阅读量384 收藏 7
点赞数 6
文章标签： 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64740434/article/details/135734813
版权
这篇文章介绍了如何使用HTML和CSS创建一个具有动态渐变和文本视差效果的背景，以2024,吉祥如意为主题，展示了如何通过`background-clip`和Webkit扩展来实现独特的视觉设计。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文本视差背景效果</title>
    <style>
      body {
        background-color: #eeece5;
        padding: 50vh 0;
        text-align: center;
        font-size: 2.5em;
      }
      h1 {
        /* 背景色的线性渐变 可以设置起始位置到结束位置变化(因此至少2个位置值) 可以设置角度和方向 具体变化颜色及程度 */
        /* fixed 可以将背景固定(使其保持不动的状态) */
        background: linear-gradient(to bottom, #fe4e00 50%, transparent 50%)
          center center / 100vw 100vh fixed;
        /* height: 100vh; */
        /* 设置背景只覆盖文字 */
        background-clip: text;
        /* 兼容性处理 */
        -webkit-background-clip: text;
        /* 去掉文字本身颜色(设置文字透明) */
        color: transparent;
        /* 设置文字描边效果 */
        -webkit-text-stroke: 2px #fe4e00;
      }
    </style>
  </head>
  <body>
    <h1>2024,吉祥如意</h1>
  </body>
</html>
  • 效果图
    在这里插入图片描述
 勿忘初心
关注
现代 CSS 解决方案：文字颜色自动适配背景色！
油墨香^-^的博客
05-29 525
到今天，我们可以利用 CSS 提供的各类颜色函数，对颜色有了更为强大的掌控力。很多交互效果，不借助 JavaScript 的运算，也能计算出我们想要的最终颜色值。本文简单的借助：使用 CSS 相对颜色，实现统一按钮点击背景切换使用 CSS 相对颜色，实现文字颜色自适应背景两个案例，介绍了 CSS 相对颜色的功能。但它其实还有更为广阔的应用场景，完整的教程，你可以看这里 -- Chrome for Developers- CSS 相对颜色语法[30]。
视差背景html（修改自站长素材）
Sly_Qin的博客
05-11 508
起因 给博客折腾了一个上级网站主页，在站长素材看见一个背景视差滚动模板，然后就魔改了一个自己的主页，点击访问我的网站主页源代码（感谢互联网） 手机端访问没有效果，见下图效果： 改动 添加了两行文字一个链接，几个效果，看起来与原模板没多大区别，对小白的挑战还是有难度的，首先html？？？css？？？更不谈模板使用的啥jquery了，别说了，先看index.html，开始 看html源码 &lt...
二，利用背景属性做视差效果案例
m0_69075518的博客
09-28 165
当属性值为fixed时，此时背景不再相对于盒子，而是相对于整个浏览器的视窗口。因此，可以利用该属性强多个背景设为相同值来实现视觉差效果
如何在 Chrome 中使用纯 CSS 创建视差滚动效果
rubys007的博客
03-09 1615
现代 CSS 是一个强大的工具，您可以使用它来创建许多高级用户界面（UI）功能。在过去，这些功能依赖于 JavaScript 库。在本指南中，您将设置一些 CSS 行来在网页上创建一个滚动视差效果。您将使用上的图片作为占位符背景图像。完成本教程后，您将拥有一个具有纯 CSS 滚动视差效果的网页。
html背景自动切换带滚动,利用CSS固定背景交替实现视差滚动效果
weixin_29887021的博客
05-30 913
利用CSS固定背景交替实现视差滚动效果Sponsor视差滚动效果的网页设计案例我们分享过很多，实现这个功能一般都需要JS，而且比较复杂。没关系，今天设计达人网小编向大家介绍另外一种简单的视差效果技术，只需要CSS就能实现。演示该滚动效果特点是使用固定背景与色块内容交替，当访客向下滚动时，背景是fixed固定的，具体请查看：在线演示从上图可以看出，内容向上滚动时，第一张背景是固定的，不会跟着向上滚动...
制作滚动视差效果的企业网站官网
weixin_60895836的博客
07-26 277
在现代网页设计中，滚动视差（Parallax Scrolling）效果成为一种受欢迎的设计趋势，它可以为网站带来动感和吸引力。滚动视差通过在不同层次的元素之间创建差异化的滚动速度，产生了一种立体感和深度感，使用户在滚动页面时感受到更加生动的视觉体验。本文将教你如何使用滚动视差效果制作一个企业网站官网。
文字图片视差效果 html+css+js
你好呀，很高兴你在看这里~
12-18 2926
话不多，先看效果： 这是我在网上看到的一外国博主的创意，感觉不错，马上自己也敲了一个，果然不错~ 实现： 1.先定义一段文字，多点，起码能超过浏览器的可视区： <section> <p> The only survivor couldn't tell us why the zimtrum sank. It seems that the speed of the ship's sinking is very fast. This theory
视差特效的原理和实现方法
weixin_39415598的博客
06-22 1067
前言 本文的案例代码并非作者原创。 本文主要讲解 视差效果是如何实现的（原生三件套） ，本文并不涉及性能优化相关的知识点讲解（你就当我耍流氓吧）。 本文会从原理讲起，然后结合多个案例由浅入深去实现最终效果。 学废后帮我点个赞呗~ 本文的 『推荐』 部分也别错过喔~ 因为日常开发很少使用原生的方式去做视差效果。 🐱‍💻在线演示 🐱‍👓本文代码仓库 本文案例如图所示 原理 pc端的视差效果通常是 根据鼠标、键盘、滚动条的变化和操作 进行视觉上的差异化控制。 移动端可能还会有 重力陀螺仪
前端 视差滚动效果_如何在Chrome中使用纯CSS创建视差滚动效果
08-18 614
前端 视差滚动效果 介绍 (Introduction) Modern CSS is a powerful tool you can use to create many advanced User Interface (UI) features. In the past, these features relied on JavaScript libraries. 现代CSS是一个功能强大的工...
苹果iOS10视差背景搜索框代码
06-24
视差背景的实现主要依赖于CSS3和JavaScript，特别是jQuery库，它可以轻松地处理页面元素的动态效果。在这个“苹果iOS10视差背景搜索框代码”中，开发者利用jQuery来控制搜索框背景的滚动速度，从而创造出视差效果。...
HTML5带视差效果网页模板
07-20
视差效果是近年来流行的一种网页设计技术，它通过创建背景元素以不同的速度移动，使得用户滚动页面时产生深度感和立体感，从而提升网页的视觉体验。 在“HTML5带视差效果网页模板”中，我们可以预期以下知识点： 1...
HTML5背景分割视差效果代码.zip
11-18
2. `background-position`：通过改变不同背景图的位置，可以创建出视差滚动的效果。 3. `background-size`：控制背景图片的大小，例如`cover`或`contain`，可以确保背景图片在不同屏幕尺寸下都能适应。 4. `@media`...
背景视差滚动插件
07-20
标题中的“背景视差滚动插件”是一种网页设计技术，它通过创建背景元素相对于前景元素以不同速度移动的视觉效果，来营造出深度感和立体感。这种效果通常用于提升用户体验，使网页浏览过程更加生动有趣。视差滚动在...
视差效果：使用视差滚动效果的Web布局
02-15
视差效果在现代网页设计中已经成为一种流行的趋势，它通过创建背景元素相对于前景元素以不同速度移动的错觉，为用户带来丰富的动态视觉体验。这种技术可以极大地提升网站的吸引力和用户体验，尤其适用于故事叙述型...
web扩展
x737510的博客
10-10 626
HTTP（Hypertext Transfer Protocol）协议中的它们在用途和使用方式上有一些区别。用于请求服务器上的资源，通常是获取数据。GET 请求是幂等的，多次请求返回的结果应该是相同的，而且不应该对服务器产生任何副作用。用于向服务器提交数据，通常是提交表单数据或上传文件等。POST 请求可能对服务器产生副作用，例如在数据库中创建新的资源。数据通过 URL 参数传递，附在 URL 后面。因为数据在 URL 中可见，所以不适合传递敏感信息，且有长度限制。
06_实现watch
qq_53109172的博客
10-16 976
watch 本质上就是监听一个响应式数据，这个响应式数据发生变化的时候，进行通知并触发相应的回调函数。
004-按照指定功能模块名称分组
最新发布
xiaogang1226的博客
10-16 218
需要把一个功能模块的几个功能点放在同一个文档目录下，这几个功能点分布在不同的 Controller。需要把他们单独分组，方便前端对接。在@ApiOperation 里面增加属性 tags 赋值。
前端地图数据开发
shuxiaoxii的博客
10-13 295
基于Turf.js教你快速实现地理围栏的合并拆分。turf js 地理空间分析库，处理各种地图算法。如何拆分一个乡镇或区的地图。获取市级的行政区域划分。直接导入地图的json。高德地图查看市级区域。js实现地图区域合并。
Vue3动态组件component不生效问题解决方法
Java_fenxiang的博客
10-14 731
问题：vue3循环渲染动态组件component不生效，页面空白在vue3使用component动态组件展示组件时，组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法 踩了很多坑，所以记录下：登录后复制 <div class="preview-list" id="c...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值