| |
|
|
<![CDATA[<ul id="ykigm"><sup id="ykigm"></sup></ul>]]><![CDATA[<del id="ykigm"><sup id="ykigm"></sup></del>]]>
重慶分公司
重慶分公司
怎么用CSS3實(shí)現(xiàn)王者榮耀匹配人員加載頁面
本篇內(nèi)容介紹了“怎么用CSS3實(shí)現(xiàn)王者榮耀匹配人員加載頁面”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
10年積累的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有海寧免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
圖形解析
1、背景（徑向漸變）
2、玩家（player）加載動(dòng)畫（線性漸變）
3、背景鏤空旋轉(zhuǎn)正方形
4、正方形文字放大動(dòng)畫
5、文字按鈕制作
下面我們按上述步驟實(shí)現(xiàn)
背景制作
background: radial-gradient(center, shape size, start-color, …, last-color);
shape 參數(shù)定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認(rèn)值是 ellipse
CSS3線性、徑向漸變、旋轉(zhuǎn)、縮放、動(dòng)畫實(shí)現(xiàn)王者榮耀匹配人員加載動(dòng)畫
玩家加載
模塊整體垂直居中，線性漸變。
background: linear-gradient(direction/angle, color-stop1, color-stop2, …);
direction/angle控制漸變方向/角度。
CSS3線性、徑向漸變、旋轉(zhuǎn)、縮放、動(dòng)畫實(shí)現(xiàn)王者榮耀匹配人員加載動(dòng)畫
添加峽谷圖片，背景線性漸變，旋轉(zhuǎn)。添加邊框，然后用 box-shadow看起來發(fā)光效果。
CSS3線性、徑向漸變、旋轉(zhuǎn)、縮放、動(dòng)畫實(shí)現(xiàn)王者榮耀匹配人員加載動(dòng)畫
下面把10個(gè)玩家，分2組，放到峽谷圖片兩側(cè)。
...
...
這里每組的寬度，運(yùn)用了calc()來計(jì)算寬度，(100%-矩形對(duì)角線長度)/2。
中間是個(gè)邊長等于8rem的正方形，所以：對(duì)角線長度 = 8rem的平方 x 2 然后再開方。這里矩形對(duì)角線長度我們約等于13rem。
我們來添加每位player邊框加載動(dòng)畫
.player{
position: relative;
...
...
color: #fff;
}
.player::before,
.player::after {
position: absolute;
content: '';
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: -8%;
box-shadow: inset 0 0 0 .3rem;
animation: clipMe 6s linear infinite;
}
.player::before {
animation-delay: -3s;
}
@keyframes clipMe {
0%,
100% {
clip: rect(0, 4.8rem, 4.8rem, 4.3rem);
}
25% {
clip: rect(0px, 4.8rem, .3rem, 0);
}
50% {
clip: rect(0, .3rem, 4.8rem, 0);
}
75% {
clip: rect(4.3rem, 4.8rem, 4.8rem, 0rem);
}
}主要用到clip屬性。
clip 屬性剪裁絕對(duì)定位元素。
當(dāng)一幅圖像的尺寸大于包含它的元素時(shí)會(huì)發(fā)生什么呢？“clip” 屬性允許您規(guī)定一個(gè)元素的可見尺寸，這樣此元素就會(huì)被修剪并顯示為這個(gè)形狀。
唯一合法的形狀值是：rect (top, right, bottom, left)
這個(gè)屬性很好玩兒，有興趣的可以好好研究一下。
最后我們給兩個(gè)分組上面加高光效果
.group::before, .group::after{
position: absolute;
content: '';
background: linear-gradient(to right,#212f4602, #7499d7, #212f4602);
height: .3rem;
width: 10rem;
}
.group::before{
top: -1.5rem;
}
.group::after{
bottom: -1.5rem;
}
.group1::before{
right: 0;
}
.group1::after{
right: 5rem;
}
.group2::after{
left: 5rem;
}
ok，玩家這塊我們先修飾到這樣，有興趣的拉取源碼繼續(xù)碼。
背景鏤空旋轉(zhuǎn)正方形
...
這里的height為什么是17.6rem了？
這里也是計(jì)算通過勾股定理（a2+b2=c2）計(jì)算出來的啦。知道對(duì)角線就是容器的高度25rem，25x25/2再開方就得出了。
上方設(shè)了個(gè)醒目的顏色，把容器放到哪里，然后我們來美化一下它
...
用兩個(gè)div元素來制作邊框，邊框添加線性漸變樣式
下面繼續(xù)修飾一下鏤空正方形，這里寬高，之前是17.6，由于加了border和padding，所以去掉。
.matrix{
position: absolute;
/* 修改寬高 */
height: 16.7rem;
width: 16.7rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
z-index: 1;
/* 添加邊框，與間距 */
border: .1rem solid #7499d7;
padding: .4rem;
}
.border{
position: absolute;
/* 修改寬高 */
height: 16.7rem;
width: 16.7rem;
text-align: center;
}
正方形文字放大動(dòng)畫
這里就做了文字陰影，縮放暫時(shí)沒有實(shí)現(xiàn)，目前縮放會(huì)改變?cè)形淖?，所以必須重新copy一份文字，來做，有興趣的可以去試試。
.border::before,.border::after{
...
animation: text-an 1.5s linear infinite;
}
@keyframes text-an {
0%{
text-shadow: 0 0 0 #ffffff;
}
100% {
text-shadow: 0 -6rem .4rem #ffffff10;
}
}
文字按鈕制作
利用:before、:after偽類制作梯形。
...
確認(rèn)
“怎么用CSS3實(shí)現(xiàn)王者榮耀匹配人員加載頁面”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
分享名稱：怎么用CSS3實(shí)現(xiàn)王者榮耀匹配人員加載頁面
文章地址：http://weahome.cn/article/psdphj.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
