遙領先~
可以點擊查看運行效果,雖然適配了手機屏幕,但是動畫效果還是火狐瀏覽器最流暢
最近在看到一位大佬用CSS寫了鴻蒙OS的開機動畫,不過只是字母O的出場特效,看完覺得挺有意思,就想著能不能把整個動畫效果給實現出來,說干就干,也不管能不能實現,拿起鍵盤就是一頓敲……
當然了,開始敲之前肯定是先在網上搜一波,看有沒有現成的,如果有人已經寫了并且還原度很高,那我直接copy過來看一下不就得了, 還敲個錘子……
然后我網上搜到的答案只有這兩個:
最后就是不想搞這么麻煩,只想用css一把梭,能用css實現的動效,我就不想用js……
仔細看了好幾遍鴻蒙OS的開機動畫,大致分成以下幾個階段:
首先需要考慮的一個問題是兼容,當然這里說的不是兼容IE……只是需要簡單兼容一下不同屏幕大小的顯示,確保在PC和手機上能正常顯示
簡單用媒體查詢rem布局寫了一下不同分辨率屏幕下的顯示大小,主要為了自己方便計算,這里貼一下代碼,不做太多解釋了,不熟悉的可以去了解一下rem布局的原理
html {
font-size: 10px;
}
@media screen and (max-width: 767px) {
html {
font-size: 6px;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
html {
font-size: 8px;
}
}
@media screen and (min-width: 1024px) and (max-width: 1199px) {
html {
font-size: 10px;
}
}
@media screen and (min-width: 1200px) {
html {
font-size: 12px;
}
}
字母O的睜眼動畫就不做解釋了,直接去看原文,我在此基礎上做了修改
html結構如下,做了一些修改
<div class="container">
<span class="delay">Harmony</span>
<div class="letter">
<ul class="ul">
<li class="harmony"></li>
</ul>
<ul class="ul">
<li class="harmony"></li>
</ul>
<svg>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="0 6" />
</filter>
</svg>
</div>
<span class="delay">S</span>
</div>
除了O之外其他字母顯現這個很容易,用opacity就可以實現,等2秒是讓字母O動畫結束后執行,加這個動畫的目的主要是先讓字母O執行完動畫,配合聚光燈效果
.delay{
opacity: 0;
animation: fade_in 2s 0.5s forwards;
}
@keyframes fade_in {
to {
opacity: 1;
}
}
整體縮小向左平移首先想到的是縮放然后向左平移,最后發現平移都沒必要了,直接默認整體放大,原點設置在左側中間位置,這樣縮小動畫的時候會整體以左邊為基點恢復到原位
chrome在放大后動畫感覺不是那么絲滑,沒關系,不用在意這些細節……用火狐瀏覽器效果不錯
scale(2.5)大概試了個值,這個時候字母O剛好在中間,差不多就行,不用在意這些細節……
cubic-bezier(0.1, 0.6, 0, 1)這個貝塞爾曲線是自己試出來的,感覺效果比較類似
.container {
position: relative;
display: flex;
justify-content: center;
font-size: 10rem;
color: white;
transform: scale(2.5);
transform-origin: 100% 50%;
animation: move 0.8s 1.5s cubic-bezier(0.1, 0.6, 0, 1) forwards;
}
@keyframes move {
to {
transform: none;
}
}
html結構新增<div class="shadow__spot"></div>與class="container"同級
這個其實我首先想到的就是類似聚光燈效果的蒙版擴散,所以在codepen上搜了一下,有個效果比較滿意:XWdRwrm,但是這個css屬性值不能使用動畫過渡,想實現的話應該需要js,所以我又想到了用漸變色做蒙版好像也可以,但是漸變色的屬性值也是不支持動畫過渡的,我改成紅色先看一下效果:
.shadow__spot {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, transparent 6rem, red 20rem);
animation: fade_spot 1s 1.5s forwards;
}
@keyframes fade_spot {
to {
background: radial-gradient(circle, transparent 30rem, red 60rem);
}
}
額……難道還得用js?
不,總有簡單粗暴的方法,既然不支持過渡,那就直接放大,放大到全部顯示為止……
.shadow__spot {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, transparent 6rem, red 20rem);
animation: fade_spot 1s 1.5s forwards;
}
@keyframes fade_spot {
to {
transform: translateX(10rem) scale(5);
}
}
效果好像還不錯,把顏色改成黑色就大功告成了
注意這里加了個translateX(10rem)讓蒙版向右偏移了一點,主要目的是為了盡量讓焦點聚焦在字母O上,更接近官方動畫效果,也是個大概值……
注意這里scale(5)放大5倍后是會出現滾動條的,所以在body上設置了overflow: hidden
這個比較簡單就不多做解釋了,直接flex布局,水平居中改變寬度就實現了
html結構中svg標簽下方添加<div class="line"></div>
.letter .line{
position: absolute;
bottom: 0;
width: 100%;
height: 1rem;
display: flex;
justify-content: center;
}
.letter .line::after{
content: '';
width: 0%;
background-color: #146df7;
animation: line 0.5s 1.7s forwards;
}
@keyframes line {
to {
width: 60%;
}
}
最后看一下最終效果,火狐瀏覽器比較絲滑,我錄個火狐的運行gif圖
是不是有內味了?
其實最后還有個掃光效果,懶得搞了,也是比較簡單,類似于骨架屏的掃光
篇文章主要給大家介紹一下使用html+css來模仿制作小米官方網站右側的浮動框。我們來看下邊的這個浮動框,位于小米官網的右側并且隨著頁面的滾動,一直浮動在右側不變;
我們通過上邊的圖片可以看出圖片有5個單獨的塊元素組成,每個塊元素鼠標經過都有一個單獨的顏色變為黃色的效果,然后第一個塊元素鼠標經過還會在左側彈出更多內容。接下來我們簡單說一下制作所用到的核心知識。
1、列表標簽(dl dd dt)的使用,使用dl和dd來完成前邊5個相同模塊的制作
2、鼠標經過(hover)的使用,第一個元素鼠標經過左側顯示,這個跟我們之前將的導航菜單類似,還有鼠標經過文字以及圖片改變顏色,這里可以使用hover之后改變背景圖片來實現;
3、浮動(fixed)的使用,該內容一直浮動在網頁右側,跟隨頁面一起滾動,我們可以使用position:fixed來實現;
大體了解了我們所要使用的知識點之后,我們就可以開始根據圖片上的內容來制作我們所需要的頁面了,具體的實現代碼就如下方所示:(首先寫一個div盒子,看到列表形式,直接使用dl和dd,然后每個元素內部有文字和圖片,使用h4標簽和span標簽來存放圖片和文字內容,就這么搞定了哈哈),來看代碼吧。
html代碼挺簡單的,我們啪啪敲完之后呢,剩下的就是書寫css代碼,來完成圖片所示的布局樣式的制作了。那么我們的css代碼就如下圖所示:(最外層box直接來個fixed和right、bottom配合,讓其浮動在右側,然后寫寫dl和dd的寬高,控制控制span的背景,隨便寫寫hover事件,ok完成了)。不多說了,看代碼吧。
好了,本篇文章就給大家說到這里,大家自己動手寫一下看能不能寫出一樣的頁面效果出來,也可以找一些類似的頁面自己練習一下,有需要源碼的可以直接私信【網站源碼】即可。
每日金句:只有知道別人心里在想什么,你才能得到你想要的。喜歡我的文章的小伙伴記得關注一下哦,每天將為你更新最新知識。
家好,今天分享的是仿京東登錄頁面的簡單實現方法(結構與樣式),首先我們依舊是先看下效果圖
下面是HTML結構
下面是CSS樣式
PS:本人也是小白一枚,自學沒幾天,疏漏之處在所難免,請多擔待!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。