Google Fonts 中文 :
1. cwTeXKai (Chinese Traditional) 楷體 2. cwTeXYen (Chinese Traditional) 圓體 3. cwTeXFangSong (Chinese Traditional) 仿宋體 4. Noto Sans TC (Chinese Traditional) 黑體(思源黑體) 5. cwTeXMing (Chinese Traditional) 明體 中文網路字型 目前是放在Google Fonts Early Access 這個頁面 下載網址:https://fonts.google.com/earlyaccess <網頁運用網路字型的方法> 如果網頁要使用 cwTeXKai 楷體字型 在你的網頁css檔案裡 輸入 : ---------------------------------------------- @import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css); /*-------載入 google楷體字型CSS進來你的網站---------*/ body { font-family: ‘cwTeXKai’, serif; } /*-----看你要全body用楷體還是只在某部分用都OK。----*/ ---------------------------------------------- 就OK了~ 其他字型也是一樣方法 cwTeXYen 圓體 : @import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css); body { font-family: ‘cwTeXYen’, sans-serif; } cwTeXFangSong仿宋體 : @import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css); body { font-family: ‘cwTeXFangSong’, serif; } Noto Sans TC 黑體(思源黑體) @import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css); body { font-family: ‘Noto Sans TC’, sans-serif; } cwTeXMing 明體 @import url(https://fonts.googleapis.com/earlyaccess/cwtexming.css); body { font-family: ‘cwTeXMing’, serif; }
0 評論
之前工作會用到這個是因為客戶覺得GIF動畫解析度太低,因為那張圖片蠻大張(1024*768)的,再跑GIF動畫時,太多顆粒狀,不好看。
想到之前有看過類似的文章,上網查了一下作法。 PS作圖寬度不能超過3萬,會只能存tiff檔,所以以單張(1024*768)像素尺寸作圖的畫,要注意動畫不要太複雜。 不過基本上網頁都是不需要太大的圖,上面工作例子算是特例~ ------------------------------------------------------------------------------------ 透過變換keyframes中的背景來實現逐格動畫,例如0%和100%分別使用不同的background就實現了最簡單的畫面切換。一般的做法是先將動畫的不同影格做成一張sprite圖(雪碧圖=>大陸翻譯),然後變換background-position來達到效果。 CSS sprite 線上產生器 : https://www.toptal.com/developers/css/sprite-generator *注意: 下圖它產生出來的順序變成第7張在第一張的位置,所以合好之後要注意一下..... 剛剛鬼打牆3小時找問題,發現是圖片的順序錯了(眼神死...)
下載的sprite圖 . (英文好難念...) 哀 . 應該第一時間發現下圖是錯的Q_Q
直接看codepen
See the Pen CSS STEPS逐格動畫 by jing (@jing-jing) on CodePen. transform (變形-高矮胖瘦縮放、旋轉移動傾斜等 )跟 transition(變化 / 轉變 / 過渡 / 改變的過程 )
---------------------------------------------------------- * transform 屬性 : 一樣W3school 附上 http://www.w3school.com.cn/cssref/pr_transform.aspwww.w3school.com.cn/cssref/pr_transform.asp 中心點 : transform-origin: 50% 50% 0 ; 這是默認值,中心點為起點 transform-origin: 100% 100% 0; 以右下角為起點 transform-origin: 0 0 0 ; 以左上角為起點 <移動> translate( x , y ) 2D 移動。X/Y軸座標移動 transform : translate(50px,100px); -ms-transform : translate(50px,100px); /* IE 9 */ -webkit-transform : translate(50px,100px); /* Safari and Chrome */ -o-transform : translate(50px,100px); / * Opera */ moz-transform : translate(50px,100px); /* Firefox */ translate3d( x , y , z ) 3D 移動。X/Y/Z軸移動 translateX( x ) X 軸移動。 translateY( y ) Y 軸移動。 translateZ( z ) Z 軸移動。 <縮放大小> scale( x , y ) 2D 縮放。X/Y軸縮放。 transform : scale( 0.5 , 0.2 ) = X軸(寬度)變一半,Y軸(高度)變0.2倍 scale3d( x , y , z )定義3D 縮放。 scaleX( x )設置X 軸的值來縮放。 scaleY( y )設置Y 軸的值來縮放。 scaleZ( z )設置Z 軸的值來3D 縮放。 <旋轉> rotate( angle ) 2D 旋轉,transform : rotate(50deg) = 旋轉50度 rotate3d( x , y , z , angle) 3D 旋轉。 rotateX( angle )X 軸的3D 旋轉。 rotateY( angle )Y 軸的3D 旋轉。 rotateZ( angle )Z 軸的3D 旋轉。 <傾斜> skew( x-angle , y-angle )X 和Y 軸的2D 傾斜。 transform : skew(-20deg,0deg) => 平行四邊形 skewX( angle )X 軸的2D 傾斜。 skewY( angle )Y 軸的2D 傾斜。 --------還沒看過例子---------------- perspective( n )為3D 轉換元素定義透視視圖。 matrix( n , n , n , n , n ,n )把所有2D 轉換方法組合在一起,使用六個值的矩陣。 matrix3d( n , n , n , n , n, n , n , n , n , n , n , n ,n , n , n , n )定義3D 轉換,使用16 個值的4x4 矩陣。 ------------------------------------- 支援度 : IE 10、Firefox、Opera 支持transform 屬性。 IE 9 需要前綴詞。支持替代的-ms-transform 屬性(僅適用於2D 轉換)。 Safari 和Chrome 支持替代的-webkit-transform 屬性(3D 和2D 轉換)。 Opera 只支持2D 轉換。 * transition 屬性 : div { /*----------------指定寬度屬性要變化,時間長為2秒-------------------------*/ width:100px; height: 200px; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari和Chrome */ -o-transition: width 2s; /* Opera */ } div:hover { width:300px; height : 500px; } => 滑入DIV時,寬度花2秒變長到300px,高度是直接變長,沒有動感。 transition不指定屬性的話,hover時就會寬高都有動態的變化。 * 需要多個樣式添加過渡效果,請添加多個屬性,由逗號隔開: div { transition: width 2s, height 2s, transform 5s; } div:hover { width:200px; height:200px; transform:rotate(180deg); } =>寬高變化 花2秒 ; 旋轉花5秒。秒數一樣可以寫成div { transition: 2s; }就好。 有DEMO可玩 http://www.w3school.com.cn/css3/css3_transition.asp ============== transition 簡寫屬性,用於在一個屬性中設置四個過渡屬性。 transition-property 過渡的CSS 屬性的名稱。 transition-duration 定義過渡效果花費的時間。默認是0。 transition-timing-function 規定過渡效果的時間曲線。默認是"ease"。 transition-delay 規定過渡效果何時開始。默認是0。 div { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; } 簡寫=> div { transition: width 1s linear 2s ; } 延遲2秒才開始寬度變化 ============== 支援度 : IE 10、Firefox、Chrome 以及Opera 支持transition 屬性。 Safari 需要前綴-webkit-。 PS: IE 9以及更早的版本,不支持transition屬性。 PS : Chrome 25以及更早的版本,需要前綴-webkit-。
先來了解 CSS animate的八大屬性,W3C school可以玩玩
http://www.w3school.com.cn/cssref/pr_animation.asp
animation: move 20s linear 0s infinite; -webkit-animation: move 20s linear 0s infinite; -o-animation: move 20s linear 0s infinite; -moz-animation : move 20s linear 0s infinite; -ms-animation : move 20s linear 0s infinite; /*---------名稱 / 動畫執行時間 / 速率 / 延遲幾秒 / 播放次數或循環---------*/ 支援度 : IE 10、Firefox 以及 Opera 支持 animation 属性。 Safari 和 Chrome 支持替代的 -webkit-animation 属性。 PS:IE 9 以及更早的版本不支持 animation 属性。 @keyframes 像是flash的關鍵影格,定義哪時要做哪些變化效果 http://www.w3school.com.cn/cssref/pr_keyframes.asp 定義move 要做啥動作 / 幫move 做關鍵影格 @keyframes move { 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} } 這邊的move就是剛剛上面 "animation: move 20s linear 0s infinite;" 的move--(繞口令) @keyframes是動作指令, 那誰要做這些動作就看哪些物件的css animation有提到啦 可以聽聽喜歡忍者的老外講解keyframes,順便練英聽 ( 默默打開字幕 )
@keyframes move {
from{ transform : translateX(0) } /*-----0% 的意思---------*/ to{ transform : translateX(500px) } /*-----100% 的意思---------*/ }
→按鈕 : 可選擇自訂class或 使用input[type=submit]
<input class="subscription_btn" type="submit" > input[type=submit] { 樣式 ...省略 } .subscription_btn { 樣式 ...省略 } 個人習慣這個 →搜尋框 / 選項按鈕 →表單placeholder 上網逛逛有看到不錯的範例,點擊時placeholder可以縮小當說明,而非消失。 https://github.com/richardvenneman/floatl 不過他這個需要每多一個欄位就寫一行JS <script type="text/javascript"> new Floatl(document.querySelectorAll('.js-floatl')[0]) new Floatl(document.querySelectorAll('.js-floatl')[1]) new Floatl(document.querySelectorAll('.js-floatl')[2]) 有4格欄位就要寫4個 </script> 下方是另一種 純 CSS 的,個人比較喜歡。如果表單list很長的話,可以用這種。 https://circleci.com/blog/adaptive-placeholders/ 作者的codepen : See the Pen Adaptive Placeholder by Danny King (@dannykingme) on CodePen. See the Pen Liquid Radio Button using SVG and GSAP (GreenSock) by Ryan LaBar (@ryan_labar) on CodePen.
看到有網站用這招,不過感覺是某個套件寫的,看了CSS想說自己也出來試看看。
內嵌YOUTUBE影片(iframe)後,在上面蓋一層圖片,圖片設透明度0.7左右 目前缺點 : 右下YOUTUBE會曝光 影片寬度沒有100% 視窗寬度拉窄之後,影片是垂直置中在100vh的容器裡@_@,怪怪的哩 還要再修改 See the Pen youtube vedio iframe+image by jing (@jing-jing) on CodePen. |