A css animation of a send button transforming into flying birds when clicked.
CodeMyUI CodeMyUI
CodeMyUI
/ 04animation-send-button-transforms-into-birds.markdown
Created
December 11, 2019 23:30
#04animation: send button transforms into birds
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #cracker.cracker | |
| .cracker-message | |
| .cracker-message__inner | |
| Merry Xmas | |
| %br/ | |
| From | |
| %br/ | |
| Mike Samways! | |
| .cracker-left | |
| .cracker-left-inner |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <button> | |
| <svg viewBox="0 0 242 109" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |
| <g class="ears"> | |
| <g class="ear-left"> | |
| <ellipse class="ear-left-outer" transform="matrix(0.9391 -0.3436 0.3436 0.9391 -3.6062 17.8444)" cx="48.5" cy="19.1" rx="11.4" ry="13.8"/> | |
| <ellipse class="ear-left-inner" transform="matrix(0.9391 -0.3436 0.3436 0.9391 -3.8876 17.4659)" cx="47.3" cy="19.7" rx="7.3" ry="11.2"/> | |
| </g> | |
| <g class="ear-right"> | |
| <ellipse class="ear-right-outer" transform="matrix(0.3436 -0.9391 0.9391 0.3436 106.5379 189.869)" cx="189.1" cy="18.7" rx="14.4" ry="11.9"/> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Christmas Button</title> | |
| <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> | |
| </head> | |
| <body> | |
| <div class="bg"> | |
| <div class="centerer"> | |
| <a href="#" class="button">Christmas Button</a> |
CodeMyUI
/ gsap-banner-ad-animating-clippath-b-320x50.markdown
Created
November 27, 2019 03:35
GSAP Banner Ad - Animating Clippath - B (320x50)
CodeMyUI
/ gsap-banner-ad-animating-clippath-a-320x50.markdown
Created
November 27, 2019 03:35
GSAP Banner Ad - Animating Clippath - A (320x50)
CodeMyUI
/ gsap-banner-ad-animating-clippath-b-160x600.markdown
Created
November 27, 2019 03:33
GSAP Banner Ad - Animating Clippath - B (160x600)
CodeMyUI
/ gsap-banner-ad-animating-clippath-a-160x600.markdown
Created
November 27, 2019 03:31
GSAP Banner Ad - Animating Clippath - A (160x600)
CodeMyUI
/ gsap-banner-ad-animating-clippath-b-728x90.markdown
Created
November 27, 2019 03:30
GSAP Banner Ad - Animating Clippath - B (728x90)
CodeMyUI
/ gsap-banner-ad-animating-clippath-a-728x90.markdown
Created
November 27, 2019 03:29
GSAP Banner Ad - Animating Clippath - A (728x90)