bilibili首页推荐图片动态显示

一张图片的演示

---

附加:Mac OS 截屏快捷键:
	Command+Shift+3
Mac OS 选取截屏:
	Command+Shift+4

一、一开始的div框架
html:

<div class="one">
	<img src="" alt=""><!--之后把这段去掉-->
</div>

css:

.one{
    position: relative;
    width: 206px;
    height:116px
}
.one:before{
    content: "";/*这个参数比较重要*/
    position: absolute;
    z-index: 1;
    bottom: 0;/*这个把它定义到最底下*/
    left: 0;
    width: 100%;
    height: 48px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAwCAYAAAGnNCAXAAAABGdBTUEAALGPC/xhBQAAAENJREFUCB1jYGBgYGICEpIgQgqNBRRi4MMmARYDyXKAWLwgggfOAnMJiIH0soJ0sMEJdlQWWBYshpAAK0ZwwSzS1AEAes8Ckyqvlc0AAAAASUVORK5CYII=);/*这个参数比较重要*/
    background-size: contain;
    background-repeat: repeat-x;
    border-radius:0 0 2px 2px
}

得到的效果:

二、填补
html:

<div class="one">
	<div class="two">
		<img src="" alt="">
	</div>
</div>

css:

.one .two{
    position: relative;
    overflow: hidden;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABHCAMAAAB4UkqjAAAAh1BMVEUAAADd3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d0UCIZXAAAALHRSTlMAoJDx4OYL/DcGF+6+JNi4ycSIT2k6LPeWfRzTVPXPszEQrV0hpo12cEZAZFpRNIQAAAJVSURBVFjD7dbZcpswGIbhHwwSi81q8Ib33fnu//oatRIpmliDhQ/aaZ+TKInnjVgkhb4RJMhP9Fzo8PiD+vEA+JPnqS0+1dRHBJhibAzh2HNeekxP9Z8XBSMZM6SmRBYx65QeM6XsY3rKPqanLGMWqeDmOh0b/Io9+YHi3gKtdExgLznSlyjFMGnUphIMlcgY22C4DSPBxTu4IrXDe+yI6IDWbPSqGVoHoohDyip6XZVB4hFN1TgPyUaYQ5rSWQ0nZGcC6UyJukKypa4yIXX3HLLlqCdHX++HLRfS/9bbWvvHLSLNR3N6tRXdFwdxejekiYF4fDnWYa/WqSm2PqRCSy0hrbP5RxAaW8141N17tVbZ+S1fFYbWFF2+1lqg62BoBdAsqWOLroWhxTh+M8vmWuuaxp1WaWjRSn43yl35sHTLUjxiaWlqnYE4LZoJme3v13MibqepFZRL6otV5V+/Hv+xVvi+FsvZG1qh/LQ7uFXnF/HlwcEfYlDktW2r5EARUiXWc1xRWAC8tGwxsdJ9dcRnYrddMdtrjDZyAy3kXrSJ7O89u8zEZAIKxBRnFzbonWD3ZkfCrrmzP+6979nicjAnW3NZ4OS1R6GtVBa8drTek539up3NAgMvcv51WNZQitCiFBZQaqIMSrx1XrWNoWTy/w1r+hk+xjuMSVjGGC6WZ3S1xlDriqTKxzB+Ra3I4bDHne62drqmied57QR9z0D94dHnOEmvJ/pWAMm4ovL2TTcJ5cRyMlHrbkdG5c/5r82fYqt+K/iR89m2JrP9PEZyI80PsPxVT0P3FAEAAAAASUVORK5CYII=);/*有阴影，必要*/
    background-repeat: no-repeat;
    background-position:50%
}
.one .two, .one .two:before, .one .two img{
    width: 100%;
    height: 100%;
    border-radius:2px
}

前面那段background-image: url()没有的效果:

有后的效果:

三、重点之一:图片上的背景操作
css:

.one .two:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .7);/*背景颜色*/
    opacity: 0;/*透明程度*/
    transition:opacity .2s/*动画时间效果*/
}

.one:hover .two:before{
    opacity: 1;/*最主要之一*/
}

特效:

这就完成一半了

四、文字的标题:
html:

<div class="one">
	<div class="two">
		<img src="" alt="">
		<div class="three_text">
			<p style="color:white;">stay</p>
			<!--p中style为了看清楚才加上的，中后去掉,之后用class=""-->
		</div>
	</div>
</div>

css:

.one .two .three_text{
    position: absolute;/*绝对定位*/
    z-index: 2;/*数字越大，显示在小的数字样式上*/
    width: 100%;
    top: 55px;/*自行尝试更改位置*/
    left: 0;
    transition: top .2s;
    padding:26px 10px 10px
} 

.one:hover .two .three_text{
    top:-15px;/*自行尝试更改位置*/
}

效果为：

至于位置更改上处俩处top即可

五、字体修改：
html:

<div class="one">
	<div class="two">
		<img src="" alt="">
		<div class="three_text">
			<p class="title">stay</p>
		</div>
	</div>
</div>

css:

.two .three_text .title{
    font-size: 14px;/*字体大小*/    
    line-height: 18px;
    height: 18px;
    color: #fff;
    margin-bottom: 6px;/*底部对齐*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight:500
}

.one:hover .two .three_text .title{
    height: 36px;
    white-space: normal
}

body{
    font: 12px -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
    -webkit-font-smoothing:antialiased;/*定义字体粗细*/
}
p{
    display: block;/*局部区域不可见*/
    /*位置*/
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

改前:

改后:

六、尝试bilibili特殊字符编写:
html:

<p class="p_up">
	<i class="iup zidingyi_up"></i>
</p>

css:

.zidingyi_up:before{
    content: "\E741";/*特殊字符，但不能显示*/
}

.p_up .iup{
    vertical-align: middle;
    margin-right:5px
}
.p_up{
    display: -ms-flexbox;
    display: flex;
    font-size: 12px;
    color: #999;
    line-height:16px
}

效果为:

最终特殊字符还是没搞出来(但得到的结论是与p_up(主要)和iup有关)

未完待续。。。