ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSS3でマウスをスライド、回転、ズームするように設定する方法
方法: 1. 「element {animation: name time}」ステートメントを使用して、回転と拡大のアニメーションを要素にバインドします。 2. 「@keyframes」を使用して、回転と拡大のキーフレームを指定します。構文は「@keyframes name { 100%{transform:rotate(回転角度)scale(横拡大率、縦拡大率);}}」です。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width:100px; height:100px; background:pink; margin:0 auto; animation:fadenum 5s; } @keyframes fadenum{ 100%{transform:rotate(180deg) scale(0.5,0.5);} } </style> </head> <body> <div>这是一个旋转缩放的效果</div> </body> </html>出力結果: (学習ビデオ共有:
css ビデオ チュートリアル ,htmlビデオチュートリアル)
以上がCSS3でマウスをスライド、回転、ズームするように設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。