Jackie Note

▼css animation 簡寫: animation: saleChange 2s 1s infinite; -webkit-animation: saleChange 2s 1s infinite; ▼CSS animation 好用的工具教學: 一些好用工具的教學可參考以下影片( Big Boy Can Code ) https://www.youtube.com/watch?v=Y4xBYZJSvuM&t=13s ▼CSS animation 好用的工具: animate.css: https://daneden.github.io/animate.css/ animista: https://animista.net/ keyframes.app: https://keyframes.app/

▼css部分可做以下設定 /* 设置滚动条的样式 */ .right_info::-webkit-scrollbar { width:12px; } /* 滚动槽 */ .right_info::-webkit-scrollbar-track { -webkit-box-shadow:inset006pxrgba(255,255,255,1); border-radius:10px; background:rgba(255,255,255,1); } /* 滚动条滑块 */ .right_info::-webkit-scrollbar-thumb { border-radius:10px; background:rgba(24,65,144) !important; -webkit-box-shadow:inset006pxrgba(0,0,0,0.5); } .right_info::-webkit-scrollbar-thumb:window-inactive { background:rgba(255,0,0,0.4); } /* 滚动条ie */ .right_info{   scrollbar-base-color: #ffffff;   scrollbar-face-color: #144190;   scrollbar-3dlight-color: #ffffff;   scrollbar-highlight-color: #ffffff;   scrollbar-track-color: #ffffff;   scrollbar-shadow-color: #ffffff;   scrollbar-dark-shadow-color: #ffffff; } ▼niceScroll.js可做以下設定 var explorer = window.navigator.userAgent;     if (explorer.indexOf("MSIE") >= 0) {//ie10及以下 ...

<meta name = "format-detection" content = "telephone=no" > 刪除電話號碼樣式在header添加上面程式碼

寫了一個 PHP+ajax+jquery猜謎遊戲。來猜謎吧~ http://towertest2019.000webhostapp.com/

使用fabric.js+php所製作的拍貼機，使用者可合成相片並下載。 PC版: https://fgophoto12.000webhostapp.com/ 手機版: https://fgophoto12.000webhostapp.com/mobile.php

寫了一個jquery射擊遊戲原型，玩玩看巴。 http://jackietsaitsai.000webhostapp.com/source/webgame-front-end/shoot_game/index.html

body:before {   content: ' ';   position: fixed;   z-index: -1;   top: 0;   right: 0;   bottom: 0;   left: 0;   background: url(path/to/image) center 0 no-repeat;   background-size: cover; }

Chrome 71.0.3578.99以上版本適用，以下不適用: /* 设置滚动条的样式 */ .content_area ul::-webkit-scrollbar { width:12px; } /* 滚动槽 */ .content_area ul::-webkit-scrollbar-track { -webkit-box-shadow:inset006pxrgba(0,0,0,0.8); border-radius:10px; background:rgba(0, 0, 0, .8); } /* 滚动条滑块 */ .content_area ul::-webkit-scrollbar-thumb { border-radius:10px; background:rgba(255,255,255) !important; -webkit-box-shadow:inset006pxrgba(0,0,0,0.5); } .content_area ul::-webkit-scrollbar-thumb:window-inactive { background:rgba(255,0,0,0.4); } safari瀏覽器可用niceScroll.js代替。 案例:Chrome 用css修改，再寫userAgent，safari用niceScroll.js。 /* 滚动条ie */ .modal-body{   scrollbar-base-color: #144190;   scrollbar-face-color: #ffda2e;   scrollbar-3dlight-color: #144190;   scrollbar-highlight-color: #144190;   scrollbar-track-color: #144190;   scrollbar-shadow-color: #144190;   scrollbar-dark-shadow-color: #144190; }

如果手機點<a>標籤會出現框框的話可使用outline: none; 如果下了一個outline: none;還是沒用，可使用 outline: none !important; outline: 0 !important; 下在 :focus跟 :active上