亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

關于評論的測試代碼

<!DOCTYPE?html>
<html>
<head>
	<title></title>
	<meta?charset="utf-8">

	<style?type="text/css">
		*{
			margin:?0;
			padding:?0;
		}
		.warp,.info{
			width:300px;
			height:?300px;
			border-radius:?50%;
		}
		.warp{
			
			border:10px?solid?;
			border-radius:?50%;
			border-top-color:?yellow;
			border-left-color:?gray;
			border-right-color:?yellow;
			border-bottom-color:?gray;
			transform-origin:?50%?50%;
			transition:?all?.5s?ease-in-out;
		}		
		.info{
			background-image:?url(1.jpeg);			
			color:red;
			text-align:?center;	
			position:?absolute;
			transition:all?.5s?ease-in-out;
		}

		h3{
			margin-top:120px;
		}
		.warp:hover{
			transform:?rotate(180deg);
			
		}
		.info:hover{
			transform:?rotate(-180deg);			
		}
	</style>
</head>
<body>
<div?class="warp">	
	<div?class="info">
		<h3>美好的一天</h3>
		<a>想進來看看嗎?</a>
	</div>	
</div>	
</body>
</html>


正在回答

1 回答

43行的代碼:.warp:hover .info{transform:rotate(-180deg);color:rgba(0,0,0,1);}

30行的代碼:color:rgba(0,0,0,0);就可以用了,顏色效果自己改吧?


0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
CSS動畫實用技巧
  • 參與學習       79005    人
  • 解答問題       90    個

本CSS教程教你使用CSS實現驚艷的動畫效果,一起去領略一番

進入課程

關于評論的測試代碼

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號