当先锋百科网

首页 1 2 3 4 5 6 7

最近我写了一张用CSS制作的表白图片,感觉还挺好看的,就想在这里和大家分享一下。

/*设置页面背景颜色*/
body {
background-color: #f4ecec;
}
/*创建表白文本容器*/
.love-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 3px 3px #B9B9B9;
}
/*设置文本颜色和字体*/
.love-container p {
font-size: 28px;
font-weight: bold;
color: #c72020;
font-family: Arial, sans-serif;
}
/*设置两颗心形图片的位置和大小*/
#left-heart {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
z-index: -1;
}
#right-heart {
position: absolute;
right: 0;
top: 0;
width: 200px;
height: 200px;
z-index: -1;
}
/*添加两颗心形图片*/
#left-heart:before,
#left-heart:after,
#right-heart:before,
#right-heart:after {
position: absolute;
content: "";
left: 100px;
top: 0;
width: 100px;
height: 160px;
background: #f20d0d;
transform: rotate(-45deg);
border-radius: 100px 100px 0 0;
}
#left-heart:after,
#right-heart:after {
left: 0;
transform: rotate(45deg);
}
/*展示表白图片*/

我爱你

以上就是我的CSS代码表白图片的制作过程,借助CSS的灵活性和强大的布局能力,我成功制作了一张趣味十足、文艺清新的表白图片。希望大家也能够通过学习CSS,实现自己的设计创意。