如何在我的网站中使用Codepen中的SVG动画？

Question

I want to use these kinds os svg animation in my site how can i import this in my website. I tried creating the HTML, CSS, and javascript provided in that page and added the link and script appropriately still it is not working. link to code pen i also tried to embed like this

<p data-height="265" data-theme-id="0" data-slug-hash="pwZMOJ" data-default-tab="css,result" data-user="miguelcast" data-embed-version="2" data-pen-title="Social Icons vision 3D" class="codepen">See the Pen <a href="https://codepen.io/miguelcast/pen/pwZMOJ/">Social Icons vision 3D</a> by Miguel Cast (<a href="https://codepen.io/miguelcast">@miguelcast</a>) on <a href="https://codepen.io">CodePen</a>.</p>

Answer 1

Thats using SCSS (SASS) You need to convert to CSS then it works.

 .flex-center { width: 100%; min-height: 50vh; background: #000; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .icon-3d { padding: 10px; -webkit-animation: icon3d 200ms 10; animation: icon3d 200ms 10; color: #fff; } .icon-3d:hover { -webkit-animation: icon3d 200ms infinite; animation: icon3d 200ms infinite; } @keyframes icon3d { 0% { text-shadow: 5px 4px #f44336, -5px -6px #2196f3; } 25% { text-shadow: -5px -6px #f44336, 5px 4px #2196f3; } 50% { text-shadow: 5px -4px #f44336, -8px 4px #2196f3; } 75% { text-shadow: -8px -4px #f44336, -5px -4px #2196f3; } 100% { text-shadow: -5px 0 #f44336, 5px -4px #2196f3; } } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="flex-center"> <i class="fa fa-github fa-4x icon-3d"></i> <i class="fa fa-gitlab fa-4x icon-3d"></i> <i class="fa fa-bitbucket fa-4x icon-3d"></i> <i class="fa fa-git fa-4x icon-3d"></i> </div> <div class="flex-center"> <i class="fa fa-twitter fa-4x icon-3d"></i> <i class="fa fa-facebook fa-4x icon-3d"></i> <i class="fa fa-instagram fa-4x icon-3d"></i> <i class="fa fa-whatsapp fa-4x icon-3d"></i> </div>