我試圖使它所以當頁面加載顯示圓圈這是很好的,但我需要他們從中心向外不是從左上角的成長,所以從小到大:與CSS3動畫擴界
你可以看到我目前在這裏:http://thomasbritton.co.uk/projects/ebrd/
理想情況下,想要在CSS中完成,但如果它更容易/更穩定可以使用JS。
任何想法?
這裏是我的CSS也爲動畫部分:
.circle a {
border-radius: 150px;
color: #fff;
height: 0;
position: absolute;
text-decoration: none;
width: 0;
}
.circle a.grow {
-webkit-animation-name: grow;
-webkit-animation-duration: 2.2s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: grow;
-moz-animation-duration: 2.2s;
-moz-animation-timing-function: ease;
-moz-animation-iteration-count: 1;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
animation-name: grow;
animation-duration: 2.2s;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-direction: normal;
animation-delay: 0;
animation-play-state: running;
animation-fill-mode: forwards;
}
@-webkit-keyframes grow {
0% { -moz-transform: scale(0); }
100% { -moz-transform: scale(1); }
}
@-moz-keyframes grow {
0% { -moz-transform: scale(0); }
100% { -moz-transform: scale(1); height: 168px; width: 168px; }
}
@keyframes grow {
0% { -moz-transform: scale(0); }
100% { -moz-transform: scale(1); }
}
我可以看到他們增長,但他們沒有fixzd中心。 – sinsedrix 2012-02-16 23:24:56
@sinsedrix我該如何應用固定中心? – thomasbritton 2012-02-16 23:27:03
您需要製作圓圈'位置:相對'併爲其頂部和左側屬性以及寬度和高度設置動畫。另外,對非Firefox用戶的說明:使用Firefox查看完整效果。 – Bojangles 2012-02-16 23:33:18