JS コードをまったく使用せずに、さまざまな CSS3 属性を使用して音楽悪役のアニメーションを実装します:
注: Chrome ブラウザが最適に動作し、最終的な効果の静的画像:
HTML コードは次のとおりです:
练习一个小人的动画 I ♥ Y O U ♫ ♪
CSSコードは次のとおりです:
/* CSS Document */body,html{
width:100%;
height:100%;
margin:0;
display:table;
text-align:center;
}.music1{
display:none;
}.warp{
margin-top:100px;
vertical-align:middle;
position:relative;
}.backgroud_circle{
width:400px;
height:400px;
border-radius:100%;
background:#6699FF;
margin:0 auto;
overflow:hidden;
-webkit-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
-moz-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
-o-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
-ms-mask-image: -webkit-radial-gradient(#BADA55, #BADA55); /*执行动画*/
animation:grow 0.7s ease;
-webkit-animation:grow 0.7s ease;
transform-origin:center;
}/*身体body*/.body{
width:285px;
height:400px;
margin:0 auto;
background:#333333;
position:relative;
top:100px;
border-radius:100px; /*执行动画*/
-webkit-animation:body-enter 0.7s 0.2s 1 ease;
animation:body-enter 0.7s 0.2s 1 ease; /*-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;*/}/*头部head*/.head{
width:196px;
height:260px;
border-radius:50px;
background:#ffe4be;
position:absolute;
top:50%;
left:50%;
margin-top:-210px;
margin-left:-98px; /*动画执行*/
animation:grow 0.7s 0.5s ease;
-webkit-animation:grow 0.7s 0.5s ease;
transform-origin:bottom;
}/*头发*/.hair-main{
width:220px;
height:0px;
background:#FF9966;
border-radius:54px 54px 0px 0px;
animation:hair-main 0.7s 0.9s ease;
-webkit-animation:hair-main 0.7s 0.9s ease;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
position:relative;
margin-left:-12px;
margin-top:-10px;
z-index:2;
}/*鬓角*/.sideburn{
width:8px;
height:25px;
background:#FF9966;
opacity:0;
bottom:-25px;
position:absolute;
animation:sideburn-main 0.7s 1s ease;
-webkit-animation:sideburn-main 0.7s 1s ease;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}.sideburn#left{
left:12px;
}.sideburn#right{
right:12px;
}/*耳朵*/.ear{
width:24px;
height:35px;
position:absolute;
background:#ffe4be;
top:116px;
border-radius:12px;
animation:grow 0.7s 1.3s ease;
-webkit-animation:grow 0.7s 1.3s ease;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
transform:scale(0);
-webkit-transform:scale(0);
}.ear#left{
left:-12px;
}.ear#right{
right:-12px;
}/*脸部*/.face{
width:180px;
height:0px;
border-radius:48px;
background:#ffe4be;
position:absolute;
top:40px;
left:8px;
animation:hair-main 0.7s 0.5s linear;
-webkit-animation:hair-main 0.7s 0.5s linear;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
z-index:3;
}/*鼻子*/.nose{
width:20px;
height:45px;
opacity:1;
border-top-left-radius:20px;
background:#ffe4be;
position:absolute;
top:80px;
left:50%;
margin-left:-20px;
animation:shadow-main 0.7s 3s ease;
animation-fill-mode: forwards;
-webkit-animation:shadow-main 0.7s 3s ease;
-webkit-animation-fill-mode: forwards;
opacity:0;
z-index:5;
}/*形成鼻子的阴影*/.shadow-main{
width:98px;
height:260px;
position:absolute;
bottom:-84px;
left:-8px;
z-index:4;
overflow:hidden;
}.shadow{
width:98px;
height:260px;
border-radius:50px;
background:rgba(149,36,0,0.1);
position:absolute;
opacity:0;
z-index:4;
animation:shadow-main 1s 2.8s ease;
-webkit-animation:shadow-main 1s 2.8s ease;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}/*眼睛阴影*/.eye-shadow{
width:30px;
height:15px;
border-radius:0 0 15px 15px;
background:rgba(149,36,0,0.1);
position:absolute;
top:70px;
animation:grow 0.7s 2s ease;
-webkit-animation:grow 0.7s 2s ease;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
transform:scale(0);
-webkit-transform:scale(0);
}.eye-shadow#left{
left:35px;
z-index:5;
}.eye-shadow#right{
right:35px;
}/*眼眉*/.eyebrow{
width:40px;
height:10px;
background:#FF9966;
position:absolute;
top:-35px;
left:50%;
opacity:0;
margin-left:-20px;
-webkit-backface-visibility:hidden;/*设定元素的背面是否可见*/}.eyebrow#left{
animation:eyebrow-left 0.7s 2.2s ease;
-webkit-animation:eyebrow-left 0.7s 2.2s ease;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}.eyebrow#right{
animation:eyebrow-right 0.7s 2.2s ease, eyebrow-right-raise 2s 6.6s infinite alternate ease-in-out;
-webkit-animation:eyebrow-right 0.7s 2.2s ease, eyebrow-right-raise 2s 6.6s infinite alternate ease-in-out;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}/*两只蓝色眼睛*/.eye{
width:20px;
height:28px;
border-radius:10px;
background:#334C68;
position:absolute;
top:-18px;
left:50%;
margin-left:-10px;
animation:grow 0.7s 2.2s ease;
-webkit-animation:grow 0.7s 2.2s ease;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
transform:scale(0);
-webkit-transform:scale(0);
transform-origin:bottom;
-webkit-transform-origin:bottom;
}/*嘴巴*/.mouse{
width:66px;
height:33px;
background:#FFFFFF;
border-radius:0 0 33px 33px;
position:absolute;
left:50%;
top:150px;
margin-left:-33px;
animation:grow 0.7s 2.6s ease;
-webkit-animation:grow 0.7s 2.6s ease;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
transform:scale(0);
-webkit-transform:scale(0);
}/*背景高亮light阴影*/.tight-light{
width:400px;
height:600px;
background:#ffffff;
opacity:0;
position:absolute;
right:15%;
animation:tight-light 1s 2.8s ease;
-webkit-animation:tight-light 1s 2.8s ease;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
transform:translate(200px,0px);
-webkit-transform:translate(200px,0px);
}/*背景高亮dark阴影*/.tight-dark{
width:400px;
height:600px;
background:#000000;
opacity:0;
position:absolute;
left:10%;
top:35px;
animation:tight-dark 1s 2.8s ease;
-webkit-animation:tight-dark 1s 2.8s ease;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
transform:translate(-200px,0px);
-webkit-transform:translate(-200px,0px);
z-index:6;
}/*外边黄色圈*/.border_circle{
width:399px;
height:399px;
border-radius:50%;
border:10px solid #ff8345;
position:absolute;
top:50%;
left:50%;
margin-left:-220px;
margin-top:-220px;
transform:scale(0);
-webkit-transform:scale(0);
transform-origin:center;
-webkit-transform-origin:center;
}/*外边黄色圈one*/.border_circle#one{
animation:border_circle 1s 3.1s ease;
-webkit-animation:border_circle 1s 3.1s ease;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}/*外边黄色圈two*/.border_circle#two{
animation:border_circle 1s 3.3s ease;
-webkit-animation:border_circle 1s 3.3s ease;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}/*I YOU*/.backgroud_circle .shirt-text{
font-family:"微软雅黑",sans-serif;
font-size:50px;
font-weight:700;
color:#FFFFFF;
position:relative;
top:180px;
display:inline-block;
-webkit-text-stroke:2px;
text-stroke:2px;
opacity:0;
-webkit-transform:translate(0px,100px);
transform:translate(0px,100px);
animation-fill-mode:forwards !important;
-webkit-animation-fill-mode:forwards !important;
z-index:5;
}.backgroud_circle .shirt-text:nth-of-type(1){
animation:shirt-text 0.7s 3.3s ease;
-webkit-animation:shirt-text 0.7s 3.3s ease;
}.backgroud_circle .shirt-text:nth-of-type(2){
color:#FF0000;
animation:shirt-text 0.7s 3.4s ease, heart 2s 4s infinite ease-in-out;
-webkit-animation:shirt-text 0.7s 3.4s ease, heart 2s 4s infinite ease-in-out;
}.backgroud_circle .shirt-text:nth-of-type(3){
animation:shirt-text 0.7s 3.5s ease;
-webkit-animation:shirt-text 0.7s 3.5s ease;
}.backgroud_circle .shirt-text:nth-of-type(4){
animation:shirt-text 0.7s 3.6s ease;
-webkit-animation:shirt-text 0.7s 3.6s ease;
}.backgroud_circle .shirt-text:nth-of-type(5){
animation:shirt-text 0.7s 3.7s ease;
-webkit-animation:shirt-text 0.7s 3.7s ease;
}/*音符*/.music{
position: absolute;
font-size: 150px;
color: #FCB040;
width: 1px;
left: 50%;
opacity: 0;
}.music#one{
margin-left:-250px;
top:50%;
animation: note 2s 3.5s infinite ease;
animation-fill-mode: forwards;
-webkit-animation: note 2s 3.5s infinite ease;
-webkit-animation-fill-mode: forwards;
}.music#two{
margin-left: 150px;
top: 30%;
animation: note 2s 4.3s infinite ease;
animation-fill-mode: forwards;
-webkit-animation: note 2s 4.3s infinite ease;
-webkit-animation-fill-mode: forwards;
}/*背景圆圈的动画事件：由中心向外扩张*/@-webkit-keyframes grow{
0%{ -webkit-transform:scale(0); transform:scale(0);}
60%{ -webkit-transform:scale(1.15); transform:scale(1.15);}
80%{ -webkit-transform:scale(0.95); transform:scale(0.95);}
100%{ -webkit-transform:scale(1); transform:scale(1);}}
@keyframes grow{
0%{ -webkit-transform:scale(0); transform:scale(0);}
60%{ -webkit-transform:scale(1.15); transform:scale(1.15);}
80%{ -webkit-transform:scale(0.95); transform:scale(0.95);}
100%{ -webkit-transform:scale(1); transform:scale(1);}}/*身体进入样式：由底部向上先变大再恢复正常*/@-webkit-keyframes body-enter{
0%{-webkit-transform:translateY(200px);}
60%{-webkit-transform:translateY(-20px);}
80%{-webkit-transform:translateY(30px);}
100%{-webkit-transform:translateY(0);}}
@keyframes body-enter{
0%{-webkit-transform:translateY(200px);}
60%{-webkit-transform:translateY(-20px);}
80%{-webkit-transform:translateY(30px);}
100%{-webkit-transform:translateY(0);}}/*头发动画：*/@-webkit-keyframes hair-main{
0%{height:0px; -webkit-transform:translateY(137px); transform:translateY(137px);}
100%{height:137px; -webkit-transform:translateY(0); transform:translateY(0);}}
@keyframes hair-main{
0%{height:0px; -webkit-transform:translateY(137px); transform:translateY(137px);}
100%{height:137px; -webkit-transform:translateY(0); transform:translateY(0);}}/*鬓角动画*/@-webkit-keyframes sideburn-main{
0%{opacity:0; -webkit-transform:translateY(-25px); transform:translateY(-25px);}
100%{opacity:1; -webkit-transform:translateY(0); transform:translateY(0);}}
@keyframes sideburn-main{
0%{opacity:0; -webkit-transform:translateY(-25px); transform:translateY(-25px);}
100%{opacity:1; -webkit-transform:translateY(0); transform:translateY(0);}}/*鼻子阴影动画：*/@-webkit-keyframes shadow-main{
0%{ opacity:0; -webkit-transform:translate(98px,0px); transform:translate(98px,0px);}
50%{ opacity:0;}
100%{ opacity:1; -webkit-transform:translate(0px,0px); transform:translate(0px,0px);}}
@keyframes shadow-main{
0%{ opacity:0; -webkit-transform:translate(98px,0px); transform:translate(98px,0px);}
50%{ opacity:0;}
100%{ opacity:1; -webkit-transform:translate(0px,0px); transform:translate(0px,0px);}}/*左眼眉动画*/@-webkit-keyframes eyebrow-left{
0%{opacity:0; -webkit-transform:translateY(-25px); transform:translateY(-25px);}
70%{opacity:1; -webkit-transform:translateY(5px); transform:translateY(5px);}
100%{opacity:1; -webkit-transform:translateY(0); transform:translateY(0);}}
@keyframes eyebrow-left{
0%{opacity:0; -webkit-transform:translateY(-25px); transform:translateY(-25px);}
70%{opacity:1; -webkit-transform:translateY(5px); transform:translateY(5px);}
100%{opacity:1; -webkit-transform:translateY(0); transform:translateY(0);}}/*右眼眉动画*/@-webkit-keyframes eyebrow-right{
0%{opacity:0; -webkit-transform:translateY(-25px); transform:translateY(-25px);}
70%{opacity:1; -webkit-transform:translateY(5px); transform:translateY(5px);}
100%{opacity:1; -webkit-transform:rotate(9deg) translateY(0); transform:rotate(9deg) translateY(0);}}
@keyframes eyebrow-right{
0%{opacity:0; -webkit-transform:translateY(-25px); transform:translateY(-25px);}
70%{opacity:1; -webkit-transform:translateY(5px); transform:translateY(5px);}
100%{opacity:1; -webkit-transform:rotate(9deg) translateY(0); transform:rotate(9deg) translateY(0);}}/*眉毛上升动画*/@-webkit-keyframes eyebrow-right-raise{
0%{top:-35px;}
70%{top:-35px;}
100%{top:-45px;}}
@keyframes eyebrow-right-raise{
0%{top:-35px;}
70%{top:-35px;}
100%{top:-45px;}}/*背景高亮light动画*/@-webkit-keyframes tight-light{
0%{opacity:0; -webkit-transform:translate(200px,0px); transform:translate(200px,0px);}
100%{opacity:0.2; -webkit-transform:rotate(45deg) translate(0px,0px); transform:rotate(45deg) translate(0px,0px);}}
@keyframes tight-light{
0%{opacity:0; -webkit-transform:translate(200px,0px); transform:translate(200px,0px);}
100%{opacity:0.2; -webkit-transform:rotate(45deg) translate(0px,0px); transform:rotate(45deg) translate(0px,0px);}}/*背景高亮dark动画*/@-webkit-keyframes tight-dark{
0%{opacity:0; -webkit-transform:translate(-200px,0px); transform:translate(-200px,0px);}
100%{opacity:0.2; -webkit-transform:rotate(-45deg) translate(0px,0px); transform:rotate(-45deg) translate(0px,0px);}}
@keyframes tight-dark{
0%{opacity:0; -webkit-transform:translate(-200px,0px); transform:translate(-200px,0px);}
100%{opacity:0.2; -webkit-transform:rotate(-45deg) translate(0px,0px); transform:rotate(-45deg) translate(0px,0px);}}/*外面黄色圈动画*/@-webkit-keyframes border_circle{
0%{ border-width:20px; transform:scale(0); -webkit-transform:scale(0);}
40%{ border-width:20px; transform:scale(1); -webkit-transform:scale(1); margin-left:-220px; margin-top:-220px;}
100%{ border-width:0px; transform:scale(1.5); -webkit-transform:scale(1.5); border-style:double; margin-left:-200px; margin-top:-200px;}}
@keyframes border_circle{
0%{ border-width:20px; transform:scale(0); -webkit-transform:scale(0);}
40%{ border-width:20px; transform:scale(1); -webkit-transform:scale(1); margin-left:-220px; margin-top:-220px;}
100%{ border-width:0px; transform:scale(1.5); -webkit-transform:scale(1.5); border-style:double; margin-left:-200px; margin-top:-200px;}}/*文字*/@-webkit-keyframes shirt-text{
0%{opacity:0; -webkit-transform:translate(0px, 80px); transform:translate(0px, 80px);}
60%{opacity:1; -webkit-transform:translate(0px, -50px); transform:translate(0px, -50px);}
80%{opacity:1; -webkit-transform:translate(0px, 140px); transform:translate(0px, 140px);}
100%{opacity:1; -webkit-transform:translate(0px, 100px); transform:translate(0px, 100px);}}
@keyframes shirt-text{
0%{opacity:0; -webkit-transform:translate(0px, 80px); transform:translate(0px, 80px);}
60%{opacity:1; -webkit-transform:translate(0px, -50px); transform:translate(0px, -50px);}
80%{opacity:1; -webkit-transform:translate(0px, 140px); transform:translate(0px, 140px);}
100%{opacity:1; -webkit-transform:translate(0px, 100px); transform:translate(0px, 100px);}}
@-webkit-keyframes heart{
0%{ }
30%{color:#00FF99;}
70%{color:#FFFF00;}
100%{}}
@keyframes heart{
0%{ }
30%{color:#00FF99;}
70%{color:#FFFF00;}
100%{}}/*音符*/@-webkit-keyframes note{
0% {
opacity: 0;
-webkit-transform: translate(0px,50px);
transform: translate(0px,50px);
}
30% {
-webkit-transform:rotate(12deg) translate(-30px,0px);
transform:rotate(12deg) translate(-30px,0px);
}
45% {
opacity: 1;
}
60% {
-webkit-transform: rotate(-12deg) translate(30px,-100px);
transform:rotate(-12deg) translate(30px,-100px);
}
100% {
opacity: 0;
-webkit-transform:rotate(0deg) translate(0px,-200px);
transform:rotate(0deg) translate(0px,-200px);
}}
@keyframes note{
0% {
opacity: 0;
-webkit-transform: translate(0px,50px);
transform: translate(0px,50px);
}
30% {
-webkit-transform:rotate(12deg) translate(-30px,0px);
transform:rotate(12deg) translate(-30px,0px);
}
45% {
opacity: 1;
}
60% {
-webkit-transform: rotate(-12deg) translate(30px,-100px);
transform:rotate(-12deg) translate(30px,-100px);
}
100% {
opacity: 0;
-webkit-transform:rotate(0deg) translate(0px,-200px);
transform:rotate(0deg) translate(0px,-200px);
}}
以上がCSS3 プロパティを使用して悪役のアニメーション サンプル コードを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
これは発生することは想定されていません。不可能をトラブルシューティングしますMay 15, 2025 am 10:32 AMあなたが考えたことのない他の何かであることが判明したそれらの不可能な問題の1つをトラブルシューティングすることがどのように見えるか。
@KeyFrames対CSSトランジション：違いは何ですか？May 14, 2025 am 12:01 AM@keyframesandcsstransitionsdifferincomplexity：@keyframesallowsfordeTailedAnimationのシーケンス、whilecsstransitionshandlesimplestatechanges.usecsstransitionsは、ButtonColorChanges、および@keyframesforintricateanimationslikerotatingingspinnnersを使用します。
静的サイトコンテンツ管理にページCMSを使用しますMay 13, 2025 am 09:24 AM私は知っています、私は知っています：たくさんのコンテンツ管理システムオプションが利用可能であり、私はいくつかテストしましたが、実際にはY＆＃039;知っているものはありませんでしたか？奇妙な価格設定モデル、困難なカスタマイズ、一部は全体になることさえあります＆
HTMLのCSSファイルをリンクするための究極のガイドMay 13, 2025 am 12:02 AMCSSファイルをHTMLにリンクすることは、HTMLの一部で要素を使用することで実現できます。 1）タグを使用して、ローカルCSSファイルをリンクします。 2）複数のタグを追加することにより、複数のCSSファイルを実装できます。 3）外部CSSファイルは、そのような絶対URLリンクを使用します。 4）ファイルパスとCSSファイルの読み込み順序の正しい使用を確認し、パフォーマンスを最適化すると、CSSプリプロセッサを使用してファイルをマージできます。
CSS Flexbox vsグリッド：包括的なレビューMay 12, 2025 am 12:01 AMFlexBoxまたはグリッドの選択は、レイアウト要件によって異なります。1）FlexBoxは、ナビゲーションバーなどの1次元レイアウトに適しています。 2）グリッドは、雑誌のレイアウトなどの2次元レイアウトに適しています。この2つは、レイアウト効果を改善するためにプロジェクトで使用できます。
CSSファイルを含める方法：メソッドとベストプラクティスMay 11, 2025 am 12:02 AMCSSファイルを含める最良の方法は、タグを使用してHTMLパーツに外部CSSファイルを導入することです。 1.タグを使用して、外部CSSファイルを導入します。 2。小さな調整のために、インラインCSSを使用できますが、注意して使用する必要があります。 3.大規模プロジェクトでは、@Importを介して他のCSSファイルをインポートするために、SASS以下などのCSSプリプロセッサを使用できます。 4。パフォーマンスのために、CSSファイルをマージし、CDNを使用し、CSSNANOなどのツールを使用して圧縮する必要があります。
FlexBox対グリッド：両方を学ぶべきですか？May 10, 2025 am 12:01 AMはい、Youはrelearnbothlexboxandgrid.1）FlexBoxisidealforone-Dimensional、FlexiblleayoutslikenavigationMenus.2）Gridexcelsintwo-digsignssuchasmagazinelayouts.3）Bothenhanceslaysutibulivedibulisunivedivition、floctonsulururを
軌道力学（またはCSSキーフレームアニメーションの最適化方法）May 09, 2025 am 09:57 AM独自のコードをリファクタリングするのはどのように見えますか？ジョン・レアは、彼が書いた古いCSSアニメーションを選び、それを最適化するという思考プロセスを歩きます。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
KB5055612を修正する方法Windows 10にインストールできませんか？
1 か月前ByDDD
<🎜>：バブルガムシミュレーターインフィニティ - ロイヤルキーの取得と使用方法
4週間前By尊渡假赌尊渡假赌尊渡假赌
<🎜>：庭を育てる - 完全な突然変異ガイド
3週間前ByDDD
Nordhold：Fusion System、説明
4週間前By尊渡假赌尊渡假赌尊渡假赌
マンドラゴラ：魔女の木のささやき - グラップリングフックのロックを解除する方法
3週間前By尊渡假赌尊渡假赌尊渡假赌
ホットツール
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
Dreamweaver Mac版
ビジュアル Web 開発ツール
