Animación de un botón con efectos borroso y pegajoso creado con SVG y keyframes CSS.
HTML
xxxxxxxxxx1
<svg viewBox="45 60 400 320" xmlns="http://www.w3.org/2000/svg">2
<path fill="#fff" d="M 90 210 C 90 180 90 150 90 150 C 150 150 180 150 180 150 C 180 150 300 150 300 150 C 300 150 330 150 390 150 C 390 150 390 180 390 210 C 390 240 390 270 390 270 C 330 270 300 270 300 270 C 300 270 180 270 180 270 C 180 270 150 270 90 270 C 90 270 90 240 90 210" mask="url(#knockout-text)" >3
</path>4
<mask id="knockout-text">5
<rect width="100%" height="100%" fill="#fff" x="0" y="0" />6
<text x="147" y="227" fill="#000">BUTTON</text>7
</mask>8
</svg>9
10
<!--- M 90 210 C 90 180 90 150 150 150 C 150 150 180 150 180 150 C 180 150 300 150 300 150 C 300 150 330 150 330 150 C 390 150 390 180 390 210 C 390 240 390 270 330 270 C 330 270 300 270 300 270 C 300 270 180 270 180 270 C 180 270 150 270 150 270 C 90 270 90 240 90 210 --->
CSS
xxxxxxxxxx d: path("M 90 210 C 90 180 110 160 130 160 C 160 160 180 140 200 130 C 230 120 270 100 290 140 C 310 170 340 100 360 140 C 370 160 390 180 390 210 C 390 240 380 290 350 280 C 330 270 300 280 280 290 C 260 300 230 300 220 290 C 200 270 160 310 140 280 C 130 260 90 240 90 210 ");1
@import url("https://fonts.googleapis.com/css?family=Raleway:900");2
* {3
margin: 0;4
padding: 0;5
box-sizing: border-box;6
}7
8
body {9
background-image: url(https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=1600);10
background-size: cover;11
background-position: 50% 50%;12
min-height: 100vh;13
font-family: Raleway, serif;14
}15
body:after {16
content: "";17
width: 100%;18
height: 100%;19
position: fixed;20
background: rgba(0, 0, 0, 0.2);21
z-index: 1;22
}23
24
svg {
JavaScript / jQuery
xxxxxxxxxx1
Comments (0)