Lillynbhbu Posted November 15, 2020 Share Posted November 15, 2020 Site URL: https://codepen.io/scallemang/pen/GJBbZQ Hello, I am trying to add this codeopen to my website but it is not showing up on my page when I copy the code, I am not sure what I am doing wrong. https://codepen.io/scallemang/pen/GJBbZQ Beyondspace 1 Link to comment
Beyondspace Posted November 16, 2020 Share Posted November 16, 2020 2 hours ago, Lillynbhbu said: Site URL: https://codepen.io/scallemang/pen/GJBbZQ Hello, I am trying to add this codeopen to my website but it is not showing up on my page when I copy the code, I am not sure what I am doing wrong. https://codepen.io/scallemang/pen/GJBbZQ I convert the sccs to css and made some changes <div class="text-anim"> <svg viewBox="0 0 840 600"> <symbol id="s-text"> <text text-anchor="middle" x="50%" y="60%" class="text--line" > SCA </text> </symbol> <g class="g-ants"> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> </g> </svg> </div> <style> @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); .text-anim { height: 100%; } .text-anim { background: white; font: 20em/1 'Montserrat', serif; } .text-anim svg { position: absolute; width: 100%; height: 100%; } .text-copy { fill: none; stroke: white; stroke-dasharray: 6% 29%; stroke-width: 5; stroke-dashoffset: 0%; -webkit-animation: stroke-offset 5s infinite linear; animation: stroke-offset 5s infinite linear; } .text-copy:nth-child(1) { stroke: #4CAF50; -webkit-animation-delay: -1s; animation-delay: -1s; } .text-copy:nth-child(2) { stroke: #F44336; -webkit-animation-delay: -2s; animation-delay: -2s; } .text-copy:nth-child(3) { stroke: #03A9F4; -webkit-animation-delay: -3s; animation-delay: -3s; } .text-copy:nth-child(4) { stroke: #FF9800; -webkit-animation-delay: -4s; animation-delay: -4s; } .text-copy:nth-child(5) { stroke: #9C27B0; -webkit-animation-delay: -5s; animation-delay: -5s; } @-webkit-keyframes stroke-offset { 100% { stroke-dashoffset: -35%; } } @keyframes stroke-offset { 100% { stroke-dashoffset: -35%; } } </style> tuanphan 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Guest Posted March 23, 2022 Share Posted March 23, 2022 Hello, how can I add https://codepen.io/hollyos/pen/QNRXYK and https://codepen.io/rileyjshaw/pen/bEEVra into my website? I have been trying to follow, but nothing changed! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment