Can you please help? :)

[PCEE]

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));
}
}

[Dagny]

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

[Author]

Posts