如何使用HTML和CSS的排序動(dòng)畫以及SVG濾鏡
如何使用HTML和CSS的排序動(dòng)畫以及SVG濾鏡？針對(duì)這個(gè)問題，今天小編總結(jié)了這篇文章，希望能幫助更多想解決這個(gè)問題的朋友找到更加簡(jiǎn)單易行的辦法。
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、太和網(wǎng)絡(luò)推廣、成都小程序開發(fā)、太和網(wǎng)絡(luò)營(yíng)銷、太和企業(yè)策劃、太和品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供太和建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：bm7419.com
所涉及的動(dòng)畫也很復(fù)雜，因此本教程將重點(diǎn)介紹創(chuàng)建這些動(dòng)物以及栩栩如生的動(dòng)作所涉及的不同技術(shù)。放飛你的創(chuàng)意，自行創(chuàng)作獨(dú)特和俏皮的動(dòng)物動(dòng)畫吧。
塑造動(dòng)物外形
演示使用兩種不同的技術(shù)來創(chuàng)建動(dòng)物不同身體部位的形狀。哈士奇使用CSS border-radius屬性，狐貍使用內(nèi)聯(lián)背景SVG圖像，因?yàn)楹笳叩男螤罡鼜?fù)雜。
HTML標(biāo)記
兩只動(dòng)物都使用嵌套的HTML部分對(duì)身體部位進(jìn)行分組。分組的概念對(duì)于創(chuàng)造逼真的動(dòng)畫效果非常重要——當(dāng)頭部移動(dòng)時(shí)，眼睛和耳朵也應(yīng)該保持一起移動(dòng)，因?yàn)樗鼈兪情L(zhǎng)在頭上的。
<!-- Markup for the fox head -->
<p class="fox-head">
<p class="fox-face">
<p class="fox-ears">
<p class="fox-ear"></p>
<p class="fox-ear"></p>
</p>
<p class="fox-skull"></p>
<p class="fox-front"></p>
<p class="fox-eyes"></p>
<p class="fox-nose"></p>
</p>
</p>
<!-- Markup for the husky head -->
<p class="husky-head">
<p class="husky-ear"></p>
<p class="husky-ear"></p>
<p class="husky-face">
<p class="husky-eye"></p>
<p class="husky-eye"></p>
<p class="husky-nose"></p>
<p class="husky-mouth">
<p class="husky-lips"></p>
<p class="husky-tongue"></p>
</p>
</p>
</p>每個(gè)部分均可以獨(dú)立移動(dòng)，并隨著其父元素的移動(dòng)而移動(dòng)，這樣會(huì)產(chǎn)生更逼真的效果。不知道你發(fā)現(xiàn)沒有，尾巴是深深嵌套到其他尾部組件中的。當(dāng)每個(gè)尾巴部分相對(duì)于其母體定位，然后旋轉(zhuǎn)相同的量時(shí)，就會(huì)產(chǎn)生均勻曲線的視覺感。
用CSS塑造圖形
CSS的border-radius屬性大量用來塑造哈士奇的形象。對(duì)于許多元素要素，需要對(duì)每個(gè)邊界半徑進(jìn)行逐個(gè)控制。例如，下面是如何構(gòu)造哈士奇后腿的代碼：
.husky-hind-leg {
// ...
border-top-left-radius: 35% 100%;
border-top-right-radius: 40% 100%;
}第一個(gè)數(shù)字表示曲線從頂部/底部邊緣開始的深度，第二個(gè)數(shù)字表示曲線從左/右邊緣開始的深度。
其他形狀，如前腿，不能單獨(dú)用border-radius成形，需要使用transform成形：
.husky-front-legs > .husky-leg:before {
transform: skewY(-30deg) skewX(10deg);
transform-origin: top right;
}一旦圖形就位，那么每個(gè)元素就能在其父元素中被賦予絕對(duì)的基于百分比的位置。這確保每個(gè)身體部位的精確放置以及響應(yīng)性。
用SVG塑造圖形
至于狐貍，Sass-SVG被用來為每個(gè)身體部位創(chuàng)建復(fù)雜的SVG形狀。SVG圖像可以用作背景圖像，更好的是，只要它們是基于64或UTF-8編碼的，就可以被內(nèi)聯(lián)編寫（為了最大限度的瀏覽器支持）。
不過，SVG代碼手寫起來非常棘手。我使用Adobe Illustrator來創(chuàng)建初始形狀：
然后我將每個(gè)身體部分保存為SVG圖像。SVG代碼通過Sass-SVG傳輸?shù)絊CSS樣式表。例如，這是狐貍的鼻子：
.fox-nose:before {
@include svg((viewBox: (0 0 168 168))) {
// the nose
@include svg('path', (
fill: $color-nose,
d: 'M83.7,86.7c3.3,0,11.6-3.9,11.6-7.1c0-3.2-9.4-3.2-11.6-3.2c-2.2,0-11.6,0-11.6,3.2 C72.1,82.8,80.4,86.7,83.7,86.7z'
));
// the line connecting the nose to the mouth
@include svg('path', (
stroke: $color-nose,
fill: none,
d: 'M83.7,102.3V86.7'
));
// the mouth
@include svg('path', (
stroke: $color-nose,
fill: none,
d: 'M94.5,104.9c0,0-5.2-2.7-10.8-2.7c-5.6,0-10.8,2.7-10.8,2.7'
));
}
}這將在`url()`中生成一個(gè)編碼的內(nèi)聯(lián)SVG字符串，看起來像這樣：
.fox-nose:before {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg...");
}由于SVG是一個(gè)背景圖像，因此它可以被轉(zhuǎn)換和動(dòng)畫化，就像一個(gè)HTML元素一樣。使用Sass-SVG，Sass $variables可用于完全控制SVG填充和筆觸顏色。
通過內(nèi)聯(lián)SVG使狐貍響應(yīng)起來很簡(jiǎn)單。viewbox屬性值（(viewBox：(0 0 168 168))）直接來自SVG文件，但只要保持高/寬比率，那么包含SVG背景圖像的元素可以是任意大小。狐貍頭部的所有部分都是絕對(duì)定位的，具有與.fox-head相同的高度和寬度。
“Squigglevision”和SVG濾鏡
Squigglevision是一種通過擺動(dòng)形狀輪廓來模擬手繪動(dòng)畫的動(dòng)畫技術(shù)。這使得像狐貍和哈士奇這樣的場(chǎng)景看上去更加動(dòng)態(tài)化和手繪化，即使動(dòng)物在不動(dòng)的時(shí)候也是如此。
SVG有一個(gè)稱為<feTurbulence>的濾鏡，可以給任何應(yīng)用了此濾鏡的地方“噪聲”。結(jié)合<feDisplacementMap>濾鏡以指定像素在每個(gè)過濾器中移動(dòng)的距離。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="squiggly-0">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0"/>
<feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="2" />
</filter>
<filter id="squiggly-1">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
</filter>
<filter id="squiggly-2">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="2" />
</filter>
<filter id="squiggly-3">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
</filter>
<filter id="squiggly-4">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="1" />
</filter>
</defs>
</svg>屬性的任何元素。要?jiǎng)?chuàng)建“squigglevision”效果，關(guān)鍵幀動(dòng)畫快速地一次設(shè)置一個(gè)濾鏡
@keyframes squigglevision {
0% {
-webkit-filter: url('#squiggly-0');
filter: url('#squiggly-0');
}
25% {
-webkit-filter: url('#squiggly-1');
filter: url('#squiggly-1');
}
50% {
-webkit-filter: url('#squiggly-2');
filter: url('#squiggly-2');
}
75% {
-webkit-filter: url('#squiggly-3');
filter: url('#squiggly-3');
}
100% {
-webkit-filter: url('#squiggly-4');
filter: url('#squiggly-4');
}
}注意：這些SVG濾鏡目前在Firefox中似乎不起作用，因此可以將這樣的濾鏡動(dòng)畫視為一種漸進(jìn)增強(qiáng)處理。
給動(dòng)物添加動(dòng)畫特效
CSS關(guān)鍵幀不能為我們提供一種方便的排序和組合動(dòng)畫的方法。解決這個(gè)問題的最好方法是將動(dòng)畫計(jì)劃（故事板）作為時(shí)間軸，并使用預(yù)處理器，如Sass，生成關(guān)鍵幀。
例如狐貍，在概述每個(gè)動(dòng)畫應(yīng)發(fā)生的故事板之后，轉(zhuǎn)換和絕對(duì)時(shí)間偏移（秒）被用于對(duì)每個(gè)身體部分進(jìn)行動(dòng)畫處理。以下是SCSS中對(duì)狐貍鼻子進(jìn)行概述的一個(gè)例子：
$animations: (
// ...
'nose': (
// resting position
(4s, 5s, 7s): rotateY(-4deg),
// nose down
4.5s: rotateY(-4deg) rotateX(-3deg),
// fox looks left
(7.5s, 9s): rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg),
// fox looks right
(9.5s, 12s): rotateY(7deg),
// fox looks straight ahead
13s: rotateY(0),
),
// ...
);在這里，$animations是一類Sass map，其中鍵是動(dòng)畫的名稱（例如“nose”）。每個(gè)動(dòng)畫名稱的值是另一個(gè)map，其中鍵是以秒為單位的偏移或偏移列表（例如(7.5s,9s)），并且值是每個(gè)偏移鍵的transform屬性。
那么，我們?cè)趺窗堰@個(gè)map變成@keyframe動(dòng)畫呢？首先，設(shè)置全局的$duration: 17s變量——這將是每個(gè)動(dòng)畫的總持續(xù)時(shí)間。然后，使用嵌套的Sass @each ... in ... 循環(huán)，我們可以通過對(duì)$animations map循環(huán)為每個(gè)動(dòng)畫生成預(yù)期的CSS @keyframe聲明：
@each $animation-name, $animation in $animations {
// keyframe declaration
@keyframes #{$animation-name} {
@each $offsets, $transform in $animation {
@each $offset in $offsets {
// offset declaration block
#{percentage($offset / $duration)} {
// transform property
transform: #{$transform};
}
}
}
}
}這將生成如下所示的關(guān)鍵幀：
@keyframes nose {
14.70588% {
transform: rotateY(-4deg); }
23.52941% {
transform: rotateY(-4deg); }
29.41176% {
transform: rotateY(-4deg); }
41.17647% {
transform: rotateY(-4deg); }
26.47059% {
transform: rotateY(-4deg) rotateX(-3deg); }
44.11765% {
transform: rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg); }
52.94118% {
transform: rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg); }
55.88235% {
transform: rotateY(7deg); }
70.58824% {
transform: rotateY(7deg); }
76.47059% {
transform: rotateY(0); } }在不使用SCSS的情況下，這些百分比的計(jì)算可能非常繁瑣。它們代表動(dòng)畫的每個(gè)步驟中每個(gè)所需時(shí)間值相對(duì)于總$duration的百分比偏移量。
然后可以將動(dòng)畫應(yīng)用于它們各自的身體部位，例如animation: nose $duration none infinite;。每個(gè)動(dòng)畫的持續(xù)時(shí)間都得是一樣的，這樣它們可以無縫循環(huán)。
逼真的Easing Curves
制作動(dòng)畫的另一個(gè)重要組成部分是看上去要逼真，所以要為動(dòng)畫的每個(gè)部分仔細(xì)選擇（或創(chuàng)建）Easing Curves。最為生動(dòng)的Easing Curves是“正弦曲線”——換句話說，是平滑起伏的Easing Curves。這樣一來，自然動(dòng)作就不會(huì)僵硬地起動(dòng)或停止，animation-timing-function應(yīng)該能反映出來。
對(duì)于狐貍和哈士奇，我使用cubic-bezier(0.645, 0.045, 0.355, 1)（在這里預(yù)覽）。此曲線（見下文）開始略快，然后平穩(wěn)地停住。當(dāng)然，最好試驗(yàn)曲線以找到最適合動(dòng)畫的那種。
最后：在Chrome中，你可以直觀地檢查所有排序的動(dòng)畫，以確保它們?cè)谡_的時(shí)間發(fā)生。你只需打開控制臺(tái)，單擊Style選項(xiàng)卡，然后單擊播放按鈕即可：
希望本教程可以幫助啟發(fā)你創(chuàng)建更多的序列CSS動(dòng)物動(dòng)畫！
以上就是使用HTML和CSS排序動(dòng)畫以及SVG濾鏡的方法，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊，感謝各位的閱讀。
分享題目：如何使用HTML和CSS的排序動(dòng)畫以及SVG濾鏡
文章出自：http://bm7419.com/article18/jdssdp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、面包屑導(dǎo)航、網(wǎng)站排名、網(wǎng)站內(nèi)鏈、搜索引擎優(yōu)化、自適應(yīng)網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- SEO?如何優(yōu)化用戶體驗(yàn)? 2013-06-18
- 廣州SEO優(yōu)化讓網(wǎng)站營(yíng)銷更具優(yōu)勢(shì) 2022-05-23
- 對(duì)于百度的細(xì)雨算法，做網(wǎng)站營(yíng)銷要如何應(yīng)對(duì) 2013-05-03
- 微信小程序推廣方法 2016-10-05
- 學(xué)習(xí)各種營(yíng)銷干貨對(duì)幼兒園網(wǎng)站營(yíng)銷的作用 2022-01-23
- 成都網(wǎng)站營(yíng)銷推廣效果為何越來越差？ 2022-07-07
- 網(wǎng)站關(guān)鍵詞優(yōu)化的小技巧 2014-02-18
- 地域型關(guān)鍵詞優(yōu)化的思路是什么？ 2015-07-22
- 網(wǎng)站排名沒有效果該如何解決? 2013-12-28
- 域名對(duì)網(wǎng)站排名的必要性 2016-11-14
- 搜索引擎優(yōu)化另類技巧解讀 2016-11-04
- 用什么辦法提高網(wǎng)站的用戶體驗(yàn)度呢？ 2014-02-25