当先锋百科网

首页 1 2 3 4 5 6 7

CSS 代码表白礼物

/* 用 CSS 展现你的爱意 */
.love {
font-family: 'Lucida Sans', Arial, sans-serif;
font-size: 28px;
text-align: center;
color: #e8297b;
text-shadow: 1px 1px 1px #f08080;
margin-top: 50px;
}
.heart {
position: relative;
width: 90px;
height: 80px;
transform: rotate(-45deg);
margin: 0 auto;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 45px;
top: 0;
width: 45px;
height: 80px;
background: #e8297b;
border-radius: 45px 45px 0 0;
transform: rotate(45deg);
}
.heart:before {
border-radius: 0 0 45px 45px;
left: 0;
}
.arrow {
position: relative;
width: 0;
height: 0;
border-top: 50px solid #ffffff;
border-right: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 50px solid transparent;
margin: 0 auto;
top: -55px;
}
.arrow:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 50px solid #e8297b;
border-right: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 50px solid transparent;
top: -50px;
left: -50px;
transform: rotate(-10deg);
z-index: -1;
}
.arrow:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 50px solid #ffffff;
border-right: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 50px solid transparent;
top: -87px;
left: -37px;
transform: rotate(-10deg);
z-index: -1;
}
.note {
font-family: 'Lucida Sans', Arial, sans-serif;
font-size: 20px;
margin-top: 30px;
text-align: center;
}
/* 添加爱心和箭头 */
IYou
Happy Valentine's Day!

使用 CSS 制作的表白礼物,简单而有趣。通过 CSS 展示你的爱意,把生命中的美好分享给所爱之人。添加这段代码,让你的表白更加丰富多彩!