TP Notes: CSS 筆記

顯示具有 CSS 筆記 標籤的文章。顯示所有文章

2020年11月18日星期三

CSS 狀態改變動畫

之前寫了一篇 [CSS 動畫](https://yhtpnotes.blogspot.com/2020/05/css.html) 時，忘了應該先寫這個狀態變化的動畫，大部份的應用都是用在滑鼠移到上面時的用動畫方式改變狀態，實際上，這個功能對於所有狀態變化都可以變成動畫
  
參數說明：

```
transition                  [動畫持續時間] [delay 多久開始] [timing-function]
transition-delay            [delay 多久開始]
transition-duration         [動畫持續時間]
transition-property         [指定改變的屬性]
transition-timing-function  [動畫 timing]
  
```
  
我個人偏好不使用 transition-property ，這樣可以更自由的使用這個功能
  
首先先來一個最簡單的範例:

在 **#a11181_div:hover** 裡頭加了 **transition: 1s** 後
，滑鼠移過去時，顏色會慢慢的變成黃色，同時長度從 100px 慢慢變成 200px，
當滑鼠移開時，因為在 **#a11181_div** 加上了 **transition: 0.2s;** 
，會以動畫方式很快的恢復原狀，如果沒有加上 **transition** ，狀態會瞬間改變，不會有動畫效果，另外還有加上 **transition-delay** , 所以會等 0.5 秒後才開始動畫 
  
而下面的 [SET] 和 [UNSET] 是利用 javascript 去做設定，結果一樣會以動畫顯示, 當用 javascript 設定時，是直接寫在元件上，所以 hover 改變 width 就沒作用了，而 [CSS SET] 和 [CSS UNSET] 的是直接修改本來的 CSS 設定，所以不影響 hover 。
  
```
$mmcode(r1)
```
<div class="mmresult r1">
<style id="a11181_css">
#a11181_div
{
  width: 100px;
  height: 100px;
  background-color:#f00;
  transition: 0.2s;
  transition-delay:0.5s;
  transition-timing-function: linear; 
}
#a11181_div:hover
{
  background-color:#ff0;
  width:200px;
  transition: 1s cubic-bezier(0.6, -0.6, 0.1, 1.6);
}
#a11181_set button
{
  font-size:1em;
}
</style>

<div id="a11181_div">
</div>
<br>
<div id="a11181_set">
<button id="a11181_bb">SET</button>
<button id="a11181_bb1">UNSET</button>
<button id="a11181_bb2">CSS SET</button>
<button id="a11181_bb3">CSS UNSET</button>
</div>
<script>
$("#a11181_bb").on("click",function()
{
  $("#a11181_div").css("width","300px");
});
$("#a11181_bb1").on("click",function()
{
  $("#a11181_div").css("width","");
});
$("#a11181_bb2").on("click",function()
{ 
  var rc=cssjson("#a11181_css"); 
  rc.set("#a11181_div",
  {
    width:"300px"
  });
});
$("#a11181_bb3").on("click",function()
{ 
  var rc=cssjson("#a11181_css"); 
  rc.set("#a11181_div",
  {
    width:"100px"
  });
});
</script>  
</div>

2020年8月13日星期四

css 的 mask

CSS 有一個小功能是 mask , 可以用來製作遮罩，和 clip-path 不同的地方是，他可以用漸層或用另一個圖片的 alpha 來做裁切, 範例如下 :
  
```
$mmcode(r1)
```

<div class="mmresult r1">
  
<style>
.a08131_aa
{
  width:300px;
  -webkit-mask-image:repeating-linear-gradient(0deg, 
      #00000000,#000000ff 25%,#00000000 50%),
repeating-linear-gradient(90deg, 
      #00000000,#000000ff 25%,#00000000 50%)
}
.a08131_bb
{
  width:300px;
  -webkit-mask-image:repeating-radial-gradient(
      #000000ff,#00000000 50%,#00000088);
}
.a08131_cc
{
  width:300px;
  -webkit-mask:url(https://yiharng.github.io/bomb.png) 0 0/150px 80px repeat ;
}
</style>

完整語法是 :

```
-webkit-mask: url(圖片) x y/寬 高 repeat;

-webkit-mask-image: url(圖片);
-webkit-mask-position: x y;
-webkit-mask-size: 寬 高;
-webkit-mask-repeat: repeat 或 no-repeat;

```

其它更詳細的參數可以參考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask

2020年7月17日星期五

background

網頁上要秀一張圖，第一個想到的是 `<img src=xxx>` 這個方式，後來才發現有個更好用的，就是 background-image , 雖然知道有些特別的用法，卻一直沒有去深入瞭解, 所以在這做個小筆記!

```
$mmcode(r1)
```

<div class="mmresult r1">
<style>
/*
   background 可以設定很多張圖片，只需用逗號分隔, 
   上下層是由上而下，第一個圖片會在最上方
   background-size 還有很有用的參數 cover 和 contain ，
   讓圖片盡量填滿整個區域
*/
.a07171_aa
{
  width:20em;
  height:10em;
  background-color: #ff0;
  background-image: url(https://yiharng.github.io/bomb.png)
                   ,url(https://yiharng.github.io/bird.jpg);
  background-position: 0em 0em,2em 0em;
  background-size: 5em 5em,16em 10em;
  background-repeat: repeat, no-repeat;
}
/*
   可以用下面這個方式合併來寫
*/
.a07171_bb
{
  width:20em;
  height:10em;
  background:url(https://yiharng.github.io/bomb.png) 0em 0em/5em 5em repeat
      , #ff0 url(https://yiharng.github.io/bird.jpg) 2em 0em/16em 10em no-repeat;
  
  /*
      注意那個 #ff0 背景顏色設定，必須在最後一個才能設定
  */
}
</style>

背景圖片不一定要用圖片，也可以用 repeating-linear-gradient 和 repeating-radial-gradient 來產生線性漸層或圓形漸層的背景, 如果再控制好大小和座標，基本上可以用來畫圖了
  
```
$mmcode(r2)
```
  
<div class="mmresult r2">
<style>
.a07172_c1
{
  width:20em;
  height:10em;
  background-image: 
    repeating-linear-gradient(0deg, 
      #00000088,#00000055 1em, 
      transparent 1em,transparent 3em)
    ,repeating-linear-gradient(90deg, 
      #00000088,#00000055 1em, 
      transparent 1em,transparent 3em)
    ,repeating-radial-gradient(
      #f00, #ff0 10%, #0f0 15%,#f00 20%);
  background-position:0em 0em,0em 0em,10em 1em;
  background-size:auto auto,auto auto,5em 5em;
  background-repeat:no-repeat;
}
</style>

<div class="a07172_c1">
</div>
</div>
  
repeating-linear-gradient 很好玩的地方就是, 他自帶 repeat 功能，可以很容易實現尺規的繪製

```
$mmcode(r3)
```
  
<div class="mmresult r3">
<style>
.a07173_c1
{
  width:6.1em;
  height:1em;
  background: 
    repeating-linear-gradient(90deg, #000,#000 0.1em,#0000 0.1em,#0000 1em) 0em 0em,
    repeating-linear-gradient(90deg, #000,#000 0.05em,#0000 0.05em,#0000 1em) 0.525em 0.5em/auto 1em,
    repeating-linear-gradient(90deg, #000,#000 0.02em,#0000 0.02em,#0000 0.1em) 0.04em 0.7em/auto 1em
    ;
  background-repeat:no-repeat;
  font-size:3em;
}
</style>

repeating-radial-gradient 可以用來畫圓，加上 ::before 及 ::after 用邊框來畫三角形，就可以畫出之前靠邊框做不到的箭頭  
  
```
$mmcode(r4)
```
  
<div class="mmresult r4">
<style>
.a07174_c1
{
  width:10em;
  height:10em;
  background: 
    repeating-linear-gradient(0deg, #0000,#0000 40%,#fff 40%,#fff 60%) 0em 0em,
    repeating-radial-gradient(#0000, #0000 40%, #0bb 0%, #0bb 60%) 0em 0em;
  background-repeat:no-repeat;
  background-color:#fff;
  position:relative;
  border-radius:100em;
  animation:a07174_a1 3s 0s linear infinite;
}
.a07174_c1::before
{
  content:"";
  position:absolute;
  width:0;
  height:0;
  border:#000 solid 1.3em;
  border-color:#0000 #0bb #0bb #0000;
  left:68%;
  top:20%;
  transform:rotate(30deg);
}
.a07174_c1::after
{
  content:"";
  position:absolute;
  width:0;
  height:0;
  border:#000 solid 1.3em;
  border-color:#0bb #0000 #0000 #0bb;
  left:6%;
  top:53%;
  transform:rotate(30deg);
}
@keyframes a07174_a1
{
  100%
  {
    transform:rotate(360deg);
  }
}
</style>

<div class="a07174_c1">
</div>
</div>
  
repeating-radial-gradient 的詳細說明

參考網址：https://www.runoob.com/cssref/func-repeating-radial-gradient.html
  
repeating-radial-gradient(shape size at position, start-color, ..., last-color);

shape : ellipse (預設), circle <br>
size  : farthest-corner (預設), closest-side, closest-corner, farthest-side
  
可以利用這個來晝半圓
  
```
$mmcode(r5)
```
  
<div class="mmresult r5">
<style>
.a07175_c1
{
  width:10em;
  height:10em;
  background: 
/*
    完整寫法 :
    repeating-radial-gradient(ellipse farthest-corner at 50% 100%
*/      
    repeating-radial-gradient(at 50% 100%
      , #0000
      , #0000 40%
      , #a0f  40%
      , #0ff  48%
      , #0f0  50%
      , #ff0  52%
      , #f00  60%
    ) 0em 0em/10em 5em;
  background-repeat:no-repeat;
  background-color:#9ff;
}
</style>

<div class="a07175_c1">
</div>
</div>
  
-----------------------------------------------------

# background-attachment

scroll - 預設, 就是像牆壁的背景，不會跟著捲動而移動<br>
local  - 背景圖片會隨著捲動而移動<br>
fixed  - 背景圖片的位置是固定在螢幕上的，不會隨著 div 移動而移動<br>

**<font color="#ff0000">在 iPhone 上似忽只有 scroll 其它的不支援</font>**

<div class="a07176_c1">
background-attachment<br><br>
<label>
<input type="radio" name="a07176_s1" checked> <span>scroll,scroll</span>
</label><br>
<label>
<input type="radio" name="a07176_s1"> <span>local,local</span>
</label><br>
<label>
<input type="radio" name="a07176_s1"> <span>scroll,local</span>
</label><br>
<label>
<input type="radio" name="a07176_s1"> <span>local,scroll</span>
</label><br>
</div>

<div class="a07176_c2">
<div>
This is a background test.<br>
This is a background test.<br>
This is a background test.<br>
 <div class="a07176_c3">fixed</div><br>
This is a background test.<br>
 <div class="a07176_c4">scroll/local</div><br>
This is a background test.<br>
This is a background test.<br>
This is a background test.<br>
This is a background test.<br>
This is a background test.<br>
</div>
</div>

var k=document.querySelector(".a07176_c2");
  var kn=3;
  setInterval(function()
  {
    let k1=k.scrollTop;
    k.scrollTop+=kn;
    if (k1==k.scrollTop) kn=-3;
    if (k.scrollTop>=k.scrollTopMax-3) kn=-3;
    if (k.scrollTop<=0) kn=3;
  },30);
})();
</script>  
  
-----------------------------------------------------

# background-clip

背景的裁切，最好玩的地方是可以用文字裁切，可以做文字的特效

**<font color="#ff0000">在 iPhone 和 Mac 的 safari 對於 text 的支援有點不一樣</font>**  
  
<style>
.a07177_c1
{
  display:inline-block;
  width:40%;
  vertical-align:top;
  font-size:1.5em;
}
.a07177_c1 label
{
  display:inline-block;
  border:1px solid #000;
  width:8em;
  padding:0.2em;
  margin:0.1em;
}
.a07177_c2
{
  display:inline-block;
  width:calc(59% - 2em);
  height:4em;
  background:
    url(https://yiharng.github.io/bird.jpg) 0 0/100%;
  background-repeat:repeat;
  color:#ff0;
  font-size:3em;  
  font-weight:900;
  line-height:1em;
  overflow:auto;
  text-align:center;
  border:0.5em dashed #f00;
  padding:0.5em;
/*
  color: transparent;
  -webkit-background-clip: text;
*/  
  font-family:Impact, Charcoal, sans-serif;
}
</style>

<div class="a07177_c1">
background-clip<br>
<label>
<input type="radio" name="a07177_s1" checked> <span>border-box</span>
</label><br>
<label>
<input type="radio" name="a07177_s1"> <span>padding-box</span>
</label><br>
<label>
<input type="radio" name="a07177_s1"> <span>content-box</span>
</label><br>
<label>
<input type="radio" name="a07177_s1"> <span>text</span>
</label><br>
</div>

<div class="a07177_c2"><br>
This is a background test.
</div>

$(".a07177_c2").css("background-clip",c);
    $(".a07177_c2").css("-webkit-background-clip",c);

if (c=="text")
    {
      $(".a07177_c2").css("color","transparent");
    }
    else
    {
      $(".a07177_c2").css("color","#ff0");
    }
  });

})();
</script>
  
-----------------------------------------------------

2020年7月3日星期五

即時操作 CSS - cssjson.js

上一篇本來想寫個操作所有 CSS 的程式, 卻發現只要在不同網域其實是無法修改的，最簡單的方式還是用新的取代舊的，而 CSS 的設計又有點奇怪，刪除就是該設定全部刪掉了，既然如此，就來寫一個加強版的CSS 工具，用 json 來操作 CSS
  
原始碼 : https://github.com/yiharng/cssjson  
  
首先先加入 cssjson.js
  
```
<script src="https://yiharng.github.io/cssjson.min.js"></script>  
  
```

# 使用方式
  
```
  var rc=cssjson();//在 head 新增一個 style
  var rc=cssjson("body");//在 body 新增一個 style
  var rc=cssjson("style");//使用目前網頁中的第一個 style
  var rc=cssjson("#objid");//使用 id 為 objid 的 style

```

# Functions

```
  rc.list() //列出所有的 css 名稱
  rc.list(".tag") //取得 .tag 的索引位置
  
  rc.get(".tag") //取得 .tag 的 CSS 設定，以 json 型態回傳
  key=rc.get("@key") //取得 @keyframes 名稱為 key 的 CSS 設定
  
  rc.set(".tag",{color:"#f00"}) //新增或取代 .tag 中的 css 設定
  rc.set(".tag","{color:#f00}") //以字串中的設定取代原來的所有設定
  
  rc.del(".tag")//刪除 .tag
  
  key.list() //列出所有的 keyframes 
  key.get("100%") //取得該 frame 的設定，以 json 型態回傳
  key.set("100%",{background-color:"#00f"}) //新增或取代 frame 的設定
  key.del("100%") // 刪除 frame
  
```  
  
這裡寫了一個簡單的範例，用這樣來操作 CSS 方便多了  
  
```
$mmcode(r1)  
```

}
button
{
  font-size:1em;
}
@keyframes a07031_a1
{
  0%
  {
    transform:translate(0em,0em);
  }
  100%
  {
    transform:translate(10em,0em);
  }
}
</style>

<div class="a07031_c1">內容</div>
<br>
<br>
<br>
<button id="a07031_b1">更改 before</button>
<button id="a07031_b2">新增 after</button>
<button id="a07031_b3">新增動畫</button>
<button id="a07031_b4">修改動畫</button>

$("#a07031_b1").on("click",()=>
  {
    rc.set(".a07031_c1::before",{color:"#05f"});
  });

$("#a07031_b2").on("click",()=>
  {
    rc.set(".a07031_c1::after",{content:'" [我是After]"',color:"#f0a"});
  });

$("#a07031_b3").on("click",()=>
  {
    rc.set(".a07031_c1",{animation:"a07031_a1 3s 0s ease infinite"});
  });

$("#a07031_b4").on("click",()=>
  {
    let k=rc.get("@a07031_a1");
    if (k.get("50%"))
    {
      k.set("50%",null); // k.del("50%"); 也可以
    }
    else
    {
      k.set("50%",{transform:"translate(5em,2em)"});
    }
  });

})();
</script>
  
</div>

2020年6月26日星期五

即時操作 css

雖然可以用新的 css 取代舊的，這裡還是研究一下即時操作現有 css 的方式
  
document.styleSheets 可以取得目前網頁中所有的 css 資料, 回傳的陣列就是一個 `<style></style>` 的區域

```  
  document.styleSheets[n].cssRules 
```  
就是該區域中的每一個設定的陣列, 
  
```
  document.styleSheets[n].cssRules[m].cssText 
```
就是這個 css 完整字串, 只是這個字串是唯讀的, 必須用
  
```
  document.styleSheets[n].deleteRule(m) 
```
  來刪除這整個設定 <font color="#f00" style="font-size:1.3em">**(什麼爛設計)**</font> , 以及用 
  
```
  document.styleSheets[n].insertRule("css字串",索引) 
```  
  來新增, 索引預設是 0 ，也就是新增後會在最前面，如果沒有把本來的刪掉，新增的效果不會顯示, 然後索引也不能比本來的 Rules 多很多，只能剛好接在後面

然後比較特別的是動畫的 keyframes 
如果下面這個是 keyframes

```
document.styleSheets[n].cssRules[k]
```
那麼
  
```
document.styleSheets[n].cssRules[k].name 
//這個 keyframes 的名稱
document.styleSheets[n].cssRules[k].cssRules[kn] 
//這個 keyframes 裡頭的每個 n% 的設定
document.styleSheets[n].cssRules[k].cssRules[kn].keyText 
//就是 % 的名稱
document.styleSheets[n].cssRules[k].cssRules[kn].cssText
//完整的 css 內容

```

可以用

```
document.styleSheets[n].cssRules[k].findRule("100%")
//搜尋
document.styleSheets[n].cssRules[k].deleteRule("100%")
//刪除
document.styleSheets[n].cssRules[k].appendRule("100%{left:100px}")
//新增

```
在 firefox 和 chrome 即時改變 css 的值，會立刻反應，但是在 safari/iphone/ipad 只要遇到動畫，都會延遲以及不正常反應

寫到最後，覺得還是用新的 css 蓋掉舊的 css 比較好

<div style="display:inline-block;width:100%;height:30em;overflow:auto;margin-bottom:2em;">
  
```
$mmcode(r1)
```
</div>
<div class="mmresult r1">
<style>
.a06261
{
  position:relative;
}
.a06261 .id1
{
  position:absolute;
  width:1em;
  height:1em;
  background-color:#f00;
  left:0px;
  top:0px;
  animation:none 3000ms 0ms 1 linear;
}
@keyframes a06261_a1
{
  0%
  {
    left:0px;
  }
  100%
  {
    left:90%;
  }
}
</style>

</div>
  
<script>

(function()
{

function findallcss(a)
  {
    let i;
    let h1="";
    let h2="";
    let hh="";
    let nn="";
    let r=[];

for (i in document.styleSheets)
    {
      h1="";
      h2="";
      if (typeof(document.styleSheets[i])!="object") continue;

try //必須設 try catch, 以避免 access cross-origin stylesheet 的錯誤
      {
      
        let cssr=document.styleSheets[i].cssRules;
        let j;
        h1+="<hr>"+i+":"+typeof(document.styleSheets[i])+"<hr>";

for (j in cssr)
        {
            if (typeof(cssr[j])!="object") continue;

if (cssr[j].toString()=="[object CSSKeyframesRule]")
            {
              nn=cssr[j].name+" ";
            }
            else
            {
              nn=cssr[j].selectorText+" ";
            }

if (a && nn.indexOf(a)<0) continue;

h2+=j+"_"+cssr[j].toString()+"_";
            h2+=nn;
            h2+="<br>";

r.push(
            {
              css:document.styleSheets[i],
              index:j
            });
            
        }
        if (h2) hh+=h1+h2;
      }
      catch(e)
      {
        console.log(e);
      }
    }
    $(".a06261 .cssinfo").html(hh);
    return r;
  }
  function css2json(r)
  {
    let csstxt=r.css.cssRules[r.index].cssText;
    let cssname=csstxt.match(/(.*)\{/)[1];
    let a=csstxt.match(/\{(.*)\}/)[1].split(";");

let i;
    let j={}

for (i in a)
    {
      let k=a[i].split(":");
      if (k.length<2) continue;
      j[k[0].trim()]=k[1].trim();
    }

j["cssname"]=cssname.trim();
     
    return j;
  }
  function json2css(j)
  {
    let i;
    let cssname=j.cssname;
    let hh="";
    for (i in j)
    {
      if (i=="cssname") continue;
      if (j[i]===null) continue;
      hh+=i+":"+j[i]+";";
    }
    return cssname+" {"+hh+"}";
  }
  function getkeyframes(r)
  {
    let i;
    let kr=r.css.cssRules[r.index];
    let rf=[];
    for (i in kr.cssRules)
    {
      if (typeof(kr.cssRules[i])!="object") continue;
      let f={css:kr,index:i,key:kr.cssRules[i].keyText};
      rf.push(f);
    }
    return rf;
  }
  function cssdelrule(r)
  {
    r.css.deleteRule(r.index);
  }
  function cssaddrule(r,cssstr)
  {
    r.css.insertRule(cssstr,r.index);
  }
  function cssdelkey(kf,key)
  {
    if (!key) key=kf.key;
    kf.css.deleteRule(key);
  }
  function cssaddkey(kf,keystr)
  {
    kf.css.appendRule(keystr);
  }
  $("#a06261_b1").on("click",function()
  {
    let r=findallcss(".a06261 .id1");
    let j=css2json(r[0]);
    j["background-color"]="#00f";
    let css=json2css(j);
    cssdelrule(r[0]);
    cssaddrule(r[0],css);
  });
  $("#a06261_b2").on("click",function()
  {
    let r=findallcss(".a06261 .id1");
    let j=css2json(r[0]);
    j["background-color"]="#f00";
    let css=json2css(j);
    cssdelrule(r[0]);
    cssaddrule(r[0],css);
  });
  $("#a06261_b3").on("click",function()
  {
    let r=findallcss("a06261_a1");
    let kf=getkeyframes(r[0]);
    if (kf.length>=3)
    {
      cssdelkey(kf[0],"50%");
    }
    for (i in kf)
    {
      if (kf[i].key=="0%") break;
    }
    let j=css2json(kf[i]);
    j["background-color"]="#ff0";
    let keystr=json2css(j);
    cssdelkey(kf[i]);
    cssaddkey(kf[i],keystr);

let o=$(".a06261 .id1");
  o.on("animationend",function()
  {
    let o=$(".a06261 .id1");
    o.css("animation-name",""); 
    setTimeout(function()
    {
      o.css("animation-name","a06261_a1"); 
    },10);

});
  o.css("animation-name","a06261_a1");

//  let r=findallcss();
  let r=findallcss("a06261");
})()

</script>  
  
</div>

2020年6月24日星期三

CSS 的 filter

css 的 filter 相當好用，有時候只是想換個顏色，完全不需要再做另一張圖  
  
<style>
.a06241 input
{
  vertical-align:middle
}
.a06241 input[type="range"]
{
  width:90%;
}
.a06241 .idimg
{
  border:1px solid #000;
  padding:5%;
}
</style>

</div>

<div style="display:inline-block;width:35%">
<img src="https://yiharng.github.io/bomb.png" class="idimg" width=70%><br>
<img src="https://yiharng.github.io/bird.jpg" class="idimg" width=70%><br>
  
$textarea id="a06241_filter" style="width:100%;height:8em">$/textarea>

</div>

</div>  
  
<script>

(function()
{
  let ff=
  [
    {name:"blur({v}px)",min:0,max:10,v:0},
    {name:"brightness({v}%)",min:0,max:200,v:100},
    {name:"contrast({v}%)",min:0,max:200,v:100},
    {name:"drop-shadow({v}px {v}px 10px #000)",min:0,max:30,v:0},
    {name:"grayscale({v}%)",min:0,max:100,v:0},
    {name:"invert({v}%)",min:0,max:100,v:0},
    {name:"opacity({v}%)",min:0,max:100,v:100},
    {name:"sepia({v}%)",min:0,max:100,v:0},
    {name:"saturate({v}%)",min:0,max:1000,v:100},
    {name:"hue-rotate({v}deg)",min:0,max:360,v:0},
  ]

let i;

for (i in ff)
  {
    let hh="<div id='a06241_id"+i+"'>"+$("#a06241_id").html()+"</div>";
    let oo=$(hh);
    let v=ff[i].v;
    let ss=ff[i].name.replace(/{v}/g,v);
    oo.find("span").html(ss);
    oo.find("input[type=range]").attr("min",ff[i].min);
    oo.find("input[type=range]").attr("max",ff[i].max);
    oo.find("input[type=range]").attr("value",ff[i].v);

$("#a06241_div").append(oo);
  }

function dofilter()
  {
    let i;
    let hh="";

for (i in ff)
    {
      if ($("#a06241_id"+i+" input[type=checkbox]").prop("checked"))
      {
        hh+=$("#a06241_id"+i+" span").html()+" ";
      }
    }
    $(".a06241 .idimg").css("filter",hh);
    $("#a06241_filter").val(hh);
  }

$("#a06241_div input[type=range]").on("input",function()
  {
    let id=$(this).parent().attr("id");
    let i=id.match(/id(\d*)/)[1];
    let v=$("#"+id+" input[type=range]").val();
    let ss=ff[i].name.replace(/{v}/g,v);
    $("#"+id).find("span").html(ss);

dofilter();
  });

$("#a06241_div input[type=checkbox]").on("change",function()
  {
    dofilter();
  });

$("#a06241_filter").on("input",function()
  {
    let hh=$("#a06241_filter").val();
    $(".a06241 .idimg").css("filter",hh);
  });

})()

</script>

2020年6月4日星期四

用 CSS 畫 3D 物件

第一次看到只用 CSS 就可以畫 3D 物件覺得非常神奇, 想當初在設計導航程式時，在那記憶體只有 16M 的機器上，要跑全台灣/全中國地圖，而且導航除了需要旋轉地圖到行進方向，最好還要有 2.5D 的斜角視圖才可以看到遠方更多的資訊，當時所有計算全部自己寫，光旋轉就要一堆 sin , cos 的計算，而現在只要一行指令就可以旋轉了......
  
3D 的基礎，投影面和視點, 在 CSS 上也必須分層建立好

首先先建一個 view 裡面指定投影距離 **perspective:400px;** 在 view 裡頭建立 camera , 這裡有個很重要的參數 **transform-style: preserve-3d;** 然後在 camera 裡再建立 obj , 同樣的這裡也必須加上 **transform-style: preserve-3d;** ，然後就可以在 obj 中放面的資料

最簡單的範例如下 :

```
$mmcode(r0)
```

<div class="mmresult r0">
<style>
#a06040
{
  width:300px;
  height:300px;
}
#a06040 .view
{
  position:absolute;
  perspective:400px;
  width:300px;
  height:300px;
  perspective-origin:50% 50%;
}
#a06040 .camera
{
  position:absolute;
  width:300px;
  height:300px;
  transform-style: preserve-3d;
}
#a06040 .obj
{
  position:absolute;
  width:300px;
  height:300px;
  transform-style: preserve-3d;
  transform:translate3d(0px,0px,-400px);
}
#a06040 .aa
{
  position:absolute;
  width:300px;
  height:300px;
  background-color:#aaaaff;
}
#a06040 .aa1
{
  transform:translate3d(150px,0,0) rotate3d(0,1,0,-60deg);
}
#a06040 .aa2
{
  transform:translate3d(-150px,0,0) rotate3d(0,1,0,60deg);
}
</style>

</div>

-------------------------------------

如果只有一個物件，可以省略 obj 那一層，也就是每個面都是一個物件的概念，
例如以下範例，利用八個面組成一顆鑽石

<div style="display:inline-block;width:100%;height:30em;overflow:auto;margin-bottom:2em;">
  
```
$mmcode(r3)
```
</div>
  
<div class="mmresult r3">
<style>
#a06043 .view
{
  font-size:6em;
  position:relative;
  perspective:3em;
  width:2em;
  height:2em;
  perspective-origin:50% 50%;
  transform:scaley(1);
  border:1px solid #000;
}
#a06043 .camera
{
  position:absolute;
  width:2em;
  height:2em;
  transform-style: preserve-3d;
  animation:a06043_a2 2s 0s linear infinite;
  transform:
    translate3d(0px,0px,-3em)
    rotatey(-0deg);
}
@keyframes a06043_a2
{
  0%
  {
    transform:
    translate3d(0px,0px,-3em)
    rotatey(0deg);
  }
  50%
  {
    transform:
    translate3d(0px,0px,-8em)
    rotatey(180deg);
  }
  100%
  {
    transform:
    translate3d(0px,0px,-3em)
    rotatey(360deg);
  }
}
#a06043 .aa
{
  position:absolute;
  transform-style: preserve-3d;
  width:0em;
  height:0em;
  border-width:0em 1em 2em 1em;
  border-style:solid;
  border-color:transparent transparent #f00 transparent;
  opacity:0.9;
  transform:
    translate3d(0,0em,1em)
    rotatex(45deg)
    translate3d(0,-1em,0em);
}
#a06043 .a1
{
  border-color:transparent transparent #ff8888 transparent;
  transform:
    rotatey(0deg)
    translate3d(0,0em,1em)
    rotatex(30deg)
    translate3d(0,-1em,0em);
}
#a06043 .a2
{
  border-color:transparent transparent #ffff88 transparent;
  transform:
    rotatey(90deg)
    translate3d(0,0em,1em)
    rotatex(30deg)
    translate3d(0,-1em,0em);
}
#a06043 .a3
{
  border-color:transparent transparent #8888ff transparent;
  transform:
    rotatey(180deg)
    translate3d(0,0em,1em)
    rotatex(30deg)
    translate3d(0,-1em,0em);
}
#a06043 .a4
{
  border-color:transparent transparent #88ff88 transparent;
  transform:
    rotatey(-90deg)
    translate3d(0,0em,1em)
    rotatex(30deg)
    translate3d(0,-1em,0em);
}
#a06043 .a5
{
  border-color:transparent transparent #ff88ff transparent;
  transform:
    scaley(-1)
    rotatey(0deg)
    translate3d(0,0em,1em)
    rotatex(30deg)
    translate3d(0,-1em,0em);
}
#a06043 .a6
{
  border-color:transparent transparent #ffaa88 transparent;
  transform:
    scaley(-1)
    rotatey(90deg)
    translate3d(0,0em,1em)
    rotatex(30deg)
    translate3d(0,-1em,0em);
}
#a06043 .a7
{
  border-color:transparent transparent #88ffff transparent;
  transform:
    scaley(-1)
    rotatey(180deg)
    translate3d(0,0em,1em)
    rotatex(30deg)
    translate3d(0,-1em,0em);
}
#a06043 .a8
{
  border-color:transparent transparent #00ff88 transparent;
  transform:
    scaley(-1)
    rotatey(-90deg)
    translate3d(0,0em,1em)
    rotatex(30deg)
    translate3d(0,-1em,0em);
}
</style>

<div id="a06043">
<div class="view">
  <div class="camera">
    <div class="aa a1"></div>
    <div class="aa a2"></div>
    <div class="aa a3"></div>
    <div class="aa a4"></div>
    <div class="aa a5"></div>
    <div class="aa a6"></div>
    <div class="aa a7"></div>
    <div class="aa a8"></div>
  </div>
</div>
</div>
  
</div>  
  
-------------------------------------
  
掌握這個方式後，就可以開始玩 3D 了，這裡寫了一個有趣的展示，只用 CSS 就可以做出早期德軍總部的隧道畫面，這裡用了一個參數 **backface-visibility: hidden;-webkit-backface-visibility: hidden;** 可以把背對的面隱藏，在這個範例中我有偷懶一下，並沒有把所有的面都設到正確的方向，只有一個 aa2 那個面需要在背對時隱藏。
  
<div style="display:inline-block;width:100%;height:30em;overflow:auto;margin-bottom:2em;">
  
```
$mmcode(r1)
```
</div>  
<div class="mmresult r1">
<style>
#a06041 .window
{
  position:relative;
  width:300px;
  height:300px;
  overflow:hidden;
  border:1px solid;
  background-color:#aaffff;
}
#a06041 .view
{
  position:absolute;
  perspective:400px;
  width:300px;
  height:300px;
  perspective-origin:50% 50%;
}
#a06041 .camera
{
  position:absolute;
  width:300px;
  height:300px;
  transform-style: preserve-3d;
  animation:a06041_a1 5s 0s linear infinite;
  transform:
    translate3d(0px,0px,calc(150px)) 
    rotate3d(0,1,0,90deg)
    translate3d(0px,0px,calc(150px + 600px));
}
@keyframes a06041_a1
{
  0%
  {
    transform:
      translate3d(0px,0px,0) 
      rotate3d(0,1,0,0deg)
      translate3d(0px,0px,0);
  }
  20%
  {
    transform:
      translate3d(0px,0px,0) 
      rotate3d(0,1,0,20deg)
      translate3d(0px,0px,100px);
  }
  40%
  {
    transform:
      translate3d(0px,0px,0) 
      rotate3d(0,1,0,-20deg)
      translate3d(0px,0px,200px);
  }
  70%
  {
    transform:
      translate3d(0px,0px,calc(150px)) 
      rotate3d(0,1,0,20deg)
      translate3d(0px,0px,calc( 600px));
  }
  90%
  {
    transform:
      translate3d(0px,0px,calc(150px)) 
      rotate3d(0,1,0,80deg)
      translate3d(0px,0px,calc(100px + 600px));
  }
  100%
  {
    transform:
      translate3d(0px,0px,calc(150px)) 
      rotate3d(0,1,0,90deg)
      translate3d(0px,0px,calc(150px + 600px));
  }
}
#a06041 .aa
{
  position:absolute;
  width: 300px;
  height:300px;
  background-image:url(https://yiharng.github.io/bird.jpg);
  background-size:300px 300px;
  transform-origin:150px 150px;
}
#a06041 .aa1
{
  width: 600px;
  transform:
    rotate3D(0,1,0,90deg)
    translate3d(150px,0px,150px);
}
#a06041 .aa2
{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: 900px;
  transform:
    rotate3D(0,1,0,90deg)
    translate3d(150px,0px,-150px)
    ;
}
#a06041 .aa3
{
  height:900px;
  transform:
    rotate3D(1,0,0,-90deg)
    translate3d(0px,150px,-150px)
    ;
}
#a06041 .aa4
{
  height:900px;
  transform:
    rotate3D(1,0,0,-90deg)
    translate3d(0px,150px,150px)
    ;
}
#a06041 .obj
{
  position:absolute;
  width:300px;
  height:300px;
  transform-style: preserve-3d;
}
#a06041 .obj1
{
  position:absolute;
  width:300px;
  height:300px;
  transform-style: preserve-3d;
  transform:
    translate3d(150px,00px,calc( -900px + 150px) )
    rotate3D(0,1,0,-90deg)
    ;
}
</style>

---------------------------------
  
加上 javascript 產生面, 可以做個球, 只要花點時間，光靠 CSS 就可以做出旋轉地球了呢 !
  
<div style="display:inline-block;width:100%;height:30em;overflow:auto;margin-bottom:2em;">
  
```
$mmcode(r2)  
```  
</div>
<div class="mmresult r2">
<style>
#a06042 .view
{
  position:relative;
  perspective:400px;
  width:300px;
  height:300px;
  perspective-origin:50% 50%;
  transform:scale(1);
}
#a06042 .camera
{
  position:absolute;
  width:300px;
  height:300px;
  transform-style: preserve-3d;
  transform:
    translate3d(0px,0px,0px)
    rotate3d(0,1,0,0deg);
}
#a06042 .obj
{
  position:absolute;
  width:300px;
  height:300px;
  transform-style: preserve-3d;
  animation:a06042_a2 10s 0s linear infinite;
  transform:
    translate3d(0px,0px,-400px)
    rotate3d(1,0,0,0deg)
    rotate3d(0,1,0,0deg);
}
@keyframes a06042_a2
{
  0%
  {
    transform:
    translate3d(0px,0px,-400px)
      rotatex(0deg)
      rotatey(0deg);
  }
  100%
  {
    transform:
    translate3d(0px,0px,-400px)
      rotatex(360deg)
      rotatey(720deg);
  }
}
#a06042 .bb
{
  position:absolute;
  width:60px;
  height:60px;
  left: calc(150px - 30px); 
  top: calc(150px - 30px); 
  background-color:#faa;
  border:2px solid #000;
  opacity:1;
  transform:
    rotate3D(0,1,0,50deg)
    rotate3D(1,0,0,30deg)
    translate3d(0px,0px,-250px);
}
</style>

for (j=-4;j<5;j++)
  for (i=0;i<12;i++)
  {
    b=$("<div class='bb'></div>");
    b.css("transform",
       "rotate3D(0,1,0,"+(i*30)+"deg) "
      +"rotate3D(1,0,0,"+(j*20)+"deg) "
      +"translate3d(0px,0px,250px)");
    $("#a06042 .obj").append(b);
  }
})();
</script>

</div>
  
------------------------------------
  
因為 div 是矩形, 雖然可以利用 clip-path 來做裁切，但是裡頭的貼圖並不會跟著變形，如果把解析度提高，那麼每個面都會接近矩形，效果很不錯，只是效能會很差，在調整了一下適當大小，又用了些偷懶的方式，沒有精算的很準確, 最後附上旋轉五色鳥做為這篇的結束，
  
<div style="display:inline-block;width:100%;height:30em;overflow:auto;margin-bottom:2em;">
  
```
$mmcode(r5)
```
</div>
  
<div class="mmresult r5">  
<style>
#a06045 .view
{
  position:relative;
  perspective:400px;
  width:300px;
  height:300px;
  perspective-origin:50% 50%;
  transform:scale(1);
}
#a06045 .camera
{
  position:absolute;
  width:300px;
  height:300px;
  transform-style: preserve-3d;
  transform:
    translate3d(0px,0px,0px)
    rotate3d(0,1,0,0deg);
}
#a06045 .obj
{
  position:absolute;
  width:300px;
  height:300px;
  transform-style: preserve-3d;
  animation:a06045_a2 10s 0s linear infinite;
  transform:
    translate3d(0px,0px,-400px)
    rotate3d(1,0,0,0deg)
    rotate3d(0,1,0,0deg);
}
@keyframes a06045_a2
{
  0%
  {
    transform:
    translate3d(0px,0px,-400px)
      rotatey(0deg);
  }
  100%
  {
    transform:
    translate3d(0px,0px,-400px)
      rotatey(360deg);
  }
}
#a06045 .bb
{
  position:absolute;
  width:60px;
  height:50px;
  left: calc(150px - 30px); 
  top: calc(150px - 25px); 
  background-color:#faa;
  border:0px solid #000;
  opacity:1;
  transform:
    rotate3D(0,1,0,50deg)
    rotate3D(1,0,0,30deg)
    translate3d(0px,0px,-250px);
}
</style>

let xx,yy;
  let degy;

degy=11;
  xx=16;

for (j=-5;j<6;j++)
  for (i=0;i<xx;i++)
  {
    k=-j;
    
    b=$("<div class='bb'></div>");

let r=250*Math.cos(k*degy*3.14/180)*2*3.14/xx*1.06;
    b.css("width",r);
    b.css("left","calc(150px - "+(r/2)+"px)");
    b.css("background-image","url(https://yiharng.github.io/bird.jpg)");

let sizey=r*0.4*xx;

b.css("background-size",(r*xx)+"px "+sizey+"px ");
    b.css("background-position"
      ,(r*(xx-i))+"px "+(sizey*(6-j)/13+50)+"px");

b.css("transform",
       "rotate3D(0,1,0,"+(i*(360/xx))+"deg) "
      +"rotate3D(1,0,0,"+(k*degy)+"deg) "
      +"translate3d(0px,0px,250px)");
    $("#a06045 .obj").append(b);
  }
})();
</script>
</div>

2020年6月3日星期三

用 CSS 畫箭頭

第一次看到有人用 div + css 畫三角形，覺得非常有意思，第一個想到的方法是利用 clip-path 來畫，這個方式最直覺，後來發現他用的是邊框，方法如下 :

```
$mmcode(r1)  
```  
<div class="mmresult r1">
<style>
.a06031_1
{
  width:2em;
  height:2em;
  border-width:2em 2em 2em 2em;
  border-style:solid;
  border-color:#ffff00 #aaffaa #aaaaff #ffaaff;
}
</style>

由這裡可以看到，加厚的邊框變成了梯形, 如果把本來的 div 寬度設 0 ，然後把不要的邊框設為透明，那麼三角形就出現了

```
$mmcode(r2)  
```  
<div class="mmresult r2">
<style>
.a06032_1
{
  width:0em;
  height:0em;
  border-width:1em 2em 1em 0em;
  border-style:solid;
  border-color:transparent #aaffaa transparent;
}
</style>

同理，還可以畫梯形

那麼這篇的目的是畫箭頭, 這裡我打算用 ::before 來畫

```
$mmcode(r3)  
```  
<div class="mmresult r3">
<style>
.a06033_1
{
  position:absolute;
  width:5em;
  height:0.4em;
  background-color:#ff0000;
  transform-origin: -1em 0.2em;
  transform:translate(1em, -0.2em) rotate(0deg);
}
.a06033_1::before
{
  position:absolute;
  content: "";
  width:0;
  height:0;
  transform:translate(-0.9em, -0.3em);
  border-width:0.5em 1em 0.5em 0em;
  border-style:solid;
  border-color:transparent  #ff0000 transparent;
}
</style>  
<br>
<div class="a06033_1"></div>
<div class="a06033_1" style="font-size:0.7em;transform:translate(1em, -0.2em) rotate(70deg);width:3em"></div>
<br><br><br>
</div>

以後如果需要用到箭頭，就可以引用這個 CSS 然後設定 width , left 和 top , 以及 font-size 來修改大小，然後用 transform rotate 來旋轉，這會是個使用上相當方便的箭頭
  
既然箭頭都畫了，順便把一些常用的畫一畫
  
```
$mmcode(r4)
```
  
<div class="mmresult r4">

</div>

2020年5月30日星期六

CSS 動畫

第一次看到 CSS 動畫，覺得為之驚豔，這樣做動畫比用 jquery 自己刻快多了，效果又好，然後就因為工作在忙的關係，又停止了學習的腳步。
  
首先先來一個簡單的範例 :
  
這裡比較特別的是 cubic-bezier 可以利用這個網頁來計算 
 [cubic-bezier](https://cubic-bezier.com/), 
四個參數其實是貝滋曲線的兩個控制點座標，
起點和終點為 0,0 和 1,1 , 套在 svg 上就是 `<path d="M 0 0 C 參數1 參數2 參數3 參數4 1 1"/>`

```
$mmcode(r1)  
```
</div>

<div class="mmresult r1">
<style>
.a05301
{
  position:absolute;
  width:1em;
  height:1em;
  background-color:#f00;
  animation-name:a05301_a1; /* 名稱 */
  animation-duration:3000ms; /* 動畫時間 */
  animation-delay:0ms; /* 延遲 */
  animation-iteration-count:infinite;
  /*
      播放次數
      infinite  代表無限次播放
  */
  animation-timing-function:ease;
  /*
      預設 ease
      linear, ease-in, ease-out, ease-in-out
      step-start, step-end, steps(int,start/end), 
      cubic-bezier(n,n,n,n)
  */
  animation-direction:alternate;
  /*
      播放方向
      normal 預設
      reverse 反向
      alternate 來回
      alternate-reverse 反向來回
  */
  animation-fill-mode:none;
  /*
      播放後
      none 回到前面
      backwards 回到前面
      forwards 停在後面
      both 前面或後面
  */
  animation-play-state:paused;
  /*
      running 播放中 
      paused  暫停
  */
}
.a05301_d1
{
    animation-timing-function:ease;
}
.a05301_d2
{
    animation-timing-function:linear;
}
.a05301_d3
{
    animation-timing-function:ease-in;
}
.a05301_d4
{
    animation-timing-function:ease-out;
}
.a05301_d5
{
    animation-timing-function:ease-in-out;
}
.a05301_d6
{
    animation-timing-function:cubic-bezier(0.6, -0.6, 0.1, 1.6);
}
.a05301_d7
{
    animation-timing-function:steps(3,start);
}
@keyframes a05301_a1
{
  0% 
  {
    left:8em;
  }
  2% 
  {
    left:8em;
  }
  50%
  {
    left:50%;
  }
  100%
  {
    left:95%;
  }
}  
#a05301_id1 input:checked ~ .a05301
{
  animation-play-state:running;
}

</style>

<div class="a05301 a05301_d1"></div> ease        <hr>
<div class="a05301 a05301_d2"></div> linear      <hr>
<div class="a05301 a05301_d3"></div> ease-in     <hr>
<div class="a05301 a05301_d4"></div> ease-out    <hr>
<div class="a05301 a05301_d5"></div> ease-in-out <hr>
<div class="a05301 a05301_d6"></div> cubic-bezier<hr>
<div class="a05301 a05301_d7"></div> steps       <hr>
</div>  
  
<br>  
</div>

---------------------------------------  
  
# Event
  
CSS 的屬性 animation-name 被修改後，動畫會重新開始，如果只給同一個名字是沒有用的，所以這裡的解決方法是先設 animation-name="" 然後設個 timeout 後再修改為要播放的動畫名稱
  
Ani2 的按鈕是利用新增 CSS 來取代本來的腳本，在 chrome 和 firefox 上，取代後會立即生效，但是在 safari 和 iphone/ipad 上卻會等動畫結束重新開始後才會套用新的腳本, Ani3 是取代後直接呼叫套用的 function 讓動畫重新開始。

animationstart     開始播放<br>
animationend       播放結束<br>
animationiteration 動畫開始重複<br>
animationcancel    取消<br>

<div style="display:inline-block;width:100%;height:30em;overflow:auto;margin-bottom:2em;">
  
```
$mmcode(r2)
```
</div>  
<div class="mmresult r2">
  
<style>
.a05302
{
  position:absolute;
  width:1em;
  height:1em;
  background-color:#f00;
  animation-name:"";
  animation-duration:3000ms;
  animation-iteration-count:2;
  animation-timing-function:ease;
  animation-direction:normal;
  animation-fill-mode:both;
  animation-play-state:paused;
}
@keyframes a05302_a1
{
  0% 
  {
    left:10%;
  }
  50%
  {
    left:50%;
  }
  100%
  {
    left:90%;
  }
}  
@keyframes a05302_a2
{
  0% 
  {
    left:10%;
  }
  50%
  {
    transform:translate(0,3em);
    left:50%;
  }
  100%
  {
    left:90%;
  }
}
#a05302_play:checked ~ .a05302 
{
  animation-play-state:running;
}
#a05302_div button
{
  font-size:1em;height:1.7em;
}

</style>
<style id="a05302_newcss">
</style>

<div id="a05302_div">
  播放 <input id="a05302_play" type="checkbox" checked><br>
  <div id="a05302_id1" class="a05302"></div>
  <br><br><br>
  <button id="a05302_change">Change</button>
  <button id="a05302_restart">Restart</button>
  <button id="a05302_ani2">Ani2</button>
  <button id="a05302_ani3">Ani3</button>

(function()
{
  let o = $("#a05302_id1");
  let txt = $("#a05302_id2");
  let n=0;
  let a=["a05302_a1","a05302_a2"];
  let an=0;

o.css("animation-name",a[an]);

function setani(o,name)
  {
    o.css("animation-name",""); 
 
    setTimeout(function()
    {
      o.css("animation-name",name); 
    },10);

}

o.on("animationstart",function()
  {
    if (++n>=2) {txt.html("");n=0;}
    txt.html(txt.html()+"開始.");
  });
  o.on("animationend",function()
  {
    txt.html(txt.html()+"結束.");
    setani(o,a[an]);

});
  o.on("animationiteration",function()
  {
    txt.html(txt.html()+"重複.");
  });
  o.on("animationcancel",function()
  {
    txt.html(txt.html()+"取消.");
  });

$("#a05302_change").on("click",function()
  { 
    an=(an+1)&1;
    setani(o,a[an]);
  });

$("#a05302_restart").on("click",function()
  { 
    setani(o,a[an]);
  });

$("#a05302_ani2").on("click",function()
  { 
    let cc = document.getElementById('a05302_newcss').sheet;
    try{cc.deleteRule(0);}catch(e){}
    cc.insertRule("@keyframes a05302_a2{"
      +"0%{left:10%;}50%{"
      +"transform:translate(0,3em);"
      +"left:50%;}100%{left:90%;}}", 0);    
  });
  $("#a05302_ani3").on("click",function()
  { 
    let cc = document.getElementById('a05302_newcss').sheet;
    try{cc.deleteRule(0);}catch(e){}
    cc.insertRule("@keyframes a05302_a2{"
      +"0%{left:10%;}50%{"
      +"transform:translate(0,-3em);"
      +"left:50%;}100%{left:90%;}}", 0);

setTimeout(function(){setani(o,a[an])},10);
  });

})();

</script>

</div>
  
---------------------------------------

## 利用 CSS 動畫來實做一個指針時鐘，幾乎不需要寫程式，
<div style="display:inline-block;width:100%;height:30em;overflow:auto;margin-bottom:2em;">
  
```
$mmcode(r3)  
```

</div>
<div class="mmresult r3">
<style>
.a05303
{
  position:absolute;
  width:8em;
  height:8em;
  animation-name:a05303_a1;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-direction:normal;
  animation-play-state:running;
}
.a05303_h
{
  animation-duration:12000ms;
} 
.a05303_m
{
  animation-duration:1000ms;
} 
@keyframes a05303_a1
{
  0% 
  {
    transform:rotate(0deg);
  }
  100%
  {
    transform:rotate(360deg);
  }
}  
.a05303_d1
{
  position:absolute;
  left:calc( 50% - 2px );
  top:10%;
  width:4px;
  height:40%;
  background-color:#0000ff;
}
.a05303_d2
{
  position:absolute;
  left:calc( 50% - 2px );
  top:20%;
  width:4px;
  height:30%;
  background-color:#ff0000;
}
.a05303_circle
{
  border:1px solid #000;
  width:8em;
  height:8em;
  border-radius:4em;
}
</style>

------------------------------
  
## 搭配 clip-path 可以設計多邊形變形的動畫
  
<div style="display:inline-block;width:100%;height:30em;overflow:auto;margin-bottom:2em;">
  
```
$mmcode(r4)

```  
</div>
<div class="mmresult r4">
<style>
.a05304_bk
{
  position:relative;
  width:13em;
  height:13em;
  background:#fff;
}
.a05304_path
{
  position:absolute;
  width:13em;
  height:13em;
  background:#ffee88;
  animation-name:a05303;
  animation-iteration-count:1;
  animation-timing-function:ease;
  animation-direction:normal;
  animation-play-state:running;
  animation-duration:2000ms;
  animation-fill-mode:both;
}
.a05304_ball
{
  position:absolute;
  left:12em;
  top:6em;
  width:1em;
  height:1em;
  border-radius:0.5em;
  background:#f00;
  animation:a05304_a 3000ms 0s 1 linear running;
/*
  animation:a05304_a 3000ms 0s infinite linear running;
*/
}
@keyframes a05304_a
{
0%{left:12.00em;top:6.00em;}
33%{left:3.00em;top:11.20em;}
66%{left:3.00em;top:0.80em;}
100%{left:12.00em;top:6.00em;}
}
@keyframes a05304_a1
{
0%
{clip-path:polygon(96% 50% ,27% 90% ,27% 10% ,96% 50% ,96% 50% ,96% 50% ,96% 50% ,96% 50% )
}
100%
{clip-path:polygon(96% 50% ,50% 96% ,4% 50% ,50% 4% ,96% 50% ,96% 50% ,96% 50% ,96% 50% )}
}
#a05304 button
{
  font-size:1em;
}
</style>
<style id="a05304_css"></style>

</div>

for (i=0;i<=n;i++)
    {
      x=(6+6*Math.cos(i*d));
      y=(6+6*Math.sin(i*d));
      hh+=(i*j)+"%{left:"+x+"em;top:"+y+"em;}";
      pp+=((x+0.5)*100/13).toFixed(0)+"% "
         +((y+0.5)*100/13).toFixed(0)+"% ,";
    }

for (;i<=7;i++)
    {
      pp+=((x+0.5)*100/13).toFixed(0)+"% "
         +((y+0.5)*100/13).toFixed(0)+"% ,";
    }

hh+="}";
    pp=pp.substr(0,pp.length-1)+")";

return [hh,pp];
  } 
  function setani(o,name)
  {
    o.css("animation-name","");

setTimeout(function()
    {
      o.css("animation-name",name); 
    },10);
  }

let bakn=3;
  let bakpath="";

function setn(n)
  {
    let css=document.getElementById("a05304_css").sheet;
    try{css.deleteRule(0);}catch(e){}
    try{css.deleteRule(0);}catch(e){}

let r=cn(n);
    let r1=cn(bakn);

css.insertRule(r[0]);

css.insertRule("@keyframes a05304_a1{"
      +"0%{"
      +"clip-path:"+r1[1]+";transform:rotate(0deg);"
      +"-webkit-clip-path:"+r1[1]
      +"}"
      +"100%{"
      +"clip-path:"+r[1]+";transform:rotate(360deg);"
      +"-webkit-clip-path:"+r[1]
      +"}}");

setani($(".a05304_path"),"a05304_a1");

bakn=n;
    bakpath=r[1];
  }
  $(".a05304_path").on("animationend",function()
  {
    $(".a05304_path").css("clip-path",bakpath);
    $(".a05304_path").css("-webkit-clip-path",bakpath);
  });
  $(".a05304_ball").on("animationend",function()
  {
    setani($(".a05304_ball"),"a05304_b");
  });
  $(".a05304_b").on("click",(e)=>
  {
    setn( parseInt($(e.target).attr("nn")) );
  });

setn(3);

});
</script>

</div>

2020年5月29日星期五

CSS ::before and ::after

css 的 ::before 和 ::after 是我比較少接觸的 css 語法, 可以在元素前後加上一個不存在網頁元素中的物件，範例如下:

```
$mmcode(r1)
  
```

<div class="mmresult r1">
<style>
.txt
{
  color:#0000ff;
}
.txt::before
{
  content:"[" attr(btxt) "]";
/*
  content 一定要給值，語法有
  attr(屬性)
  url(網址) 可以秀圖片
*/
  color:#ff0000;
}
.txt::after
{
  content:"[" attr(atxt) "]";
  color:#00ff00;
}
</style>

<span class="txt" btxt="Before" atxt="After">我是文字</span><br>
</div>
  
content 雖然可以用 url 秀圖片，但是無法調整圖片大小，如果要設定圖片大小，可以利用 background-image 來實現
  
```
$mmcode(r1_1)
```
<div class="mmresult r1_1">
<style>
.txt1
{
  color:#0000ff;
  position:relative;
}
.txt1::before
{
  content:"　　[" attr(btxt) "]" ;
  color:#ff0000;
  display:inline-block;
  background-image: url("https://yiharng.github.io/bomb.png");
  background-repeat: no-repeat;
  background-size: 1.5em;
  height:2em;
}
.txt1::after
{
  content:"[" attr(atxt) "]";
  color:#00ff00;
}
</style>

<span class="txt1" btxt="Before" atxt="After">我是文字</span>
</div>
  
  
CSS 的選擇器語法除了用 .class 還可以用 [] 來指定特定的attr , 如果搭配 hover 可以做到滑鼠移過去顯示說明的效果, 這個效果以前都是用 javascript 製作，其實 CSS 就可以做到了 !

```
  
$mmcode(r2)

```

<div class="mmresult r2">
<style>
span[stxt]:hover
{
  position:relative;
  color:#ff00ff;
  cursor:help;
}
span[stxt]:hover::after,
span[stxt]:focus::after
{
  position:absolute;
  background-color:#ffffcc;
  color:#0000ff;
  padding:0.5em;
  border:1px solid #000000;
  width:6em;
  text-align:center;
  left:0;
  top:1.2em;
}
span[stxt=ok1]:hover::after,
span[stxt=ok1]:focus::after
{
  content:"我是說明1";
}
span[stxt=ok2]:hover::after,
span[stxt=ok2]:focus::after
{
  content:"我是說明2";
}
</style>
  
<span stxt="ok1">我是文字1</span>
<span stxt="ok2">我是文字2</span>
</div>

<br>

::before 和 ::after 有個特別的功能是 counter , 
我個人覺得這個其實就是 `<ul> <ol> <li>` 的原型

特別的是，自己寫有更靈活的設定，例如可以設定數字間隔，或多個計數器

範例如下 :

```
$mmcode(r3)
```

<style>

.nn,.f0
{
  counter-reset:var1 var2 2;
/*
  counter-reset:變數1 起始值 變數2 起始值
  沒有設定起始值就是 0
*/
}
.f1::before
{
  counter-increment: var1;
  content: counter(var1) ". ";
}
.f2::before
{
  counter-increment: var2 2;
  content: counter(var2,cjk-ideographic) ". ";
  color:#ff0000;
/*
  counter 語法 : counter(變數,list-style-type)
*/
}
.nn div{
  margin-left:1em;
}
</style>

<div class="nn">
開始
<div class="f0">
  <div class="f1">一樓</div>
  <div class="f1">一樓
    <div class="f0">
      <div class="f1">二樓</div>
      <div class="f1">二樓
        <div class="f0">
          <div class="f1">三樓</div>
          <div class="f1">三樓
            <div class="f2">F2</div>
            <div class="f2">F2</div>
            <div class="f2">F2</div>
          </div>
          <div class="f1">三樓</div>
        </div>
      </div>
      <div class="f1">二樓</div>
    </div>
  </div>
  <div class="f1">一樓</div>
</div>
結束
</div>
</div>
  
list-style-type 的值如下:
  
disc
, circle
, square
, armenian
, cjk-ideographic
, decimal
, decimal-leading-zero
, georgian
, hebrew
, hiragana
, hiragana-iroha
, katakana
, katakana-iroha
, lower-alpha
, lower-greek
, lower-latin
, lower-roman
, upper-alpha
, upper-greek
, upper-latin
, upper-roman
, none
, inherit
  
除了 counter ，還有一個 counters 可以處理階層問題
  
```
$mmcode(r4)  
```
  
<div class="mmresult r4">

<style>

.snn .sf0
{
  counter-reset:var1;
}
.snn .sf1::before
{
  counter-increment: var1;
  content: counters(var1,"-") ". ";
/*
  counters 語法 : counters(變數,連結字串,list-style-type)
*/
}
.snn div{
  margin-left:1em;
}
</style>

這個功能的實用範例，是直接搭配 h1 和 h2 來實做章節

```
$mmcode(r5)  
```

.hnn
{
  counter-reset: var1;
}
.hnn h1
{
  counter-reset: var2;
}
.hnn h1::before
{
  counter-increment: var1;
  content: "第" counter(var1) "章 " ;
}
.hnn h2::before
{
  counter-increment: var2;
  content: "第" counter(var1) "-" counter(var2) "節 ";
}
.hnn h2
{
  margin-left:1em;
}
.hnn span
{
  margin-left:3em;
}
</style>

<div class="hnn">
<h1>開始</h1>
  <h2>出發</h2>
    <span>一個旅程的開始
    </span>
  <h2>繼續</h2>
<h1>回程</h1>
  <h2>加油</h2>
  <h2>到家</h2>
</div>
</div>
  
<script>
  (function()
   {
    $(".hnn h2").css("margin-left","0em");
  })();
</script>

<br>
  
# 取值和修改
  
javascript 有一個超強的指令，可以取得該元素所有的設定
  
window.getComputedStyle('元素', '::before 或 ::after')
  
```
$mmcode(r6)  
```

<style>

.r6css1::before
{
  content: "[" attr(btxt) "]";
  color:#0000ff;
}
</style>
  
<div class="r6css1" btxt="我是Before">
  我是文字
</div>
<br>
<div class="r6css2">
</div>

(function()
{
  let dd=document.querySelector(".r6css1");
  let dd1=window.getComputedStyle(dd,"::before");
  $(".r6css2").html(
     "color:"+dd1.color+"<br>"
    +"content:"+dd1.content
  );
})()

</script>
</div>

::before 和 ::after 並不允許直接修改內容，最簡單的方法，是用新的 CSS 取代舊的

範例 :
  
```
$mmcode(r7)  
```

(function()
{
  let cc = document.getElementById('r7css_new').sheet;
  cc.insertRule(".r7css1::before{color:#0000ff;}", 0);

$("#r7b1").on("click",()=>
  {
    let cc = document.getElementById('r7css_new').sheet;
    cc.deleteRule(0);
    // 語法 deleteRule(索引)  
    cc.insertRule(".r7css1::before{color:#ff0000;}", 0);  
    // 語法 insertRule("css", 索引); 索引可省略
  });
  $("#r7b2").on("click",()=>
  {
    let cc = document.getElementById('r7css_new').sheet;
    cc.deleteRule(0);
    cc.insertRule(".r7css1::before{color:#00ff00;}", 0);  
  });
})()

</script>
</div>
  
<br>
<br>

訂閱：文章 (Atom)

Translate

2020年11月18日 星期三

2020年8月13日 星期四

2020年7月17日 星期五

2020年7月3日 星期五

2020年6月26日 星期五

2020年6月24日 星期三

2020年6月4日 星期四

2020年6月3日 星期三

2020年5月30日 星期六

2020年5月29日 星期五

2020年11月18日星期三

2020年8月13日星期四

2020年7月17日星期五

2020年7月3日星期五

2020年6月26日星期五

2020年6月24日星期三

2020年6月4日星期四

2020年6月3日星期三

2020年5月30日星期六

2020年5月29日星期五