コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

CSS回転アニメーション効果の簡単な実装例を詳しく解説

高洛峰
リリース： 2017-03-03 16:55:45
オリジナル
2350 人が閲覧しました

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 サイトの関連記事に注目してください。

関連ラベル：
css 旋转 动画
ソース：php.cn
前の記事：CSS背景の概要紹介 次の記事：一般的に使用される CSS の命名規則の詳細な説明
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
非表示のサイドパネルを表示: チェックが入っています アニメーション化されたハンバーガー メニューを介してビューに切り替える機能を備えたナビゲーション メニューをサイド パネルに追加したいと考えています。 JSを使わずにCSSだけで作...
から 2024-04-06 15:49:33
0
1
319
CSS Tailwind を使用した画像ホバー カード アニメーションが期待どおりに動作しません。 <html><body><divclass="groupcardmy-14mx-3w-80h-100bg-gray-800rounded-x...
から 2024-04-06 13:43:17
0
1
356
Div JavaScript を使用して回転および展開し、グリッド ギャラリーを表示します 背面にグリッドギャラリーを表示するには、クリック時に div を回転させたいと考えています。正直、どこから始めればいいのか分かりません。 <ulclass="con...
から 2024-04-02 23:12:45
0
1
404
Vanilla JS setTimeout(): 間違った動作の特定 ハンバーガー メニューのアニメーションを HTML、CSS、およびバニラ JavaScript で作成しました。期待される結果 ハンバーガー メニュー ボタンをクリックすると、次の...
から 2024-04-02 20:44:40
0
1
284
画像の振動とアニメーションが動作しないCSS document.addEventListener('scroll',function(){constnavbar=document.querySelector(".na...
から 2024-04-02 20:07:39
0
1
349
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート