【积水成渊】CSS磨砂玻璃效果和渐变主题色文字

这篇具有很好参考价值的文章主要介绍了【积水成渊】CSS磨砂玻璃效果和渐变主题色文字。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 大家好,我是csdn的博主:lqj_本人

lqj_本人_python人工智能视觉(opencv)从入门到实战,前端,微信小程序-CSDN博客

最新的uniapp毕业设计专栏也放在下方了:

https://blog.csdn.net/lbcyllqj/category_12346639.html?spm=1001.2014.3001.5482

平时我也会在哔哩哔哩视频中讲解一些大家平时用得到的东西,

哔哩哔哩欢迎关注:

卢淼儿的个人空间-卢淼儿个人主页-哔哩哔哩视频

【积水成渊】CSS磨砂玻璃效果和渐变主题色文字,积水成渊,css

目录

怎么做?

HTML

CSS

js


磨砂玻璃效果已经在互联网上流行了很多年,Mac OS以其磨砂玻璃效果而闻名,Windows 10也通过其他一些灯光,深度,运动,材质,比例尺实现了磨砂玻璃的效果 。

在CSS中使用磨砂玻璃效果时,我们中的一些人知道该怎么做,而其他人仍会在百度搜索:

怎么做?

“ css光泽效果”
“ css毛玻璃”
“透明模糊背景css”
“毛玻璃效果photoshop”
“仅cs模糊背景”
“ css玻璃窗格”
“ css背景滤镜”
“ css模糊覆盖物”
“ css div后面的模糊背景”

今天,我将展示仅CSS的一种方法,教你可以使用该方法在CSS中进行磨砂玻璃效果。 文章来源地址https://www.toymoban.com/news/detail-635203.html

HTML

<div class="card">
  <h2 class="gradient">
    <哔哩哔哩:卢淼儿/>
  </h2>
  <div>
    <p>.welcome{</p>
    <p class="indent">"CSDN:lqj_本人"</p>
    <p class="indent">"哔哩哔哩:卢淼儿"</p>
    <p>}</p>
  </div>
  <a href="#" class="gradient">欢迎三连</a>
</div>

CSS

body {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
	width: 100vw;
	min-height: 100vh;
	background: url(https://img0.baidu.com/it/u=1049144354,3589714554&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800) no-repeat;
	background-size: cover;
}

.card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px;
	width: 300px;
	height: 400px;
	box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-left: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 15px;
	background: rgba(255, 255, 255, .9);

	//   background: rgba(255, 255, 255, .3);
	//   backdrop-filter: blur(20px) brightness(150%);
	@supports (backdrop-filter: blur(20px) brightness(150%)) {
		background: rgba(255, 255, 255, .3);
		backdrop-filter: blur(20px) brightness(150%);
	}

	h2 {
		font-size: 1.8em;
		color: transparent;
		-webkit-background-clip: text;
		background-clip: text;
	}

	p {
		font-size: 1em;
		color: #1b263b;
		font-weight: 300;

		&.indent {
			text-indent: 1em;
		}
	}

	a {
		padding: 15px 50px;
		border-radius: 30px;
		color: white;
		text-decoration: none;
		font-weight: 500;
		// background-image: linear-gradient(
		//     45deg,
		//     hsl(220deg 67.24% 60%),
		//     hsl(333.91deg 50% 60%)
		// );
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        transition: filter .5s;

		&:hover {
			filter: brightness(120%);
		}
	}
}

js

function rgbToHsl(r, g, b) {
  r /= 255;
  g /= 255;
  b /= 255;

  let max = Math.max(r, g, b);
  let min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;

  if (max === min) {
    h = s = 0;
  } else {
    let d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

    switch (max) {
      case r:
        h = (g - b) / d + (g < b ? 6 : 0);
        break;
      case g:
        h = (b - r) / d + 2;
        break;
      case b:
        h = (r - g) / d + 4;
        break;
    }

    h /= 6;
  }

  return [h * 360, s * 100, l * 100];
}
const gradientBtn = () => {
	const img = new Image();
	img.addEventListener('load', function() {
		const colorThief = new ColorThief();
		let palette = colorThief.getPalette(img, 3);
		palette.forEach((item, index) => {
			palette[index] = rgbToHsl(...item);
		})
		// document.getElementById('button').style.backgroundImage = `linear-gradient(
        //     45deg,
        //     hsl(${palette[1][0]}deg 60% 60%),
        //     hsl(${palette[2][0]}deg 60% 60%)
        // )`;
        document.querySelectorAll('.gradient').forEach(el => el.style.backgroundImage = `linear-gradient(
            45deg,
            hsl(${palette[1][0]}deg 60% 60%),
            hsl(${palette[2][0]}deg 60% 60%)
        )`);
        // document.getElementById('button').style.backgroundImage = `linear-gradient(
        //     45deg,
        //     hsl(${palette[1][0]}deg ${palette[1][1]}% ${palette[1][2]}%),
        //     hsl(${palette[2][0]}deg ${palette[2][1]}% ${palette[2][2]}%)
        // )`;
		// document.getElementById('button').style.backgroundImage = `linear-gradient(
        //     45deg,
        //     rgb(${palette[1][0]}, ${palette[1][1]}, ${palette[1][2]}),
        //     rgb(${palette[2][0]}, ${palette[2][1]}, ${palette[2][2]})
        // )`;
	});
	img.crossOrigin = 'anonymous';
	img.src = 'https://img0.baidu.com/it/u=1049144354,3589714554&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800 no-repeat';
}

