ホームページ > 記事 > ウェブフロントエンド > CSSでマウスを上に動かす回転効果を実現する方法
CSSでマウスを上に動かす回転効果を実現する方法
- 青灯夜游オリジナル
- 2022-01-20 15:53:355571ブラウズ
方法: 1. "@keyframes アニメーション名 {100% {transform:rotate(angle)}" を使用して回転アニメーションを作成します。 2. "element:hover{アニメーション: アニメーション名 タイムリニア無限}" を使用します。 」を使用して、マウスが要素上に移動したときにアニメーションをトリガーするように設定します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
マウスが上に移動したときに回転効果を実現するための css
回転効果はアニメーションを使用して作成できます属性と「@keyframes」ルール アニメーションの実装。
マウスが要素上に移動すると、回転アニメーションをトリガーするために
:hoverセレクターが必要になります。 (:hover セレクターは、マウス ポインターが浮いている要素を選択し、スタイルを設定するために使用されます。)
実装コード:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
margin: 50px auto;
}
div:hover {
animation: mymove 1s linear infinite;
}
@keyframes mymove {
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes mymove {/* Safari and Chrome */
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
(学習ビデオ共有: css ビデオ チュートリアル)
以上がCSSでマウスを上に動かす回転効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。