快来学习一下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代码表白套路,让你的表白更加成功。