CSS - 運行Android Lollipop點擊並按住背景，風格

Question

SOLUTION：Fiddle（感謝約西亞）

UPDATE：Fiddle（感謝GaneshBhosale）

我想要的風格按鈕，以便當用戶徘徊時，它的背景是一個像您在下面的動畫中看到的那樣增長的圓圈。 我做了一些測試，但我沒有任何工作小提琴。 任何人都知道如何做到這一點？

HTML

<figure> 
    <a href="#"> 
    <img src="http://lorempixum.com/200/200/nature/1" alt="" /> 
    <figcaption class="circle">Oh, la belle image!</figcaption> </a> 
</figure> 
<figure> 
    <a href="#"> 
    <img src="http://lorempixum.com/200/200/nature/1" alt="" /> 
    <figcaption class="star">Oh, la belle image!</figcaption> </a> 
</figure> 

CSS

.circle { 
    -webkit-clip-path: circle(50%,50%,10%); 
    clip-path: circle(50%,50%,10%); 
} 
a:hover .circle, 
a:focus .circle { 
    -webkit-clip-path: circle(50%,50%,75%); 
    clip-path: circle(50%,50%,75%); 
} 

.star { 
    -webkit-clip-path: polygon(50% 38%, 58% 62%, 38% 47%, 62% 47%, 42% 62%); 
    clip-path: polygon(50% 40%, 58% 60%, 40% 47%, 60% 47%, 42% 60%); 
} 
a:hover .star, 
a:focus .star { 
    -webkit-clip-path: polygon(50% -100%, 180% 200%, -100% 0%, 200% 0%, -80% 200%); 
    clip-path: polygon(50% -100%, 180% 200%, -100% 0%, 200% 0%, -80% 200%); 
} 

figcaption { 

    position: absolute; 

    top: 0; bottom: 0; left: 0; right: 0; 
    transition: -webkit-clip-path .3s; 

} 

/*cosmetics*/ 
figure { 
    position: relative; 
    display: inline-block; 
    width: 200px; height: 200px; 
    margin: 20px; 
    box-shadow: 0 2px 2px rgba(0,0,0,.5); 
} 
figcaption { 
    background: rgba(0,0,0,.8); 
    color: yellowgreen; 
    text-align: center; 
    font-size: 1.4em; 
    padding-top: 2em; 
} 
html { 
    text-align: center; 
} 

編輯：也可以鏈接，LI項目或DIV

謝謝你，感謝AndroidPolice的GIF ！

Answer 1

rdoyle720有種正確的想法，使用圖像絕對是最簡單的方法。但是，我會建議使用兩個容器，父母和「圈子」。你居中圓形，設置no-repeat，並使其爲background-size 0.然後，在父項:hover或:active（我做懸停）時，將「circle」背景大小設置爲很大。

例子：

#parent { 
 
    height: 200px; 
 
    width: 400px; 
 
    background-color: lightgray; 
 
} 
 

 
#circle { 
 
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"); 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    background-size: 0 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    transition: .3s ease-in; 
 
} 
 

 
#parent:hover #circle { 
 
    background-size: 600px 600px; 
 
}

<div id="parent"> <div id="circle"> </div> </div>

，如果你願意，你可以使用不同顏色的圓圈。此外，我會建議SVG圖形，所以縮放看起來很順利。否則你的邊緣會變得波濤洶涌。

對於使用:active看到這樣一個例子：Fiddle

Answer 2

我只是用這樣的實驗。創建一個名爲circle.png的圓形背景。

.tap { 
    background: url(circle.png) center center no-repeat; 
    background-size: 0 0; 
    transition: .5s; 
} 
.tap:active { 
    background-size: 2500px 2500px; 
} 
HTML: 
<a href="#" class="tap">test</a> 

不完美，但應該給你一個開始。

Answer 3

這是同樣的目的一個好劇本：

var button = document.querySelectorAll('.nexus'); 
 
for (var i = 0; i < button.length; i++) { 
 
    button[i].onmousedown = function(e) { 
 

 
    var x = (e.offsetX == undefined) ? e.layerX : e.offsetX; 
 
    var y = (e.offsetY == undefined) ? e.layerY : e.offsetY; 
 
    var effect = document.createElement('div'); 
 
    effect.className = 'effect'; 
 
    effect.style.top = y + 'px'; 
 
    effect.style.left = x + 'px'; 
 
    e.srcElement.appendChild(effect); 
 
    setTimeout(function() { 
 
     e.srcElement.removeChild(effect); 
 
    }, 1100); 
 
    } 
 
}

@keyframes clickeffect { 
 
    from { 
 
    opacity: 0.7; 
 
    transform: scale(0); 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    transform: scale(2); 
 
    } 
 
} 
 

 
@-webkit-keyframes clickeffect { 
 
    from { 
 
    opacity: 0.7; 
 
    transform: scale(0); 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    transform: scale(2); 
 
    } 
 
} 
 

 
.nexus { 
 
    width: 200px; 
 
    height: 50px; 
 
    border: 0px; 
 
    border-radius: 3px; 
 
    position: relative; 
 
    text-align: center; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: lighter; 
 
    font-size: 27px; 
 
    color: #FFFFFF; 
 
    background: #838383; 
 
    cursor: pointer; 
 
    overflow: hidden; 
 
    padding: 8px; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
} 
 
.nexus:focus { 
 
    outline: -webkit-focus-ring-color auto 0px; 
 
} 
 

 
a.nexus{ 
 
    height: 37px; 
 
    padding: 7px 0px; 
 
} 
 
button.nexus{ 
 

 
} 
 

 
.effect { 
 
    margin: -100px; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 100px; 
 
    position: absolute; 
 
    background: rgba(255, 255, 255, 0.5); 
 
    transform: scale(0); 
 
    pointer-events: none; 
 
    animation: clickeffect 1s ease; 
 
    -webkit-animation: clickeffect 1s ease; 
 
} 
 

 
.nexus.grey { 
 
    color: #FFFFFF; 
 
    background: #838383; 
 
} 
 

 
.nexus.red { 
 
    color: #FFF; 
 
    background: #EA7878; 
 
} 
 

 
.nexus.green { 
 
    color: #FFF; 
 
    background: #77CA72; 
 
}

<br> 
 
<center> 
 
    <h2>Click on link to see effect</h2> 
 
    <button class="nexus grey">Button 1</button><br><br> 
 
    <button class="nexus red">Button 2</button><br><br> 
 
    <a href="http://dwijitsolutions.com" class="nexus green" target="_blank">Anchor 1</a><br> 
 
</center>

參考文獻： http://dwij.in/nuggets/animated-button-with-material-design-like-android-lollipop.html