目的：利用html5，css實現鐘擺效果
知識點：
1） 利用position/left/top和calc()實現元素的水平和垂直居中；
2） 利用css3的animation/transform/transform-origin屬性定義動畫；
3） 利用transform-origin實現旋轉原點的圓心調整
charset="utf-8">
title>
#box
#innercircle
#outercircle
#rope
@keyframes pendulum
// 角度-負數為逆時針
// 擺動右側最高點
25%
50%
// 擺動左側最高點
75%
100%
}style>
head>
id = "box">
id = "innercircle">
div>
id = "outercircle">
div>
id = "rope">
div>
div>
body>
html>效果圖
CSS3實現載入效果
預期實現的效果如下如所示 首先基本的html布局如下 對於的css 如下 首先設定一下基本的樣式 wrap wrap div 完成上面的css樣式定義後，頁面上就會有五個排列整齊的小細條了。然後我們來新增動畫效果 在 wrap div加入如下 webkit animation fadeout 1s ...
css3實現網格效果
利用background image裡的liner gradient屬性可以實現一些簡單的css網格背景，能自適應背景，挺實用的，下面就簡單的介紹兩款網格背景 1.桌布花紋 紅.png 塊height 300px width 300px background white background ima...
css3實現動畫效果
transition property 指定對 html 元素的哪個 css 屬性進行平滑漸變處理。該屬性 可以指定 background color width height 等各種標準的 css 屬性。all代表所有屬性 transition duration 指定屬性平滑漸變的持續時間。tra...