gradientBtn();

到了这里,关于【积水成渊】CSS磨砂玻璃效果和渐变主题色文字的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css背景毛玻璃效果

    一、结论:通过 css 的 backdrop-filter 属性设置滤镜函数 blur 一般会是有 背景色、透明度 的容器,如: 二、backdrop-filter 的其他用法 backdrop-filter CSS 属性可以让你为一个 元素后面区域添加图形效果 (如模糊或颜色偏移) 因为它适用于 元素背后的所有元素 ,为了看到效果,必须

    2024年02月16日
    浏览(46)
  • HTML 和 CSS 来实现毛玻璃效果(Glassmorphism)

            它的主要特征就是半透明的背景,以及阴影和边框。 同时还要为背景加上模糊效果,使得背景之后的元素根据自身内容产生漂亮的“变形”效果,示例: 首先,创建一个 HTML 文件,写入如下内容: 为  body  标签添加一些样式,并使用鲜艳的颜色和渐变作为背景

    2024年02月11日
    浏览(43)
  • CSS:backdrop-filter实现毛玻璃的效果

    实现效果 实现代码 完整代码 前端笔记 - 【CSS】 - filter 于 backdrop-filter

    2024年01月21日
    浏览(40)
  • UI小姐姐说我用CSS实现毛玻璃效果的样子很帅

    123123123123123123123123123123123123123123123123123123123123123123123123123123123123 模糊了吗?确实模糊了。但是有毛玻璃效果吗?没有,毛都没有。我们看下 用backdrop-filter是什么效果的。 .card { margin: 100px auto; width: 300px; height: 300px; position: relative; border: 1px solid #000; color: white; backdrop-f

    2024年04月12日
    浏览(38)
  • 毛玻璃动画交互效果

    从上述的效果展示页面结构来看,页面布局都是比较简单的,只是元素的动画交互比较麻烦。 第一个动画交互是两个圆相互交错来回运动。第二个动画交互是三角绕着圆进行 360 度旋转。 animation animation-delay 绝对定位布局 第一个动画是两个圆来回交互运动。 第二个动画交互

    2024年02月07日
    浏览(40)
  • 毛玻璃态卡片悬停效果

    页面的组成部分主要是卡片。其中卡片的组成部分主要是包括了图片和详情。 卡片的动效是鼠标悬停在卡片上时,图片会移动到左侧,并且图片是毛玻璃效果。所以我们在布局的时候图片会采用绝对布局。而详情则是基础布局。 响应式 绝对布局 filte 属性的 invert 值使用 ba

    2024年02月07日
    浏览(47)
  • react native 毛玻璃效果

    https://docs.expo.dev/versions/latest/sdk/blur-view/ https://github.com/expo/expo/issues/6613     参考链接: https://chat.xutongbao.top/

    2024年02月09日
    浏览(45)
  • 【unity shader案例】如何实现一个玻璃效果

      原理:玻璃最大的特点当然就是半透明了,如何在游戏中实现这样的效果呢?我这里总体的思路就是先截取整个场景作为一张纹理,然后把玻璃区域的纹理贴到这个玻璃模型上。 下面看具体实现代码 实现效果如下    更进一步,还可以实现毛玻璃的效果,思路就是用一张

    2024年02月16日
    浏览(54)
  • 【Unity Shader】Unity中利用GrabPass实现玻璃效果

    《入门精要》中模拟玻璃是用了Unity里的一个特殊的Pass来实现的,这个Pass就是 GrabPass ,比起上一篇博客实现镜子的方法,这个方法我认为相对复杂,因此在实现之前需要对GrabPass及实现原理做一个更加详细的介绍。 场景物体拜访和贴图完全参考《入门精要》: 以及当前场景

    2024年02月09日
    浏览(49)
  • UE4 使用材质后期 制作玻璃有雨效果

    效果展示,其实这是一个动画效果 以上为所有逻辑 拿到TexCoord给到Panner,Time和Speed都是通过下面计算而来,后面讲,再拿到时间和速度值过后,加上扰动值,最后取G值,因为雨事从上而下的动,需要的是一个从上往下的渐变。 拿到一个TexCoord的R值,从左往右的渐变,做一个

    2024年02月08日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包