2023年6月20日发(作者：)
⽹易云⾳乐虚化图⽚html,CSS之⾼斯模糊—（⽹易云歌单）最近在⽤vue仿⽹易云UI实现⼀个简单的⾳乐台项⽬。在写到歌单的时候卡住了⼀段时间，发现⽹易云的UI设计挺⾼级的(对我来说)，于是花时间研究了⼀下。先来看下⽹易云官⽅ui效果。⽹易云歌单.gif可以看到不同歌单进⼊时，歌单的背景⾊是不同的，因为看上去像是纯⾊的背景，所以我⼀开始的思路是提取封⾯的主⾊调作背景⾊，就去参考了不少提取主⾊的算法。提取出来后发现并没有达到想要的效果(背景不是主⾊调)。有提取图⽚⾊调这⽅⾯需求的可以参考⼀下。算法：提取图⽚主⾊调CSS⾼斯模糊寻找其它解决⽅案的过程中发现很多⼈提到css⾼斯模糊，结合伪类能够实现这种效果。于是就尝试了⼀下，发现确实可以。下⾯是我的具体实现(单独的测试页⾯)。htmlfas fa-arrow-left歌单class="d_img"src="/414/736?random"width="120px"height="120px"/>css⾼斯模糊栀⼦花-通过css⾼斯模糊，结合伪类能够实现⽹易云歌单ui效果暂⽆数据！html中有⼀个class为"d_bg"的空div标签，这个标签是专门⽤来放背景图⽚的，不做它⽤。(在"d_wrapper"元素下，与"d_head"即内容元素为兄弟元素)。设置⽗元素相对定位.d_wrapper{position: relative; /*设置相对定位*/overflow: hidden;height: 15rem;}设置背景图⽚.d_bg{background: url("/414/736?random"); /*背景图⽚*/background-repeat: no-repeat;background-size: cover; /*适应容器*/background-position: 50%; /*调整图⽚位置*/transform: scale(1.5); /*图⽚放⼤*/filter: blur(20px); /*⾼斯模糊*/height: 15rem; /*设置背景⾼度*/}给图⽚div容器及伪元素:before设置绝对定位.d_bg,.d_bg:before{position: absolute;left: 0;top: 0;right: 0;bottom: 0;}设置伪元素.d_bg:before{content: " "; /*伪类必须设置content属性才会⽣效*/background-color: rgba(0, 0, 0, 0.25); /*设置蒙层，兜底*/}要使伪类样式⽣效必须设置content属性，即使为空。兜底策略：当样式设置完成之后，实际测试中发现⼀个问题，就是背景上⽅的图⽚⽂字是⽩⾊，⽽当背景图⽚加载不出来或者整个背景图⽚⼤部分是⽩⾊时，此时会导致上⽅内容⽩⾊⽂字看不见。所以会有⼀个兜底策略，就是给伪类:before设置⼀个灰⾊背景⾊(rgba设置透明度)，这样即使背景图⽚模糊出来是⽩⾊的，也会叠加上⼀层灰⾊背景。实现效果⾼斯模糊效果.PNG到这⾥背景⾼斯模糊的效果已经实现了，不过⽹易云歌单在上滑的时候会发现歌单内容元素会慢慢变成透明，⽽标题栏背景⾊逐渐加深并且会出现边框。这⾥我尝试了⼀下发现要让标题栏变⾊会⽐较复杂(不知道有没有⼤佬知道简单点的实现⽅法)，所以最后我的实现就只是把内容元素变成透明。代码：export default {data () {return {// 初始距离标题栏⾼度originalTop: ''}},methods: {// 监听滚动条改变透明度handleScroll () {this.$nextTick(() => {// 根据滚动距离设置透明度let top = elector('.d_body').getBoundingClientRect().elector('.d_head').y = (top - 48) / alTop})}},mounted () {// 滚动条复位Top = 0// 获取初始距离标题栏⾼度(标题栏固定48px)alTop = elector('.d_body').getBoundingClientRect().top - ntListener('scroll', Scroll, true)},beforeDestroy () {EventListener('scroll', Scroll, true)}}实现效果实现效果.gif仿⽹易云.gif完整代码fas fa-arrow-left歌单class="d_img"src="/414/736?random"width="120px"height="120px"/>css⾼斯模糊栀⼦花-通过css⾼斯模糊，结合伪类能够实现⽹易云歌单ui效果暂⽆数据！export default {data () {return {// 初始距离标题栏⾼度originalTop: ''}},methods: {// 监听滚动条设置透明度handleScroll () {this.$nextTick(() => {// 根据滚动距离设置透明度let top = elector('.d_body').getBoundingClientRect().elector('.d_head').y = (top - 48) / alTop})}},mounted () {// 滚动条复位Top = 0// 获取初始距离标题栏⾼度alTop = elector('.d_body').getBoundingClientRect().top - ntListener('scroll', Scroll, true)},beforeDestroy () {EventListener('scroll', Scroll, true)}}.nav_bar{height: 3rem;position: fixed;color: white;font-size: 1.2rem;padding: 0.5rem 1rem;z-index: 2; /*设置层级 */}/* 设置⽗元素 */.d_wrapper{position: relative;overflow: hidden;height: 15rem;}.d_head{display: flex;padding: 1rem;margin: 2rem 0 0 1rem;font-size: 1.2rem;z-index: 1; /* 设置层级 */position: relative; /* 设置定位保持最⾼层，保证改变opacity时层级不会发⽣变化 */}.d_bg{background: url("/414/736?random"); /*背景图⽚*/background-repeat: no-repeat;background-size: cover; /*适应容器*/background-position: 50%; /*调整图⽚位置*/transform: scale(1.5); /*图⽚放⼤*/filter: blur(20px); /*⾼斯模糊*/height: 15rem; /*设置背景⾼度*/}.d_bg,.d_bg:before{position: absolute;left: 0;top: 0;right: 0;bottom: 0;}.d_bg:before{content: " "; /*伪类必须设置content属性才会⽣效*/background-color: rgba(0, 0, 0, 0.25); /*设置蒙层，兜底*/}.d_icon{margin-right: 1rem;}.d_img{border-radius: 0.5rem; /* 图⽚圆⾓ */z-index: 1;}/* 描述内容样式 flex布局 */.d_content{color: white;display: flex;flex-direction: column;justify-content: space-around;width: 60%;margin-left: 1rem;z-index: 1;}.d_title{font-size: 1.4rem;}.d_subtitle,.d_desc{font-size: 1rem;}.d_body{position: relative;height: 43rem;overflow: auto;margin-top: -2rem;background-color: white;border-top-left-radius: 1.5rem;border-top-right-radius: 1.5rem;text-align: center;}.d_list{margin-top: 16rem;}chrome调试为iphone6 plus，虽然最后实现的效果和⽹易云官⽅的还差不少，但是⾃⼰觉得还算过得去，哈哈
2023年6月20日发(作者：)
⽹易云⾳乐虚化图⽚html,CSS之⾼斯模糊—（⽹易云歌单）最近在⽤vue仿⽹易云UI实现⼀个简单的⾳乐台项⽬。在写到歌单的时候卡住了⼀段时间，发现⽹易云的UI设计挺⾼级的(对我来说)，于是花时间研究了⼀下。先来看下⽹易云官⽅ui效果。⽹易云歌单.gif可以看到不同歌单进⼊时，歌单的背景⾊是不同的，因为看上去像是纯⾊的背景，所以我⼀开始的思路是提取封⾯的主⾊调作背景⾊，就去参考了不少提取主⾊的算法。提取出来后发现并没有达到想要的效果(背景不是主⾊调)。有提取图⽚⾊调这⽅⾯需求的可以参考⼀下。算法：提取图⽚主⾊调CSS⾼斯模糊寻找其它解决⽅案的过程中发现很多⼈提到css⾼斯模糊，结合伪类能够实现这种效果。于是就尝试了⼀下，发现确实可以。下⾯是我的具体实现(单独的测试页⾯)。htmlfas fa-arrow-left歌单class="d_img"src="/414/736?random"width="120px"height="120px"/>css⾼斯模糊栀⼦花-通过css⾼斯模糊，结合伪类能够实现⽹易云歌单ui效果暂⽆数据！html中有⼀个class为"d_bg"的空div标签，这个标签是专门⽤来放背景图⽚的，不做它⽤。(在"d_wrapper"元素下，与"d_head"即内容元素为兄弟元素)。设置⽗元素相对定位.d_wrapper{position: relative; /*设置相对定位*/overflow: hidden;height: 15rem;}设置背景图⽚.d_bg{background: url("/414/736?random"); /*背景图⽚*/background-repeat: no-repeat;background-size: cover; /*适应容器*/background-position: 50%; /*调整图⽚位置*/transform: scale(1.5); /*图⽚放⼤*/filter: blur(20px); /*⾼斯模糊*/height: 15rem; /*设置背景⾼度*/}给图⽚div容器及伪元素:before设置绝对定位.d_bg,.d_bg:before{position: absolute;left: 0;top: 0;right: 0;bottom: 0;}设置伪元素.d_bg:before{content: " "; /*伪类必须设置content属性才会⽣效*/background-color: rgba(0, 0, 0, 0.25); /*设置蒙层，兜底*/}要使伪类样式⽣效必须设置content属性，即使为空。兜底策略：当样式设置完成之后，实际测试中发现⼀个问题，就是背景上⽅的图⽚⽂字是⽩⾊，⽽当背景图⽚加载不出来或者整个背景图⽚⼤部分是⽩⾊时，此时会导致上⽅内容⽩⾊⽂字看不见。所以会有⼀个兜底策略，就是给伪类:before设置⼀个灰⾊背景⾊(rgba设置透明度)，这样即使背景图⽚模糊出来是⽩⾊的，也会叠加上⼀层灰⾊背景。实现效果⾼斯模糊效果.PNG到这⾥背景⾼斯模糊的效果已经实现了，不过⽹易云歌单在上滑的时候会发现歌单内容元素会慢慢变成透明，⽽标题栏背景⾊逐渐加深并且会出现边框。这⾥我尝试了⼀下发现要让标题栏变⾊会⽐较复杂(不知道有没有⼤佬知道简单点的实现⽅法)，所以最后我的实现就只是把内容元素变成透明。代码：export default {data () {return {// 初始距离标题栏⾼度originalTop: ''}},methods: {// 监听滚动条改变透明度handleScroll () {this.$nextTick(() => {// 根据滚动距离设置透明度let top = elector('.d_body').getBoundingClientRect().elector('.d_head').y = (top - 48) / alTop})}},mounted () {// 滚动条复位Top = 0// 获取初始距离标题栏⾼度(标题栏固定48px)alTop = elector('.d_body').getBoundingClientRect().top - ntListener('scroll', Scroll, true)},beforeDestroy () {EventListener('scroll', Scroll, true)}}实现效果实现效果.gif仿⽹易云.gif完整代码fas fa-arrow-left歌单class="d_img"src="/414/736?random"width="120px"height="120px"/>css⾼斯模糊栀⼦花-通过css⾼斯模糊，结合伪类能够实现⽹易云歌单ui效果暂⽆数据！export default {data () {return {// 初始距离标题栏⾼度originalTop: ''}},methods: {// 监听滚动条设置透明度handleScroll () {this.$nextTick(() => {// 根据滚动距离设置透明度let top = elector('.d_body').getBoundingClientRect().elector('.d_head').y = (top - 48) / alTop})}},mounted () {// 滚动条复位Top = 0// 获取初始距离标题栏⾼度alTop = elector('.d_body').getBoundingClientRect().top - ntListener('scroll', Scroll, true)},beforeDestroy () {EventListener('scroll', Scroll, true)}}.nav_bar{height: 3rem;position: fixed;color: white;font-size: 1.2rem;padding: 0.5rem 1rem;z-index: 2; /*设置层级 */}/* 设置⽗元素 */.d_wrapper{position: relative;overflow: hidden;height: 15rem;}.d_head{display: flex;padding: 1rem;margin: 2rem 0 0 1rem;font-size: 1.2rem;z-index: 1; /* 设置层级 */position: relative; /* 设置定位保持最⾼层，保证改变opacity时层级不会发⽣变化 */}.d_bg{background: url("/414/736?random"); /*背景图⽚*/background-repeat: no-repeat;background-size: cover; /*适应容器*/background-position: 50%; /*调整图⽚位置*/transform: scale(1.5); /*图⽚放⼤*/filter: blur(20px); /*⾼斯模糊*/height: 15rem; /*设置背景⾼度*/}.d_bg,.d_bg:before{position: absolute;left: 0;top: 0;right: 0;bottom: 0;}.d_bg:before{content: " "; /*伪类必须设置content属性才会⽣效*/background-color: rgba(0, 0, 0, 0.25); /*设置蒙层，兜底*/}.d_icon{margin-right: 1rem;}.d_img{border-radius: 0.5rem; /* 图⽚圆⾓ */z-index: 1;}/* 描述内容样式 flex布局 */.d_content{color: white;display: flex;flex-direction: column;justify-content: space-around;width: 60%;margin-left: 1rem;z-index: 1;}.d_title{font-size: 1.4rem;}.d_subtitle,.d_desc{font-size: 1rem;}.d_body{position: relative;height: 43rem;overflow: auto;margin-top: -2rem;background-color: white;border-top-left-radius: 1.5rem;border-top-right-radius: 1.5rem;text-align: center;}.d_list{margin-top: 16rem;}chrome调试为iphone6 plus，虽然最后实现的效果和⽹易云官⽅的还差不少，但是⾃⼰觉得还算过得去，哈哈
发布评论