Guest Posted February 18, 2020 Share Posted February 18, 2020 Site URL: https://decagon-prism-llwa.squarespace.com/ Dear doozers 😍 The correct code in "Custom CSS" and "Code Injection" is entered (se text). But it hides in the background (see photo). How to show it? (Yes, it is two spotlights #show #stage) Site: https://decagon-prism-llwa.squarespace.com/ Password: SesameTrain Text: HTML <!-- these need to go inside the article on the front page - tested inside <div class="section-background"> container --> <div class="mgp-lights" aria-hidden="true"> <div class="mgp-lights__beam mgp-lights__beam--one"></div> <div class="mgp-lights__beam mgp-lights__beam--two"></div> </div> CUSTOM CSS .mgp-lights { position: fixed; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; } .mgp-lights__beam { background-blend-mode: multiply; mix-blend-mode: color-dodge; background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,136,204,.95)),to(rgba(0,136,204,0))) no-repeat; background: linear-gradient(180deg,rgba(0,136,204,.95) 0,rgba(0,136,204,0)) no-repeat; background-size: 280% 100%; background-position-y: 50%; height: 30%; width: 3rem; -webkit-animation: scan-1 3s cubic-bezier(.4,0,.4,1) infinite alternate; animation: scan-1 3s cubic-bezier(.4,0,.4,1) infinite alternate; position: absolute; top: -2rem; pointer-events: none; will-change: transform; -webkit-clip-path: polygon(45% 0,55% 0,100% 100%,0 100%); clip-path: polygon(45% 0,55% 0,100% 100%,0 100%); -webkit-transform-origin: top center; transform-origin: top center; opacity: .05; height: 50%; width: 16rem; } .mgp-lights__beam.mgp-lights__beam--one { -webkit-animation-name: scan-1; animation-name: scan-1; background-position-x: 80%; left: 23%; -webkit-transform: rotate(60deg); transform: rotate(60deg); } .mgp-lights__beam.mgp-lights__beam--two { -webkit-animation-name: scan-2; animation-name: scan-2; background-position-x: 20%; right: 23%; -webkit-transform: rotate(-60deg); transform: rotate(-60deg); } @keyframes scan-1{50%{opacity:.15}to{-webkit-transform:rotate(-50deg);transform:rotate(-50deg);opacity:.05}}@keyframes scan-2{50%{opacity:.15}to{-webkit-transform:rotate(50deg);transform:rotate(50deg);opacity:.05}} Link to comment
tuanphan Posted February 18, 2020 Share Posted February 18, 2020 add Code Block, and paste HTML + CSS With CSS, wrap in style tag <style> css here </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Guest Posted February 18, 2020 Share Posted February 18, 2020 Thank you so much! It is working very good, you saved my day! 😇 Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.