俗話說，人靠衣裝，馬靠鞍，官網首頁是產品或公司的臉面，必須要大氣，
原來舊版的支付寶首頁，有個大視頻作為頁面背景一直播放展示，效果很贊，所以實作了下
先看看效果：
亮點部分
大視頻是絕對定位，定在最下面，上面的文字是絕對定位，定在最上面，還加了一層半透明的div藍色調，
文案的居中是使用的 display:flex排版
文案部分有一個漸變色效果
文案部分還有一個影片效果沒有展示，是個漸出影片效果
html部分
<div class="vedioBanner"> <div class="vedioBannerIntro"> <h2>唯一客服(V1KF.COM)<br>可兩分鐘搭建部署好的<span>高性能在線客服</span>系統</h2> <a href=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"https://gofly.v1kf.com/chatIndex?ent_id=2&kefu_id=kefu2" class="btn btn-primary" target="_blank">訪客端演示</a> <a href=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"https://gofly.v1kf.com/login" class="btn btn-outline-info" target="_blank">后臺演示（賬號kefu2 密碼123）</a> </div> <div class="videomask"></div> <video width="100%" id="video" autoplay="" loop="" preload="" muted="" x-webkit-airplay="true" airplay="allow" webkit-playsinline="true" playsinline="true" src=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"https://c.kuai.360.cn/kjji/activity/pc/kjj.mp4" class="video1 video"></video> </div>
css部分
/*首頁banner*/ .vedioBanner{ height: 1000px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; } .vedioBanner video{ position: absolute; top: 0; left: 50%; z-index: 0; width: 2400px; margin-left: -1200px; } .videomask { min-width: 100%; min-height: 100%; position: absolute; top: 0; left: 0; opacity: .2; background: #2d8cf0; z-index: 9; } .vedioBannerIntro { width: 1000px; margin-top: 30px; font-size: 14px; color: #fff; text-align: center; z-index: 99; -webkit-animation: fadeInDown 0.5s ease-in; -moz-animation: fadeInDown 0.5s ease-in; -o-animation: fadeInDown 0.5s ease-in; animation: fadeInDown 0.5s ease-in; } @keyframes fadeInDown { 0% { opacity: 0 } to { opacity: 1 } }
十年開發經驗程式員，離職全心創業中，歷時三年開發出的產品《唯一客服系統》
一款基于Golang+Vue開發的在線客服系統，軟體著作權編號：2021SR1462600，一套可私有化部署的網站在線客服系統，編譯后的二進制檔案可直接使用無需搭開發環境，下載zip解壓即可，僅依賴MySQL資料庫，是一個開箱即用的全渠道在線客服系統，致力于幫助廣大開發者/公司快速部署整合私有化客服功能， 開源地址：唯一客服（開源學習版） 官網地址：唯一客服官網轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/532606.html
標籤：其他