Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Can you please help? :)

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #285916
    PCEE
    Participant

    Hello,

    Thank you for this amazing fraternity who is always willing to help out. I am still at the early stages of CSS and appreciate any help.

    I have got my hands on the CSS code below to create floating circle on a website which i would like to use.

    As I need to use it only on a specific page – http://www.digitalthynk.com (about us), how to i make sure that this code only applies to this page. By doing a copy and paste in the CSS section, how would the site know where this should apply?

    Many Thanks

    PCEE

    body {
    background-color: #111;
    overflow: hidden;
    }

    svg {
    width: 25vw;
    max-width: 250px;
    max-height: 250px;
    padding: 2rem;
    }

    .x {
    -webkit-animation: x 20s linear infinite alternate;
    animation: x 20s linear infinite alternate;
    }

    .y {
    -webkit-animation: y 10s linear infinite alternate;
    animation: y 10s linear infinite alternate;
    }

    @-webkit-keyframes x {
    100% {
    -webkit-transform: translateX(calc(100vw – 25vw));
    transform: translateX(calc(100vw – 25vw));
    }
    }

    @keyframes x {
    100% {
    -webkit-transform: translateX(calc(100vw – 25vw));
    transform: translateX(calc(100vw – 25vw));
    }
    }

    @-webkit-keyframes y {
    100% {
    -webkit-transform: translateY(calc(100vh));
    transform: translateY(calc(100vh));
    }
    }

    @keyframes y {
    100% {
    -webkit-transform: translateY(calc(100vh));
    transform: translateY(calc(100vh));
    }
    }

    #286011
    Dagny
    Participant

    As long as the element you are targeting is present and the CSS is loaded, it will know what to do.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.