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; } /* 添加爱心和箭头 */IYouHappy Valentine's Day!
使用 CSS 制作的表白礼物,简单而有趣。通过 CSS 展示你的爱意,把生命中的美好分享给所爱之人。添加这段代码,让你的表白更加丰富多彩!