我試圖在鼠標懸停在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;
}
會有人知道我怎麼能有彩色的背景展開，並從（什麼我上面有對面）元素的中心填？
你可以嘗試這樣的。它將懸停效果放在父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);
}
你可以嘗試這樣的事情。你也可以使用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>謝謝但這是我想要做的有點不同。我只想使用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>我在找相同的東西。感謝您的加入。雖然你已經選擇了一個答案，但我會分享我的黑客，看起來與引用頁面上的類似。
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>
將'transition'屬性置於非懸停狀態以應用動畫過渡。 – jkris
@jkris很好的電話。我也將轉換添加到非懸停狀態 – Beno