Apr 5, 2020

写页面遇到的问题

卡卡的轮播图

  • 按照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的背景渐变没有了.如下图 hover背景颜色因blend-mode不显示 在css里面指定了blend-mode为none没用,感觉走错了方向,权当学习了.

  • 文件放到GitHub了