ホームページ > 記事 > ウェブフロントエンド > CSS回転アニメーション効果の簡単な実装例を詳しく解説
CSS回転アニメーション効果の簡単な実装例を詳しく解説
- 高洛峰オリジナル
- 2017-03-03 16:55:452300ブラウズ
CSS を使用してアニメーション効果を作成できます。以下で説明するのは、p の回転と色の遷移のアニメーションです
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></title>
<style>
a{
text-align:center;
line-height:100px;
transition:all 2s;
width:100px;
height:100px;
background:pink;
float:left;
border-radius:50%;
}
a:hover{
transition:all 2s;
background:red;
transform-origin:50 100;
transform:rotate(360deg);
border-radius:50%;
}
</style>
</head>
<body>
<h1>请将鼠标移动到下面的矩形上：</h1>
<a>
两秒旋转360
</a>
</body>
</html>
とても素晴らしい効果を自分でテストしてください。
上記の CSS 回転アニメーション効果の簡単な実装は、エディターによって共有されたすべての内容です。参考にしていただければ幸いです。また、PHP 中国語 Web サイトをサポートしていただければ幸いです。
CSS 回転アニメーション効果のより簡単な実装例については、PHP 中国語 Web サイトの関連記事に注目してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSS背景の概要紹介次の記事：CSS背景の概要紹介