使用Snap.svg外掛來建立SVG 動畫效果(結合hover)
SVG(Scalable Vector Graphics)
可縮放式向量圖形
這項外掛技術常被用於網頁動態效果展示及互動功能
用於描述二維向量圖形的一種圖形格式。
1.可在任何的分辨率下被高質量地打印
可縮放式向量圖形
這項外掛技術常被用於網頁動態效果展示及互動功能
用於描述二維向量圖形的一種圖形格式。
SVG和其他向量圖形相比，好處有:
SVG有向量圖形的優點，比方可以保持圖像清晰度，不會隨放大與縮小而有所失真，也不會大幅增加檔案的大小。
去官網 載 Snap.svg 函式庫
http://snapsvg.io/
按下右上角 Download 做下載
下拉一下可看 他強大的地方
複製它 貼移置 網站Folder
這是很常用的一個添加外掛函式包流程
在body中開始要撰寫了 svg標籤
SVG 開啟標籤<svg>
SVG關閉標籤</svg>
最乾淨俐落寫法
這裡我們把它放到 div盒子裡
並且利用 class 給這些 箱子 做命名
以利於之後我們
指定CSS樣式(以選擇器來指派)
選擇器主要分三種類型:
1.「Type」 --> <body>、<header>
2.「Class」-->前端開發者自行定義
3.「ID」-->前端開發者自行定義
Class 的宣告法:是先放一個句點 (.)，之後再列出選擇器名稱。
【一般單一宣告指定法】
選擇器{
屬性:設定值;
...........
............以此類推....
}
選擇器1 ,選擇器2,選擇器3 {
屬性:設定值;
...........
............以此類推....
}
【以星號(*)宣告:所有標籤都要繼承之屬性】
* {
margin:0;
padding:0;
font-size:25px;
.............
}
當然不只這些 還有很多像是ID等等指派宣告方法這裡先簡單介紹這幾種~~~
========================================================
首先我們先來改變網頁背景吧!!!
撰寫CSS代碼來修飾背景
用 background-color屬性作調整
用background屬性作調整也OK
之後我們要來針對body容器
設定body區塊高度100%
overflow: hidden; -------->非常重要的細節設定
容器溢出部位隱藏
========================================================
CSS overflow 的值列表
============================
目前呈現結果
============================
添加div標籤 用來做區隔
還有再多增加一個文字
<HTML部分的修改>
如果有多個標籤要使用相同樣式
可以使用「集體宣告」
讓程式碼便簡潔一些~~~
使 <html>和<body>標籤下
背景、高度等等屬性都有相同設定值
<CSS部分的修改>
黃色我覺得太亮了會傷眼睛!!!
這裡改一下CSS樣式
CSS_Step1.
CSS_Step2.
margin : 0 auto ;
margin裡的auto通常是用在「置中對齊」調整。
也就是我們將左右邊界值設定為「auto」，讓它產生置中對齊的效果。
position : relative ;
目前樣子 是一個黑框加上一串文字
我們接下來要來調整 利用 svg 畫出的 黑框樣式
在剛剛我們已經有用class取名為shape
我們要來進行 class 選擇器的樣式屬性值指定
stroke-dasharray 用來畫 dashed line(虛線)
範例連結:http://codepen.io/anon/pen/JXjmQv
http://codepen.io/anon/pen/ZWENpb?editors=1100
向量VS點陣-------->放大後會不會失真喔!!!!!
向量不失真
2.SVG 最大的優勢是與其他標準（比如XSL 和DOM）相兼容，是開放的標準
===============================向量不失真
2.SVG 最大的優勢是與其他標準（比如XSL 和DOM）相兼容，是開放的標準
屬開源前端技術，就如HTML、CSS一樣，我們可以讀取源代碼。
SVG可以被搜尋。SVG以XML寫成，而搜索引擎可以讀取XML內容。一般來說，搜索引擎無法搜索圖片，現在可以依圖片的特性搜索SVG圖檔。
SVG Tiny可適用於在手機上。
SVG有向量圖形的優點，比方可以保持圖像清晰度，不會隨放大與縮小而有所失真，也不會大幅增加檔案的大小。
所有瀏覽器均支持SVG文件，不過需要安裝插件的Internet Explorer除外去官網 載 Snap.svg 函式庫
http://snapsvg.io/
按下右上角 Download 做下載
下拉一下可看 他強大的地方
複製它 貼移置 網站Folder
這是很常用的一個添加外掛函式包流程
在body中開始要撰寫了 svg標籤
SVG 開啟標籤<svg>
最乾淨俐落寫法
這裡我們把它放到 div盒子裡
並且利用 class 給這些 箱子 做命名
以利於之後我們
指定CSS樣式(以選擇器來指派)
選擇器主要分三種類型:
1.「Type」 --> <body>、<header>
2.「Class」-->前端開發者自行定義
3.「ID」-->前端開發者自行定義
Class 的宣告法:是先放一個句點 (.)，之後再列出選擇器名稱。
【一般單一宣告指定法】
選擇器{
屬性:設定值;
...........
............以此類推....
}
【集體宣告指定法(Grouping)】
屬性:設定值;
...........
............以此類推....
}
【以星號(*)宣告:所有標籤都要繼承之屬性】
* {
margin:0;
padding:0;
font-size:25px;
.............
}
當然不只這些 還有很多像是ID等等指派宣告方法這裡先簡單介紹這幾種~~~
========================================================
首先我們先來改變網頁背景吧!!!
撰寫CSS代碼來修飾背景
用 background-color屬性作調整
用background屬性作調整也OK
之後我們要來針對body容器
設定body區塊高度100%
overflow: hidden; -------->非常重要的細節設定
容器溢出部位隱藏
========================================================
CSS overflow 的值列表
- overflow: auto; //預設會自動使用捲軸
我們來看看設置此值的結果
- overflow:visible; //顯示的文字或圖片會直接超出範圍，不使用捲軸。
- overflow:hidden; //自動隱藏超出的文字或圖片。(不完全顯示)
- overflow:scroll; //自動產生捲軸。
- overflow:inherit; //繼承自父元素的可見性
========================================================
文本對齊方式置中
============================
目前呈現結果
============================
添加div標籤 用來做區隔
還有再多增加一個文字
<HTML部分的修改>
如果有多個標籤要使用相同樣式
可以使用「集體宣告」
讓程式碼便簡潔一些~~~
使 <html>和<body>標籤下
背景、高度等等屬性都有相同設定值
<CSS部分的修改>
黃色我覺得太亮了會傷眼睛!!!
這裡改一下CSS樣式
CSS_Step1.
CSS_Step2.
margin : 0 auto ;
margin裡的auto通常是用在「置中對齊」調整。
也就是我們將左右邊界值設定為「auto」，讓它產生置中對齊的效果。
position : relative ;
position 屬性制定出要用哪一類的位置。可能的值有：
- static (預設值): 元素會被放在預設的地方。如果 position 的值是被設定為 statics 的話，那 top、bottom、left、和 right 的值就都沒有意義了。
- absolute: 這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時，元素也會跟著改變位置。
- relative: 這代表元素被放的地方將會與預設的地方有所不同。不同的程度是依照 top、bottom、left、和 right 的值而定。
- fixed: 這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時，元素的位置不會改變。
目前樣子 是一個黑框加上一串文字
我們接下來要來調整 利用 svg 畫出的 黑框樣式
在剛剛我們已經有用class取名為shape
我們要來進行 class 選擇器的樣式屬性值指定
stroke-dasharray 用來畫 dashed line(虛線)
範例連結:http://codepen.io/anon/pen/JXjmQv
http://codepen.io/anon/pen/ZWENpb?editors=1100
留言
張貼留言