css3實現ae動畫冰激淋流動的遮罩效果

擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

昨天再次收到"月球居民愛麗絲"的投稿(非常感謝"月球居民愛麗絲")，希望做一個冰淇淋加載動畫，原圖：

看到如此美麗的冰淇淋是否想吃了？哈哈，大冬天的，還是不要了。今天我們就用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到每次開發的小經驗了？開發前先分析，分小步驟，完成各個功能點。

公告

喜歡小編的點擊關注，了解更多知識！

源碼地址和源文件下載請點擊下方“了解更多”

秘CSS3：打造視覺盛宴——深度解析漸變、陰影與遮罩技術

隨著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世界中的一道獨特風景。

TML中常用的布局元素：<table>、<div>+CSS

<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則不會，無論什么瀏覽器，網頁都不會出現變形情況。

HTML中常用的3種布局方式：

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屬性。

本文部分內容來自網絡，如有侵權，請聯系修改。

在線咨詢

上一篇：谷歌推出 AMP 計劃，移動設備可以秒開網頁
下一篇：開源精粹（第四期）！CSS+JS實現的文字伸縮炫彩動畫，真炫酷

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

css3實現ae動畫冰激淋流動的遮罩效果

前言

解析

第一步（結構）

第二步（動畫）

第三步（高光效果）

公告

秘CSS3：打造視覺盛宴——深度解析漸變、陰影與遮罩技術

一、魅力漸變：色彩的藝術流動

二、立體陰影：賦予元素生命與空間感

三、神奇遮罩：掌控元素可見度與透明度

四、實戰案例：融合三大技術，打造視覺盛宴

TML中常用的布局元素：<table>、<div>+CSS

HTML中常用的3種布局方式：

您的項目需求