效果

祝你新年快乐

折腾猫敬上
代码

<div class="red-packet">
    <header>
        <img src="https://liubaozi.com/logo.png"/>
    </header>
    <main>
        <h1>祝你新年快乐</h1>
        <p class="author">折腾猫敬上</p>
        <button class="open">开</button>
    </main>
</div>
<style>
/* 改变间距计算方式 */
*{
    box-sizing: border-box;
}

/* 设置间距和字体 */
body{
    font: lighter 16px "微软雅黑";
animation: red-packet .75s both cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* 标题变细 */
h1, h2, h3{
    font-weight: lighter;
}

/* 图片响应式 */
img{
    height: auto;
    max-width: 100%;
}
.red-packet{
    color: #fff;
    padding: 1em;
    height: 35em;
    margin: auto;
    max-width: 25em;
    overflow: hidden;
    position: relative;
    border-radius: 1em;
    background: #c40b00;
}
.red-packet header{
    top: -14.5em;
    left: 0;
    right: 0;
    height: 25em;
    position: absolute;
    border-radius: 100%;
    background: #b00b00;
}
.red-packet img{
    left: 0;
    right: 0;
    bottom: -2em;
    margin: auto;
    max-width: 5em;
    position: absolute;
    border-radius: 100%;
    border: .25em solid #fff;
}
.red-packet main{
    margin-top: 15em;
    text-align: center;
}
.red-packet .author{
    opacity: .7;
    text-align: center;
}
.red-packet .open{
    outline: 0;
    width: 3em;
    height: 3em;
    color: #fff;
    border: none;
    display: block;
    font-size: 2em;
    cursor: pointer;
    margin: 1em auto;
    background: #ffb03a;
    border-radius: 100%;
    transition: background .3s, transform .3s;
}
.red-packet .open:hover{
    transform: scale(1.1);
}
.red-packet .open:active{
    background: #eba534;
}
@keyframes red-packet{
    from{
        opacity: 0;
        transform: scale(0);
    }
    to{
        opacity: 1;
        transform: scale(1);
    }
}
</style>
字符数: 0
单词数: 0
行数: 0
一个简易的 CSS 红包

效果

祝你新年快乐

代码

关于博主

LBZCC的博主

最新文章

分享文章
