最近我写了一张用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,实现自己的设计创意。