CSS3 就可以写出一个苹果官方渐变颜色文字效果,真的太逼真了!

极客小俊

于 2023-10-17 12:44:11 发布

阅读量406

点赞数

CC 4.0 BY-SA版权

分类专栏： # CSS应用场景开发与技巧专题文章标签： css3 html 效果案例前端开发程序员代码编写学习

本文链接：https://blog.youkuaiyun.com/windowsxp2018/article/details/133881135

CSS应用场景开发与技巧专题专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用CSS实现一个渐变背景效果，通过`select-em`类展示了如何将iPhone14ProMax文字设置为从上至下的线性渐变背景，适合Web开发者和设计师学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

🚀 个人主页 极客小俊
✍🏻 作者简介：web开发者、设计师、技术分享博主
🐋 希望大家多多支持一下, 我们一起进步！😄
🏅 如果文章对你有帮助的话，欢迎评论 💬点赞👍🏻 收藏 📂加关注

渐变效果

在这里插入图片描述

CSS代码

.select-em{
            text-align: center;
            font-size: 150px;
            background: linear-gradient(to bottom, #ffb6ff, #b344ff);
            color: transparent;
            -webkit-background-clip:text;
            font-family: SF Pro SC,SF Pro Display,SF Pro Icons,PingFang SC,Helvetica Neue,Helvetica,Arial,sans-serif;
          }

HTML代码

<body style="background: black;">
        <h2 class="select-em">iPhone 14 Pro Max</h2>
</body>

"👍点赞" "✍️评论" "收藏❤️"
大家的支持就是我坚持下去的动力!

如果以上内容有任何错误或者不准确的地方，🤗🤗🤗欢迎在下面 👇👇👇 留个言指出、或者你有更好的想法，
欢迎一起交流学习❤️❤️💛💛💚💚

更多好玩好用好看的干货教程可以点击下方关注❤️微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