https://zhang-fork.github.io/tags/css/Recent content in css on zhangForkHugo -- gohugo.ioen-usThis work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.Sun, 05 Apr 2020 09:10:16 +0800https://zhang-fork.github.io/posts/%E5%86%99%E9%A1%B5%E9%9D%A2%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/Sun, 05 Apr 2020 09:10:16 +0800https://zhang-fork.github.io/posts/%E5%86%99%E9%A1%B5%E9%9D%A2%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/卡卡的轮播图 按照b站的教程,实现了走马灯的和渐隐的轮播图,但是走马灯的实在是卡,如下图: 自能说搞清了原理,具体优化,我看还是等学了前端框架再来弄了. portfolio部分的弹出 按照psd文件,应该是每一个小图片点一下会弹出一个详解,但是还没有时间去弄.就先直接摆上去图片了. header部分的背景 原来是直接整个header部分切图,但是背景图片过大,想看能否用原生的css实现,学习了Background-blend属性,貌似有点样子,但是logo部分有个问题卡住了, logo在nav和轮播图中间,不规则的缺刻用一个trick解决了,用的是伪元素的实现 .trick{ overflow: hidden; position: relative; filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.5)); } .trick::before{ content: ""; position: absolute; left:50%; transform: translate(-50%,-50%); top:-49px; border-radius: 50%; width: 140px; height: 140px; box-shadow: 0 -2px 0 1000px rgba(255, 255, 255, 0.1); } 二者之间的阴影使用filter实现,但是副作用是轮播图片和文字都被影响了,也有了阴影.更严重的是它们之间还有dotted line,这个就没得办法了,感觉毫无出路,还是实力不够. 这样一折腾感觉大小还是没有缩小,可优化的路数是减小布纹材质图片的大小,现在的是500*500px的,应该是可以用更小的代替. 就算能加上dotted line,感觉质感不如原图,用data_url加质感看看吧. 用Background-blend属性后,:hover伪类的实现也受到了影响.给hover的背景渐变没有了.如下图 在css里面指定了blend-mode为none没用,感觉走错了方向,权当学习了. 文件放到GitHub了