Home > Developer > Web Develop
CSS3 implements a DIV element that horizontally moves the specified distance:
This chapter shares a section that allows the DIV element to move horizontally at a distance using CSS3.
The code example is as follows:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <Metaname= "Author"content= "http://www.softwhy.com/" /> <title>Ant Tribe</title> <styletype= "Text/css">Div{width:100px;Height:100px;background:Green;position:relative;Animation:theanimation 5s forwards;-webkit-animation:theanimation 5s forwards; }@keyframes theanimation{0% { left:0px;}100%{ Left:200px;}} @-webkit-keyframes theanimation{0% { left:0px;}100%{ Left:200px;} } </style></Head><Body><DivID= "Antzone"></Div></Body></HTML>
The above code implements our requirements, the code is very simple, more content can be read related reading.
Related reading:
(1). Animation can be found in the CSS3 animation attribute Usage section.
(2) [email protected] You can refer to CSS3 's @keyframes usage for a detailed chapter.
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=18160
For more information, refer to: http://www.softwhy.com/divcss/
CSS3 implementation of DIV element horizontal motion specified distance
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
