Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use css3 to achieve trajectory movement, the article is very detailed, has a certain reference value, interested friends must read it!

Achieve results:

Implementation code:

. haorooms-dot {

Width:20px

Height:20px

-webkit-animation: xAxis 2.5s infinite ease-in

Animation: xAxis 2.5s infinite ease-in

Position:relative

}

. haorooms-dot::after {

Content: 'haorooms'

Display: block

Width: 20px

Height: 20px

Border-radius: 20px

Background-color: # fff

-webkit-animation: yAxis 2.5s infinite ease-out

Animation: yAxis 2.5s infinite ease-out

Position:absolute

}

@-webkit-keyframes yAxis {

50% {

-webkit-animation-timing-function: ease-out

Animation-timing-function: ease-out

-webkit-transform: translateY (- 150px)

Transform: translateY (- 150px)

}

}

@ keyframes yAxis {

50% {

-webkit-animation-timing-function: ease-out

Animation-timing-function:ease-out

-webkit-transform: translateY (- 150px)

Transform: translateY (- 150px)

}

}

@-webkit-keyframes xAxis {

50% {

-webkit-animation-timing-function:ease-in

Animation-timing-function: ease-in

-webkit-transform: translateX (150px)

Transform: translateX (150px)

}

}

@ keyframes xAxis {

50% {

-webkit-animation-timing-function:ease-in

Animation-timing-function: ease-in

-webkit-transform: translateX (150px)

Transform: translateX (150px)

}

}

The above is all the contents of the article "how to use css3 to achieve trajectory Motion". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.