CSS3 SVG實現可愛的動物哈士奇和狐狸動畫
今天，我想向大家展示如何巧妙地使用HTML、CSS排序動畫和SVG濾鏡把生活中可能最可愛的東西之一——動物畫到網頁上。我們將探討繪製動物的兩種技術：一種使用純HTML和CSS，另一種使用內聯SVG背景影象。
此演示高度實驗性質——動畫SVG濾鏡目前僅在Chrome中可用。
所涉及的動畫也很複雜，因此本教程將重點介紹建立這些動物以及栩栩如生的動作所涉及的不同技術。放飛你的創意，自行創作獨特和俏皮的動物動畫吧。
話不多說，開始咯！
塑造動物外形
演示使用兩種不同的技術來建立動物不同身體部位的形狀。哈士奇使用CSS border-radius屬性，狐狸使用內聯背景SVG影象，因為後者的形狀更復雜。
HTML標記
兩隻動物都使用巢狀的HTML部分對身體部位進行分組。分組的概念對於創造逼真的動畫效果非常重要——當頭部移動時，眼睛和耳朵也應該保持一起移動，因為它們是長在頭上的。
| 12345678910111213141516171819202122232425262728293031323334 | <!--Markup forthe fox head--><div class="fox-head"><div class="fox-face"><div class="fox-ears"><div class="fox-ear"/><div class="fox-ear"/></div><div class="fox-skull" |
每個部分均可以獨立移動，並隨著其父元素的移動而移動，這樣會產生更逼真的效果。不知道你發現沒有，尾巴是深深巢狀到其他尾部元件中的。當每個尾巴部分相對於其母體定位，然後旋轉相同的量時，就會產生均勻曲線的視覺感。
用CSS塑造圖形
CSS的border-radius屬性大量用來塑造哈士奇的形象。對於許多元素要素，需要對每個邊界半徑進行逐個控制。例如，下面是如何構造哈士奇後腿的程式碼：
| 12345 | .husky-hind-leg{// ...border-top-left-radius:35%100%;border-top-right-radius:40%100%;} |
第一個數字表示曲線從頂部/底部邊緣開始的深度，第二個數字表示曲線從左/右邊緣開始的深度。
其他形狀，如前腿，不能單獨用border-radius成形，需要使用transform成形：
| 1234 | .husky-front-legs>.husky-leg:before{transform:skewY(-30deg)skewX(10deg);transform-origin:top right;} |
一旦圖形就位，那麼每個元素就能在其父元素中被賦予絕對的基於百分比的位置。這確保每個身體部位的精確放置以及響應性。
用SVG塑造圖形
至於狐狸，Sass-SVG被用來為每個身體部位建立複雜的SVG形狀。SVG影象可以用作背景影象，更好的是，只要它們是基於64或UTF-8編碼的，就可以被內聯編寫（為了最大限度的瀏覽器支援）。
不過，SVG程式碼手寫起來非常棘手。我使用Adobe Illustrator來建立初始形狀：
然後我將每個身體部分儲存為SVG影象。SVG程式碼通過Sass-SVG傳輸到SCSS樣式表。例如，這是狐狸的鼻子：
JavaScript| 1234567891011121314151617181920212223 | .fox-nose:before{@include svg((viewBox:(00168168))){// 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()中生成一個編碼的內聯SVG字串，看起來像這樣：
| 123 | .fox-nose:before{background-image:url("data:image/svg+xml;,%3Csvg...");} |
由於SVG是一個背景影象，因此它可以被轉換和動畫化，就像一個HTML元素一樣。使用Sass-SVG，Sass $variables可用於完全控制SVG填充和筆觸顏色。
通過內聯SVG使狐狸響應起來很簡單。viewbox屬性值（(viewBox：(0 0 168 168))）直接來自SVG檔案，但只要保持高/寬比率，那麼包含SVG背景影象的元素可以是任意大小。狐狸頭部的所有部分都是絕對定位的，具有與.fox-head相同的高度和寬度。
“Squigglevision”和SVG濾鏡
Squigglevision是一種通過擺動形狀輪廓來模擬手繪動畫的動畫技術。這使得像狐狸和哈士奇這樣的場景看上去更加動態化和手繪化，即使動物在不動的時候也是如此。
SVG有一個稱為的濾鏡，可以給任何應用了此濾鏡的地方“噪聲”。結合濾鏡以指定畫素在每個過濾器中移動的距離。
| 123456789101112131415161718192021222324 | <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> |
屬性的任何元素。要建立“squigglevision”效果，關鍵幀動畫快速地一次設定一個濾鏡
| 12345678910111213141516171819202122 | @keyframessquigglevision{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中似乎不起作用，因此可以將這樣的濾鏡動畫視為一種漸進增強處理。
給動物新增動畫特效
CSS關鍵幀不能為我們提供一種方便的排序和組合動畫的方法。解決這個問題的最好方法是將動畫計劃（故事板）作為時間軸，並使用前處理器，如Sass，生成關鍵幀。
例如狐狸，在概述每個動畫應發生的故事板之後，轉換和絕對時間偏移（秒）被用於對每個身體部分進行動畫處理。以下是SCSS中對狐狸鼻子進行概述的一個例子：
| 12345678910111213141516171819202122 | $animations:(// ...'nose':(// resting position(4s,5s,7s):rotateY(-4deg),// nose down4.5s:rotateY(-4deg)rotateX(-3deg),// fox looks left(7.5s,9s):rotateX(-3deg)rotateY(-28deg)rotateZ(-11deg),// fox looks right(9.5s,12s):
相關推薦CSS3 SVG實現可愛的動物哈士奇和狐狸動畫今天，我想向大家展示如何巧妙地使用HTML、CSS排序動畫和SVG濾鏡把生活中可能最可愛的東西之一——動物畫到網頁上。我們將探討繪製動物的兩種技術：一種使用純HTML和CSS，另一種使用內聯SVG背景影象。 此演示高度實驗性質——動畫SVG濾鏡目前僅在Chrome中可用。 所涉及的動畫也很複雜，因此本教程將 哈士奇的壽命有多長寵物狗 哈士奇的壽命到底有多長？一般來說狗狗的壽命維持在10-15年，品種不一樣老化的也不一樣，大型犬老化的比較快，小型犬則稍微慢點。其實這和平時主人是怎麽餵養他們，有沒有定期的去帶著他們檢查身體，定時打針吃藥有關，平時只要註意關心點哈士奇的身體情況和運動和疾病 01揹包-01 高數Umaru系列（9）——哈士奇高數奧馬魯系列（9） - 哈士奇 時間限制：1000毫秒記憶體限制：65536 KiB 提交 統計資訊 問題描述 由於高數巨養的喵星人太傲嬌了，要天天吃新鮮貓糧而且還經常欺負高數巨，所以高數巨決定買幾條哈士奇嚐嚐鮮。這天高數巨來到了二手狗市場買哈士奇，高數巨看完了所有的 SDUT 4367 哈士奇“跳啊跳”哈士奇“跳啊跳” Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 哈士奇喜歡 狼與哈士奇狼是自然界中真正的掠食者，而哈士奇不過是人類的玩物。兩者長得確實很像，就如同IT界的Programmer和Coder。如果用狼和哈士奇來隱喻這兩種職業，Programmer無疑是軟體業真正的狼。 一 “哈士奇”的習性 他們寫出機器可以理解的程式碼。 他們的程式碼依靠註釋 哥本哈士奇(aspnetx)這個筆記系列主要記錄了在BI專案中，如何搭建環境進行原始碼管理以及文件管理。 用到的產品包括： TFS Express Sharepoint Visual Studio SQL Server 配置Sharepoint2013支援文件版本管理筆記 搭建程式碼管理環境之服務端 搭建程式碼管理環 svg實現 圓形 點擊擴大、消失move doctype tns creat src reat 每次 浮點 func 效果： 代碼： <!DOCTYPE html> <html> <head lang="en"> <meta charset=" CSS3怎樣實現超出指定文本以省略號顯示效果sans display ont 自己 gravity data- utl 省略號 mar 作者：zhanhailiang 日期：2014-10-24 不做前端非常久了。今天從重構師那裏了解到CSS3已經能夠實現非常多以往必須通過JS才幹實現的效果。如漸變，陰影 5個CSS3技術實現設計增強有意 ref 瀏覽器 ott tro load 如何 posit rgba 層疊樣式表(css)是Web設計的一種語言，CSS的下一代版本CSS3已經蓄勢待發。你是否可望開始使用它們卻又不知從何下手呢？雖然還有一些新屬性沒有得到官方的確認，但是一些瀏覽器已經開始支持 SVG實現波浪效果xmlns 動畫效果 middle form circle spa version text translate SVG實現波浪效果 svg path：C 貝塞爾曲線繪制波浪形狀 A 繪制圓弧形 svg animate：制作波浪動畫，為了波浪動畫效果自然， [轉載] 用HTML5和CSS3完美實現網頁中動起來的箭頭我們經常看到許多網站或者H5的動畫都做成了整屏切換的形式，為提高使用者體驗，會在首屏頁面下方放上一個動態的向下箭頭來提示使用者切換至下一屏。 動態箭頭的效果圖如下： 那麼這種效果是如何實現的呢？ 其實非常簡單，在CSS3中提供了animation屬性，專門用於動畫。要使用這個屬性，需要先了解@ 使用css3漸變實現多個內圓角<!DOCTYPE html> <html> <body> <div class="iner"></div> <style type="text/css"> .iner{ width: 200px; height: SVG實現描邊動畫SVG動畫效果 先來放一個自己寫的效果： OK，現在我們來聊一聊SVG描邊動畫的實現 一、基礎知識 1、stroke相關屬性 stroke：表示描邊的顏色。 stroke-width ：表示描邊的粗細。 stroke-linecap ：表示 [006]-svg實現花朵效果預覽 https://codepen.io/strugglingBoy/pen/jeGJxZ 程式碼下載 https://github.com/enstrongbill/daily-frontend-exercise/tree/master/028-abstract css3如何實現圓角邊框圓角邊框是css3新增屬性，在圓角邊框出現之前，前端開發有的採用整塊的圓角圖片作為背景，有的採用小的圓角圖片分別放在元素的四角，非常麻煩，靈活性差，也達到降低了網站的整體效能，而圓角邊的出現則降低了開發和維護的難度。 css3實現圓角邊框 圓角邊框（boder-radius）的基本用法： 圓角邊框的最基 CSS3如何實現div閃爍效果效果： Html: <h1 class="blink">花花世界</h1> Css: 1 @keyframes fade { 2 from { 3 opacity: svg實現漸變進度圓環效果圖 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>svg 圓形進度條</title> <m svg實現文字的垂直居中對齊樣式專案中用到表格內畫折線趨勢圖，本人使用的svg繪製簡單折線；沒有資料的單元格顯示文字，為了不影響表格的寬度自適應，就想到在svg上寫文字。於是就有了在svg上對文字樣式進行垂直居中的需求，上程式碼： <svg version="1.1" className={Style.svgLine 躁動的web動畫——svg實現煙花1.目標——svg煙花（難度：4.3） 本期我們的目標是當滑鼠點選頁面時，點選處會綻開彩色的煙花. 煙花會逐漸滑落消失，滑落時會留下軌跡.煙花每個分支的形狀為實心或空心的各種形狀. 2.分析需求——庖丁解牛 1.滑鼠點選頁面時，需將滑鼠的clientX,client 微信小程式之店鋪評分元件及vue中用svg實現的評分顯示元件在微信小程式中，有遇到要展示店鋪評分，或者是訂單完成後對商品進行評價，用到了星星展示，查了下，在微信中無法使用svg實現圖片，微信中只能將svg圖片轉成base64來顯示，所以是在vue中使用的svg來實現評分 1.效果圖 微信中的可以點選及顯示，但是，顯示的話，在4.2分， |