CSS3是前端開發中不可或缺的一部分,它可以用來美化網頁,實現一些炫酷的效果,比如用CSS3來求婚,你是不是覺得很有創意呢?
/* 加上好友請求 */ .friend-request:before { content: "我喜歡你"; color: #e60073; font-size: 30px; position: absolute; top: -40px; left: -15px; animation: heartbeat 2s infinite; } /* 加上心形圖標 */ .heart { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: sweing 2s infinite; } .heart:before, .heart:after { content: ""; position: absolute; width: 50px; height: 50px; background-color: #e60073; border-radius: 25px 25px 0 0; transform: rotate(45deg); } .heart:before { top: -25px; left: 0; } .heart:after { top: 0; left: -25px; } /* 離不開你了 */ .need-you { color: #e60073; font-size: 60px; position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); animation: heartbeat 2s 2s infinite; } /* 心跳動畫 */ @keyframes heartbeat { from { font-size: 30px; } to { font-size: 40px; } } /* 呼吸動畫 */ @keyframes sweing { 0% { transform: translate(-50%, -50%) rotate(45deg) scale(0.7); opacity: 0.7; } 50% { transform: translate(-50%, -50%) rotate(45deg) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(45deg) scale(0.7); opacity: 0.7; } }
以上就是一個簡單的CSS3求婚效果,只需要通過上面的代碼調整位置和樣式細節就可以自己制作一個屬于自己的求婚效果啦!