如何使用CSS過渡從中心向外擴展背景

我試圖在鼠標懸停在Material 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; 
}

會有人知道我怎麼能有彩色的背景展開，並從（什麼我上面有對面）元素的中心填？

來源

2016-11-30 MeltingDog

你可以嘗試這樣的。它將懸停效果放在父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/

來源

2016-11-30 02:16:41 Beno

將'transition'屬性置於非懸停狀態以應用動畫過渡。 – jkris

@jkris很好的電話。我也將轉換添加到非懸停狀態 – Beno

你可以嘗試這樣的事情。你也可以使用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>

來源

2016-11-30 01:52:12 Blezx

謝謝但這是我想要做的有點不同。我只想使用CSS轉換。儘可能避免使用關鍵幀。 – MeltingDog

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

來源

2016-11-30 02:17:44 jkris

我在找相同的東西。感謝您的加入。雖然你已經選擇了一個答案，但我會分享我的黑客，看起來與引用頁面上的類似。

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>

來源

2017-08-02 20:58:12

如何使用CSS過渡從中心向外擴展背景

回答

相關問題