Html
                  Css
                  Js
                
                
                
                * {
                	margin:0;
                	padding:0;
                }
                div {
                	width:200px;
                	height:200px;
                	/*最后把下面這個去掉*/
                		/* background:#f00;
                	*/
                		/*圓邊框 50% 上右下左 0px 0px 0px 0px*/
                		border-radius:50%;
                	/*     上邊距 右邊距 下邊距 左邊距  */
                		margin:100px 10px 200px 100px;
                	/*float:left;
                	*/
                		position:relative;
                }
                p {
                	width:160px;
                	height:160px;
                	background:red;
                	border-radius:50%;
                	border:20px solid rgba(255,255,255,0.2);
                	background-origin:border-box;
                	position:absolute;
                	z-index:1;
                	transition:1S;
                }
                h1 {
                	width:200px;
                	height:200px;
                	background:#333;
                	border-radius:50%;
                	margin:0 auto;
                	text-align:center;
                	/*line-height和height組合到一塊兒,還有一種效果,就是如果把它們的值設置的一樣了,文字就會在垂直方向居中*/
                		line-height:200px;
                	position:absolute;
                	transform:scale(0,0 ) rotate(0deg);
                	transition:1S;
                	color:#fff;
                }
                div:hover p {
                	transform:scale(0,0) rotate(360deg);
                }
                div:hover h1 {
                	transform:scale(1,1) rotate(360deg);
                }
                
                
                
                ↑上面代碼改變,會自動顯示代碼結果 jQuery調用版本:1.11.3
                 立即下載

                旋轉動畫(原創)

                line-height和height組合到一塊兒,還有一種效果,就是如果把它們的值設置的一樣了,文字就會在垂直方向居中

                0
                  短信接口
                快3倍投资金计划