console
<div class="bg-light text-center">
<div class="title bg-light font-bolder">给作者一点鼓励吧😀</div>
<div class="message bg-light">
<img src="https://github.com/powcodes/file-bed/blob/master/img/支付宝.png?raw=true" alt="">
<img src="https://github.com/powcodes/file-bed/blob/master/img/微信.png?raw=true" alt="">
</div>
<div class="test"><span>👆</span></div>
<button class="btn btn-block btn-danger">打赏作者</button>
</div>
<style>
div{
margin:auto;
margin-top:12px;
width:620px;
}
.title{
width:620px;
height:60px;
text-align:center;
line-height:60px;
font-weight:bolder;
font-size:30px;
}
.message{
width:620px;
height:300px;
margin:0;
border:1px red none;
}
.message:after{
content:"";
display:block;
clear:both;
visibility:hidden;
}
.message img{
display:block;
width:300px;
}
.message img:nth-child(1){
float:left;
}
.message img:nth-child(2){
float:right;
}
.test{
float:left;
width:100%;
text-align:center;
margin:0;
height:42px;
}
span{
font-size:24px;
font-weight:900 !important;
font-variant: normal;
color:rgba(0,0,0,0.8);
animation:up-down 1s infinite linear alternate-reverse;
}
button{
display:block;
float:left;
width:100%;
font-size:32px !important;
font-weight:bold !important;
height:60px;
line-height:60px;
background-color:#dc3545;
color: #fff;
border:none;
box-shadow:12.1px 45.9px 29.8px -23px rgba(0, 0, 0, 0.069),
19.9px 75.6px 45.2px -23px rgba(0, 0, 0, 0.084),
26.3px 99.6px 57.6px -23px rgba(0, 0, 0, 0.095),
34.8px 132px 75px -23px rgba(0, 0, 0, 0.107),
63px 239px 130px -23px rgba(0, 0, 0, 0.12)
;
}
@keyframes up-down{
from{
font-size:24px;
margin-top:-2px;
color:rgba(0,0,0,0.8);
}
to{
font-size:32px;
margin-top:5px;
color:rgba(0,0,0,1);
}
}
</style>