Q&A
ご回答ありがとうございます
pxを記入しましたが、変わりありませんでした
mapの上に点pがあり、その上をcloudがふわふわ動いている
というような画面を作りたいのですが
cloudと点pの位置指定がうまくいかず、
以下の太字のところが反映されません
浅学で申し訳ありません、もしよろしければご回答ください m（ーー）m
html
<body> <div id="p"><img src="img/p.png"></div> <div id="map"><img src="img/map.png" width="1300"></div> <div id="cloud"> <img src="img/cloud.png" alt="*" width="400"></a> </body>css
@-webkit-keyframes anime07{
0% {left:0; -webkit-transform: rotate(0deg);}
20% {left:100px; -webkit-transform: rotate(-1deg);}
40% {left:200px; -webkit-transform: rotate(1deg);}
60% {left:300px; -webkit-transform: rotate(0deg);}
80% {left:400px; -webkit-transform: rotate(-1deg);}
100% {left:500px; -webkit-transform: rotate(1deg);}
}
.cloud img {
position:absolute;
top:100;
-webkit-animation:anime07 150s infinite alternate linear;
animation:anime07 150s infinite alternate linear;
z-index:250;
}
.p{
position:absolute;
z-index:500;
top:300;
left:300;
}
回答3件
0
ベストアンサー
動作検証しました。以下のCSSで動きませんか？当方はChromeです。
CSS
1 2@-webkit-keyframes anime07 3{ 4 0% {left: 0; -webkit-transform: rotate(0deg);} 5 20%{left:100px; -webkit-transform:rotate(-1deg);} 6 40%{left:200px;-webkit-transform:rotate(1deg);} 7 60%{left:300px;-webkit-transform:rotate(0deg);} 8 80%{left:400px;-webkit-transform:rotate(-1deg);} 9 100%{left:500px;-webkit-transform:rotate(1deg);} 10} 11#cloud img { 12 position: absolute; 13 top: 100px; 14 -webkit-animation: anime07 150s infinite alternate linear; 15 animation: anime07 150s infinite alternate linear; 16 z-index: 250; 17} 18#p { 19 position: absolute; 20 z-index: 500; 21 top: 300px; 22 left: 300px; 23} 24
投稿2015/12/10 02:15
編集2015/12/10 02:16
総合スコア89
0
たんなる単位の記入忘れでは？
例）top:100; → top:100px;
投稿2015/12/10 01:43
編集2015/12/10 01:44
総合スコア992
0
idにスタイルを指定する場合は、先頭に#をつけてください。
たとえば#pとなります。
あとCSSで末尾に;を忘れると反映されませんので注意です。
CSS
1#p{position:absolute;z-index:500;top:300;left:300; }
投稿2015/12/10 01:06
総合スコア89
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/12/10 02:30 編集