整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

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

          擊右上方紅色按鈕關注“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到每次開發的小經驗了?開發前先分析,分小步驟,完成各個功能點。

          公告

          喜歡小編的點擊關注,了解更多知識!

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

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


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


          主站蜘蛛池模板: 成人国产一区二区三区| 国产av一区最新精品| 亚洲AV成人一区二区三区在线看| 竹菊影视欧美日韩一区二区三区四区五区 | 亚洲av成人一区二区三区| 一区二区三区高清视频在线观看| 无码精品尤物一区二区三区| 亚洲av日韩综合一区在线观看| 亚洲片国产一区一级在线观看| 色屁屁一区二区三区视频国产| 国产精品福利一区二区久久| 福利一区二区三区视频在线观看| 韩日午夜在线资源一区二区 | 中字幕一区二区三区乱码 | 国产成人综合精品一区| 国产精品福利一区| 日韩精品中文字幕视频一区| 亚洲av综合av一区二区三区 | 日韩AV无码一区二区三区不卡毛片 | 国产在线精品一区免费香蕉| aⅴ一区二区三区无卡无码| 精品一区二区三区无码免费直播 | 久久精品无码一区二区WWW| 日韩好片一区二区在线看| 乱子伦一区二区三区| 国产精品福利一区二区| 无码精品不卡一区二区三区| 日本一区免费电影| 国产精品第一区揄拍无码| 一区二区不卡久久精品| 波多野结衣AV无码久久一区| 日本中文字幕一区二区有码在线| 久久国产精品一区免费下载| 精品国产一区二区三区四区 | 亚洲综合一区二区国产精品| 精品视频无码一区二区三区| 午夜性色一区二区三区免费不卡视频| 精品一区二区视频在线观看| 日韩久久精品一区二区三区 | 一区二区三区四区在线观看视频| 亚洲A∨精品一区二区三区|