2016-11-30 11 views
0

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

私はここから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; 
} 

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

答えて

3

あなたはこのように試みることができます。ヒットターゲットが常に存在するように、親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/

+0

'transition'プロパティを非ホバー状態にして、アニメーションを遷移に適用します。 – jkris

+0

@jkris良いお電話。私は非ホバリング状態への移行も追加しました – Beno

0

このようなものを試すことができます。 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>

+0

おかげで、これは私が何をしたいのかに少し異なっています。私は、CSSトランジションを使いたいだけです。可能であれば、キーフレームを避けるようにします。 – MeltingDog

2

使用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>

0

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

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>

関連する問題