CSSトランジションで外側からバックグラウンドスケールを作成する方法

Question

マテリアルUIの日付ピッカーhereを使用して日付上にマウスを移動したときにエフェクトを再現しようとしています（ピッカーをトリガするためにテキスト入力をクリックしてから、バックグラウンドは中心から外側に広がります。

私はここからCSSをコピーしようとしましたが、逆の作業しかできませんでした。参照：https://jsfiddle.net/2zkofa0x/3/

マイCSS：

span:hover { 
    color: #fff; 
    background: rgba(0, 151, 167, 0.5); 
    border-radius: 50%; 
    transform: scale(1); 
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; 
} 

誰もが、私は色の背景が広がっており、要素（私は上記の持っているものの反対側）の中心から埋めることができる方法を知っているだろうか？

Answer 1

あなたはこのように試みることができます。ヒットターゲットが常に存在するように、親divにホバー効果を設定します。

また、円は0のスケールで開始する必要があるため、トランジション中にフルサイズに拡大できます。

HTML：

<div class='container'> 
    <div class='circle'> 
    </div> 
    <span>42</span> 
</div> 

CSS：

div.container { 
    position: relative; 
    height: 30px; 
    width: 30px; 
} 

div.container > div.circle {  
    position: absolute; 
    top: 0; 
    left: 0; 
    border-radius: 50%; 
    width: 30px; 
    height: 30px; 
    transform: scale(0); 
    transition: all 450ms ease 0ms; 
} 

div.container:hover > div.circle { 
    background: rgba(0, 151, 167, .5); 
    border-radius: 50%; 
    transform: scale(1); 
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; 
} 

div.container span {  
    position: relative; 
    padding: 7px; 
    line-height: 30px; 
} 

div.container:hover span { 
    color: rgb(255, 255, 255); 
} 

https://jsfiddle.net/2zkofa0x/18/

Answer 2

このようなものを試すことができます。 jqueryを使用しても同じ効果を得ることができます。

/* Material style */ 
 
button { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: none; 
 
    cursor: pointer; 
 
    color: white; 
 
    padding: 15px; 
 
    border-radius: 360px; 
 
    font-size: 22px; 
 
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .4); 
 
    background: #2196F3; 
 
} 
 

 
/* Ripple magic */ 
 
button{ 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
button:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 5px; 
 
    height: 5px; 
 
    background: rgba(255, 255, 255, .5); 
 
    opacity: 0; 
 
    border-radius: 50%; 
 
    transform: scale(1, 1) translate(-50%); 
 
    transform-origin: 50% 50%; 
 
} 
 

 
@keyframes ripple { 
 
    0% { 
 
    transform: scale(0, 0); 
 
    opacity: 1; 
 
    } 
 
    20% { 
 
    transform: scale(25, 25); 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    transform: scale(40, 40); 
 
    } 
 
} 
 

 
button:focus:not(:active)::after { 
 
    animation: ripple 1s ease-out; 
 
} 
 

 

 
/* On Hover */ 
 
.ripple-button1{ 
 
\t position:relative; 
 
\t width:200px; 
 
\t height:200px; 
 
\t background-color:#99C; 
 
\t color:#FFF; 
 
\t border-radius:360px; 
 
\t text-decoration:none; 
 
\t text-align:center; 
 
\t vertical-align:middle; 
 
\t display:table-cell; 
 
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .4); 
 
} 
 

 
.wave1{ 
 
\t position:absolute; 
 
\t width:200px; 
 
\t height:200px; 
 
\t background-color:#FFF; 
 
\t top:0; 
 
\t left:0; 
 
\t transform: scale(0); 
 
\t opacity:0.5; 
 
\t border-radius:300px; 
 
} 
 

 
.ripple-button1:hover > .wave1{ 
 
\t animation: ripple-in1 2s; 
 
} 
 
    
 
@keyframes ripple-in1 { 
 
0% {transform: scale(0);} 
 
20%{transform: scale(1);opacity:0.3;} 
 
100%{transform: scale(1);opacity:0;} 
 
}

<h3>Ripple on Click</h3> 
 
<button>Click !</button> 
 
<h3>Ripple on Hover</h3> 
 
<a href="#" class="ripple-button1"><div class="wave1"></div>Hover !</a>

Answer 3

使用box-shadow

li { position: relative; display: inline-block; padding: 10px; } 
 
li:before { 
 
    content: ''; 
 
    height: 1px; 
 
    width: 1px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    box-shadow: 0 0 0 0px #18b; 
 
    border-radius: 50%; 
 
    background: #18b; 
 
    transition: all .3s; 
 
    opacity: 0; 
 
    z-index: -1; 
 
} 
 
li:hover:before { 
 
    box-shadow: 0 0 0 15px #18b; 
 
    opacity: 1; 
 
}

<ul> 
 
\t <li>1</li> 
 
\t <li>2</li> 
 
</ul>

Answer 4

私は同じものを探していました。育てていただきありがとうございます。すでに回答を選択していますが、引用したページに似たようなハッキングを共有します。

div { 
 
    margin: 25px; 
 
    height: 100px; 
 
    width: 100px; 
 
    text-align: center; //Fix the element to center 
 
} 
 

 
span { 
 
    width: 50px; 
 
    height: 50px; 
 
    padding: 5px; 
 
    border-radius: 50%; 
 
} 
 

 
span:hover { 
 
    color: #fff; 
 
    background: rgba(0, 151, 167, 0.5); 
 
    padding: 15px; //Transform padding, width and height instead of border-radius 
 
    width: 20px; 
 
    height: 20px; 
 
    transform: scale(1); 
 
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 1ms; 
 
}

<div> 
 
    <span>42</span> 
 
</div>