最近我寫了一張用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,實現自己的設計創意。
上一篇css會調快進嗎