擊右上方紅色按鈕關注“web秀”,讓你真正秀起來
昨天再次收到"月球居民愛麗絲"的投稿(非常感謝"月球居民愛麗絲"),希望做一個冰淇淋加載動畫,原圖:
css3實現ae動畫冰激淋流動的遮罩效果
看到如此美麗的冰淇淋是否想吃了?哈哈,大冬天的,還是不要了。今天我們就用CSS來制作一個冰淇淋吧。
1、 拋開動畫部分,冰淇淋分為2部分,能吃的冰淇淋和下方的木棍(都是可以直接用樣式畫出的)
2、 動畫部分,細數有4種顏色,紅色、米色、藍色、橙色。
3、 冰淇淋左上方的高光效果
通過這樣的解析,你是不是也可以制作一個簡單冰淇淋了呢?
下面我們按步驟實現。
<div class="ice-cream"> <div class="body"></div> <div class="footer"></div> </div>
按照解析,我們把它也分成上下結構2部分,身體(冰淇淋)、腳(木棍)。
.ice-cream{ width: 50px; height: 120px; margin: 100px auto; } .body{ margin: 0 auto; width: 50px; height: 100px; border-radius: 30px 30px 10px 10px; background: red; } .footer{ width: 10px; height: 15px; margin: 0 auto; border-radius: 0 0 4px 4px; background: #a77b64; }
css3實現ae動畫冰激淋流動的遮罩效果
這個效果相信很多小伙伴都會實現,2部分都是通過border-radius圓角來改變形狀。這里就不做多的說明了。
同理,按解析,我們添加4種顏色到冰淇淋上面。
... <div class="body"> <div class="loading"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div>
添加不同顏色
.body{ position: relative; ... } ... .loading{ position: absolute; width: 200px; } .loading .line{ height: 40px; } .loading .line:nth-child(1){ background: #ff7632; } .loading .line:nth-child(2){ background: #46b0ff; } .loading .line:nth-child(3){ background: #fffce5; } .loading .line:nth-child(4){ background: red; }
css3實現ae動畫冰激淋流動的遮罩效果
發現把我們的整個冰淇淋都個蓋住了,這時只需要添加overflow: hidden;即可。
.body{ ... overflow: hidden; }
css3實現ae動畫冰激淋流動的遮罩效果
然后我們把顏色部分旋轉一個角度,并且使其動起來。
.loading{ position: absolute; width: 200px; top: -77px; left: -89px; transform: rotate(45deg); animation: move 2.5s linear infinite; } @keyframes move{ from { top: -77px; left: -89px; } to { top: 9px; left: -84px; } }
css3實現ae動畫冰激淋流動的遮罩效果
這時候你會發現怎么調整,動畫中間都會有斷層。
所以我的解決方案是,重新copy一份顏色,讓其可持續循環的。
<div class="loading"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> .loading{ position: absolute; top: -213px; left: -27px; width: 200px; transform: rotate(45deg); animation: move 2.5s linear infinite; } @keyframes move{ from { top: -213px; left: -27px; } to { top: -46px; left: -83px; } } .loading .line{ height: 40px; } .loading .line:nth-child(1), .loading .line:nth-child(5){ background: #ff7632; } .loading .line:nth-child(2), .loading .line:nth-child(6){ background: #46b0ff; } .loading .line:nth-child(3), .loading .line:nth-child(7){ background: #fffce5; } .loading .line:nth-child(4), .loading .line:nth-child(8){ background: red; }
這個就是在body上面添加一個圓弧。
大家應該都看過前面的CSS3動畫解析抖音 LOGO制作文章了,這里面有制作圓弧的示例。
.body:before{ position: absolute; content: ""; width: 25px; height: 25px; border: 5px solid #fff; border-right: 5px solid transparent; border-top: 5px solid transparent; border-left: 5px solid transparent; border-radius: 100%; top: 5px; left: 5px; transform: rotate(120deg); opacity: 0.7; z-index: 10; }
利用border畫出1/4的圓,就可以啦。
最終效果:
css3實現ae動畫冰激淋流動的遮罩效果
不知道大家有沒有get到每次開發的小經驗了?開發前先分析,分小步驟,完成各個功能點。
喜歡小編的點擊關注,了解更多知識!
源碼地址和源文件下載請點擊下方“了解更多”
隨著Web技術的不斷演進,CSS3以其強大的視覺表現力,賦予網頁設計無限可能。本文將深入剖析CSS3中的三大視覺魔法工具——漸變、陰影與遮罩技術,通過詳盡的理論講解和豐富的實例演示,助您掌握這些技巧,打造出令人眼前一亮的網頁視覺盛宴。
1. 線性漸變:平滑過渡,簡約而不簡單
css
background: linear-gradient(to right, #ff6b6b, #ff9595);
上述代碼創建了一個從左至右,由#ff6b6b漸變到#ff9595的線性漸變背景。您可以調整方向(如`to bottom`、`45deg`等)、添加更多顏色停止點來豐富漸變效果。
2. 徑向漸變:聚焦視覺中心,營造立體感
css
background: radial-gradient(circle at center, #f7f7f7, #dcdcdc);
此例中,我們創建了一個以元素中心為圓心,從#f7f7f7漸變到#dcdcdc的圓形徑向漸變背景。通過調整形狀(如`ellipse`)、大小(如`closest-side`)和位置(如`top left`),可以靈活定制徑向漸變樣式。
1. 盒子陰影(Box Shadow):輕松實現三維效果
css
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
上述代碼為元素添加了一個向右下偏移2px、模糊半徑為8px、顏色為rgba(0, 0, 0, 0.3)的陰影。理解盒陰影的基本參數(水平偏移、垂直偏移、模糊半徑、擴散半徑、顏色)并靈活運用,即可創造出豐富的陰影效果。
2. 文本陰影(Text Shadow):讓文字躍然紙上
css
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.?), -1px -1px 2px rgba(255, 255, 255, 0.5);
此處為文本設置了兩個陰影:一個向右下偏移、顏色較深的陰影,以及一個向左上偏移、顏色較淺的陰影,形成微妙的浮雕效果。通過疊加多個陰影、調整參數,您可以創作出各種獨特的文本樣式。
1. CSS Mask:精細裁剪,展現獨特視界
css
mask-image: linear-gradient(to right, transparent 0%, black 50%, transparent 100%);
該代碼為元素應用了一個從左至右的線性漸變遮罩,使得元素左側和右側各有一半區域透明。您還可以使用`mask-mode`、`mask-repeat`、`mask-position`等屬性進一步調整遮罩行為。
2. CSS Clip Path:創意裁剪,打破常規布局
css
clip-path: polygon(0 0, 100% 0, .png);
上述代碼使用多邊形裁剪路徑,將元素頂部裁剪成尖角形狀。您還可以使用橢圓、圓形、內切/外切矩形等多種路徑類型,甚至借助SVG路徑實現更為復雜的裁剪效果。
案例一:動態漸變按鈕
css
/* 定義CSS變量 */
:root {
--start-color: #ff6b6b;
--end-color: #ff9595;
}
.button {
background: linear-gradient(to right, var(--start-color), var(--end-color));
transition: background 0.3s ease-in-out;
}
.button:hover,
.button:focus {
--start-color: #ff9595;
--end-color: #ff6b6b;
}
利用CSS變量、偽類和動畫,創建一個點擊時背景漸變顏色動態變化的按鈕:
案例二:懸浮卡片與陰影交互
css
.card {
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
.card:hover {
box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.5);
}
結合盒子陰影與:hover偽類,實現鼠標懸停時卡片陰影增強的交互效果:
案例三:遮罩疊加文字特效
css
.image-overlay {
background-image: url('image.jpg'), linear-gradient(to bottom, transparent, black);
background-blend-mode: multiply;
mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}
利用遮罩與多重背景,創造出文字在圖片上淡入淡出的特效:
結語
CSS3的漸變、陰影與遮罩技術,如同網頁設計的調色板、光影魔術師和剪刀手,賦予網頁視覺表現無盡的可能性。通過深入理解并熟練運用這些技術,您將能打造出既美觀又富有創意的網頁界面,為用戶帶來極致的視覺體驗。持續探索、實踐與創新,您的每一個作品都將成為Web世界中的一道獨特風景。
<table>標簽:
<table>指的是表格,用表格來搭建界面布局,即用表格的嵌套,來搭建界面布局。
<table>布局優勢:
table優勢:開發時間短(使用DW開發速度快);純table各瀏覽器不會有兼容問題;內容可自適應;在搜索引擎排名能靠前;
但是 table如果布局變更,需要重新開發;如果table里有div ul 等,可能會出現瀏覽器兼容問題;加載速度慢;table嵌套的太多,運維是非常困難的。
<div>塊級(block-level)標簽:
DIV是層疊樣式表中的定位技術,全稱DIVision,即為劃分。有時可以稱其為圖層。
<div>布局優勢:
一.精簡代碼,減少重構難度。
網站使用DIV+CSS布局使代碼很是精簡,css文件可以在網站的任意一個頁面進行調用,而若是使用table表格修改部分頁面卻是顯得很麻煩。要是一個門戶網站的話,需手動改很多頁面,而且看著那些表格也會感覺很亂也很浪費時間,但是使用css+div布局只需修改css文件中的一個代碼即可。
二.網頁訪問速度
使用了DIV+CSS布局的網頁與Table布局比較,精簡了許多頁面代碼,那么其瀏覽訪問速度自然得以提升,也從而提升了網站的用戶體驗度。
三.SEO優化
采用div-css布局的網站對于搜索引擎很是友好,因此其避免了Table嵌套層次過多而無法被搜索引擎抓取的問題,而且簡潔、結構化的代碼更加有利于突出重點和適合搜索引擎抓取。
四.瀏覽器兼容性
若使用table布局網頁,在使用不同瀏覽器情況下會發生錯位,而div+css則不會,無論什么瀏覽器,網頁都不會出現變形情況。
1.流動式布局:是HTML網頁默認的布局方式
特點:
1.塊級元素都會在所處的包含元素內自上而下按順序處置延伸分布,且默認狀態下,塊級元素占整個文檔流,默認寬度為100%。
2.內聯元素都會在所處的包含元素內從左到右水平分布顯示,不占整個文檔流。
常見的塊級(block)元素有:<h1-h5> 、<table>、 <ul>、<li> 、<p> 、<form>、 ol
常見的內內聯(行內)元素有:<a>、<span>、<img>、<input>、<select>、<textarea>
2.浮動布局(float)
特點:
浮動布局依靠【 浮動屬性 float:left/right/... 】來使標簽脫離文檔流,達到兩個塊級元素并排顯示的效果。
float:left ; 浮動脫離當前文檔流浮動。
同時可以依靠【展示屬性display:inline/block/inline-block】來進行行內元素和塊級元素的效果切換。從而達到靈活運用塊級元素和行內元素布局的效果。
3.層模型布局又叫定位布局
特點:
當我們應擁div布局是,在第一層塊界面上來做第二層塊界面的開發時,就要用到我們所說的定位布局。
通過運用【定位屬性position:absolute/relative/fixed】 來進行第二層界面的定位布局。
網頁是靜態的,網頁上的定位
position:absolute ;絕對定位脫離文檔流,不受浮動影響,就是相對于窗體(body)邊界的margin定位。
position:relative; 相對定位不脫離文檔流,相對于父級標簽元素的位置定位。
position:fixed;固定位置,不會受任何因素影響。
滾動條移動前
滾動條移動后
優先層顯示方法:【屬性:z-index:0/1/2...】
特點: 數值越大,越優先顯示。
注意:只有元素使用了position屬性的,才具有z-index屬性。
本文部分內容來自網絡,如有侵權,請聯系修改。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。