標籤：錯位 idt 成功 exp span 動手 log key 電影
新手入門還沒有正式發點啥東西，都是在裝潢部落格這個家了，到現在為止還是沒有裝修好。。熟悉了這邊的發布規範之後會持續在這裡記錄，給自己留下學習的腳印~
這正式的第一篇隨筆寫個使用css3的動畫效果。
總感覺電影裡特工那種酷炫的應用介面很舒服，開始嘗試用css3做一個，所以這是系列篇，名字就叫做 ‘我要做特工‘ 。之前沒怎麼深入過css3，就從這裡開始吧，畢竟指望別人提供近似項目化的需求還給時間學習的機會不是很現實，自己動手豐衣足食嘛~
先看一下效果：
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>CSS3</title> <style> div{ width:10px; height:2px; background:red;} div:hover{/*這裡綁定一個選取器，把cssSplit綁定到div:hover*/ /*animation:cssSplit 5s infinite；*/ /*animation-direction:alternate；*//*播放後反向播放一遍*/ animation:cssSplit 5s alternate; animation-fill-mode:forwards;/*播放後停止在最後一幀*/ }@keyframes cssSplit /* Firefox -moz-沒加，csshack自己做唄*/{ 0% {background:red;width:10px;height:2px;} 10% {background:yellow;width:500px;height:2px;} 30% {background:yellow;width:500px;height:200px;} 100% {background:yellow;width:500px;height:200px;}}</style></head><body><div></div><p><b>注意:</b> 該執行個體在 Internet Explorer 9 及更早 IE 版本是無效的。</p></body></html>
Ps:布局和著色應該還會重新規制吧。。發一下試試，錯位的感覺很強烈啊。。
-----
Ps:果然是著色還是得一次成功啊，不會自己重新繪製。。插個代碼改了三次格式也是沒誰了。。。
>>我要做特工系列 之 CSS 3_animation_向右滑出後下滑並停止
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
