淘先锋技术网

首页 1 2 3 4 5 6 7

快来学习一下CSS代码表白套路,让你的表白更加精彩吧!

body {
background: linear-gradient(to bottom, #ff7979, #ff2e63);
}
.love {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 60px;
color: #fff;
font-family: 'Montserrat', sans-serif;
text-align: center;
z-index: 1;
}
.heart {
position: absolute;
width: 90px;
height: 80px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 0;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 45px;
top: 0;
width: 45px;
height: 70px;
background: #ff2e63;
border-radius: 70px 70px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}

代码中的背景渐变色为粉红和红色的线性渐变,可以为表白增添浪漫的气息。而通过调整.love和.heart的位置和大小,可以将表白内容和心形图案铺满整个页面。.heart:before和.heart:after控制着心形图案的左右两部分,其中的rotate参数表示旋转的角度,可以根据喜好进行调整。再搭配上Montserrat字体的使用,表白的效果更加完美。

相信一定会有许多妹子心动了吧!快来试试这个CSS代码表白套路,让你的表白更加成功。