■ このスレッドは過去ログ倉庫に格納されています
html、cssできる方来てください
- 1 ：以下、＼(^o^)／でVIPがお送りします：2017/01/15(日) 22:38:33.326 ID:av8S3nmJ0.net
- 丸の中に扇型を入れたのですが、アニメーションで動かすと、扇型が外にでてぶっ飛んでしまいます。丸と扇型合わせて一つの図形のように連動させたいです。
丸の挙動は理想通りなのですが・・・
どうやったらくっついたままにできますか？
以下コード
<!DOCTYPE html>
<html>
<head>
<meta charset=
- 2 ：以下、＼(^o^)／でVIPがお送りします：2017/01/15(日) 22:39:33.259 ID:av8S3nmJ0.net
- <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
*{margin:0px; padding:0px;}
#box1 {
border-radius: 50%;
width:100px; height:100px;
background:black;
}
#box2 {
border-radius: 100px 0px 50px 50px / 100px 0px 0px 0px;
width:50px; height:50px;
background:yellow;
}
div {
width:100px; height:100px;
animation-name: myanimation;
animation-duration: 10s;
animation-iteration-count: infinite;
}
@keyframes myanimation {
45% {
transform: translate(700px, 0px) rotate(360deg);
}
50% {
transform: translate(0px, 500px) rotate(720deg);
}
95% {
transform: translate(700px, 500px) rotate(1080deg);
}
100%{
transform: translate(0px,0px) rotate(1440deg);
}
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
</div>
</div>
</body>
</html>
- 3 ：以下、＼(^o^)／でVIPがお送りします：2017/01/15(日) 22:40:07.557 ID:oFVUILBnd.net
- <!DOCTYPE html>mtjgptmd.wmjun
<html>khtmdjgjtw
<head>jbgjdgtamx
<meta charset=unko>amxugajtp
- 4 ：以下、＼(^o^)／でVIPがお送りします：2017/01/15(日) 22:40:44.716 ID:KU2vPXj2x.net
- よくわからんけど扇の中心と円の中心が違うんじゃない
- 5 ：以下、＼(^o^)／でVIPがお送りします：2017/01/15(日) 22:47:43.799 ID:9d6FqZoP0.net
- box2がbox1の子要素になってるからbox1を基準にtransformしてる
だからbox2のbodyに対する変形は2倍の値になってる
- 6 ：以下、＼(^o^)／でVIPがお送りします：2017/01/15(日) 22:51:14.858 ID:9d6FqZoP0.net
- #top2{
……
position:relative;
top:-100px; /*box1に重ねる*/
transform-origin:right bottom; /*ボックスの右下を基準に変形*/
……
}
<body>
<div id="box1">
</div>
<div id="box2">
</div>
</body>
これで動いた
- 7 ：以下、＼(^o^)／でVIPがお送りします：2017/01/15(日) 22:51:56.416 ID:av8S3nmJ0.net
- >>5
なるほど 理由はわかりました。ありがとうございます。
どうやったら２倍の値じゃなくできますかね・・・
- 8 ：以下、＼(^o^)／でVIPがお送りします：2017/01/15(日) 22:52:22.516 ID:av8S3nmJ0.net
- >>6
ありがとうございます！やってみます！！
総レス数 8
4 KB
掲示板に戻る
全部
前100
次100
最新50
read.cgi ver 2014.07.20.01.SC 2014/07/20 D ★