HTML+CSS+JS实现 ❤️创意几何love字母特效❤️
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JS实现 ❤️创意几何love字母特效❤️
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
🍅 作者主頁：Java李楊勇?
🍅 簡介：Java領域優質創作者🏆、【java李楊勇】公號作者? ?簡歷模板、學習資料、面試題庫、技術互助【關注我，都給你】
🍅 歡迎點贊 👍 收藏 ?留言 📝 ??
效果演示：?文末獲取源碼?
代碼目錄：
主要代碼實現：
CSS樣式：
body {margin: 0;height: 100vh;display: flex;justify-content: center;align-items: center;align-content: center;background: #efefef; }.letters {width: 20vw;height: 20vw;float: left;mix-blend-mode: multiply; }.letter-l {background-color: #1e00ff;clip-path: polygon(0 0, 50% 0, 50% 65%, 100% 65%, 100% 100%, 0 100%); }.letter-o {background-color: #ff0061;clip-path: circle(50%);margin-left: -8vw; }.letter-v {background-color: #e1ff00;clip-path: polygon(0 0, 100% 0, 50% 100%);margin-left: -6vw; }.letter-e {background-color: #00ff9e;clip-path: polygon( 0 0, 100% 0, 100% 35%, 50% 35%, 50% 40%, 100% 40%, 100% 60%, 50% 60%, 50% 65%, 100% 65%, 100% 100%, 0 100%);margin-left: -4vw; }HTML代碼 :
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Tetradic Love</title><link rel="stylesheet" href="css/style.css"></head><body><div class="container"><div class="letters letter-l"></div><div class="letters letter-o"></div><div class="letters letter-v"></div><div class="letters letter-e"></div></div></body></html>源碼獲取
大家可以點贊、收藏、關注、評論我啦 、查看博主主頁或下方微信公眾號獲取更多~！
打卡 文章 更新?47?/? 100天
精彩推薦更新中：
HTML5大作業實戰案例《100套》
Java畢設項目精品實戰案例《100套》
總結
以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️创意几何love字母特效❤️的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 提示未检测到 oracle,Oracle
- 下一篇： HTML+CSS+JS实现 ❤️H5 3