円の中心から広がるようにCSSを描く方法として
過去の記事を見つけることができました。
transformを使用してできるようですが、hover時にこれを実行したいのですが
うまく動作させることができません。
transitionを使って widthとheightを0pxからhover時に.circle_1をそれぞれ20pxにするような
やり方はできたのですが、中心からは広がらず、左上から広がることがわかりました。
●やりたいことは以下の通りなのですが、問題点と解決方法についてアドバイスを頂けますでしょうか。
宜しくお願い申し上げます。
- .li_1にhoverした時に
- .circle_1が中心からwidthとheightそれぞれ20pxずつ広がるようにしたい
html
1<ul> 2<li class="li_1"><div class="circle_1"></div>hoge</li><li>fuga</li> 3</ul>
css
1ul li{ 2 display:inline; 3} 4 5li{ 6 width:20px; 7 height:20px; 8 background:#ffffff; 9 border-left: 1px solid #000000; 10 padding:10px; 11} 12 13.circle_1{ 14 position:absolute; 15 left:70px; 16 width:20px; 17 height:20px; 18 /* transition:all 1s ease; */ 19 transform:50% 50%; 20 background:gray; 21 border-radius:50%; 22} 23 24.li_1:hover .circle_1{ 25@keyframes big{ 26 0%{ 27 transform: scale(0); 28 } 29 100%{ 30 transform: scale(1); 31 } 32} 33}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/10 04:58