在CSS模板中,雙人拍照動作是一種非常好看的效果。通過對CSS的一些處理,我們可以實現兩個人一起合影的樣式,并且充分展現他們的默契和友誼。
下面是實現這個效果的CSS代碼:
/* 設置背景圖 */ .background { background-image: url("雙人拍照背景圖.jpg"); background-size: cover; height: 800px; width: 100%; display: flex; justify-content: center; align-items: center; } /* 設置人物1的圖片 */ .person1 { position: absolute; width: 400px; height: 500px; top: 100px; left: 100px; background-image: url("person1.jpg"); background-size: cover; transform: rotate(30deg) scale(0.8); } /* 設置人物2的圖片 */ .person2 { position: absolute; width: 400px; height: 500px; top: 50px; left: 600px; background-image: url("person2.jpg"); background-size: cover; transform: rotate(-30deg) scale(0.8); }
其中,.background
設置了整個背景圖的樣式,其中包括圖片和背景的大小、位置等;.person1
和.person2
分別設置了兩個人物的圖片樣式,其中包括圖片的位置、大小、旋轉角度、縮放比例等。
通過以上CSS代碼的處理,我們就可以實現一個非常酷炫的雙人拍照動作了。
上一篇CSS模板網站電影圖片
下一篇css模版移植織夢