Teach you step by step how to use html+css to achieve carousel effect (code sharing)-HTML Tutorial-php.cn

In the previous article "Teach you step by step how to use CSS to create a simple heartbeat effect (detailed code explanation)", I introduced you how to use CSS to create a simple heartbeat effect. The following article will introduce to you how to use html css to achieve carousel effect. Let’s see how to do it together.

Teach you step by step how to use html+css to achieve carousel effect (code sharing)

The renderings of promoting the carousel are as follows

Teach you step by step how to use html+css to achieve carousel effect (code sharing)

First write theHtmlpart , you can understand thisdivtag. If you writeCSSorJS, you can use thesedivtags,

 is a divwith theIDbeingcontainer. Without going into too much detail, let me give you the code below. Example.
       
        div id="container"> 
        
         Copy after login
        
       
       id="screen"This can set attributes for thedivtag block, such as width, height, color, etc.hrefNow is a meaning ofCSScode is to specify the hyperlink target,tag# The ##srcattribute is required. Its value is theURLof the image file, which is the absolute path or relative path of the file that references the image.

       a href="#"Usage
        
         
         
          Copy after login
         
        
       CategoryInternal connection:
       nameAnchor:
       namenameExternal link:
       nameCreate a link withnameis the URL link of the representation.Link description text:
       ...
       img src=""UsageThe picture and the
       HTMLtext are in the same directory: for exampleindex.htmlandimg.jpg
       
        
        
         Copy after login
        
       
       The picture and
       HTMLare not in the same directory: The pictureimg.jpgis in the folderimages,index.htmlThe folderimagesis in the same directory
       
        
        
         Copy after login
        
       
       Picture
       img.jpgis in the folderimages,index. htmlIn thecontrollerfolder, theimagesandcontrollerfolders are in the same directory
       
        
        
         Copy after login
        
       
       Change the image width and height Set to 200 pixels respectively: The
       heightandwidthproperties of thetag set the dimensions of the image.
       
        
        
         Copy after login
        
       
       htmlComplete code
       
       
                 " 
          
          
          
         
        
         Copy after login
        
       
       ok, after writing the html editing code, then use css to write and edit
       Set the inner and outer margins to
       0px, then set theatag inscreento [left floating] and set the animation attribute, the period is1sand it will loop infinitely.
       
        *{ margin: 0px; padding: 20px; } #screen a{ animation: donghua 1s infinite; float: left;
        
         Copy after login
        
       
       Code effect
       

       Settings
       containerThe width and height are both200px(with the image width same) and hide the overflow.On the straight line of five pictures side by side, taking the lower left corner of each picture as the coordinate point, the abscissas are
       0px,200px,400px,600px,800px
       
        @keyframes donghua{ 0%{transform: translate(0px)} 18%{transform: translate(0px)} 20%{transform: translate(-200px)} 38%{transform: translate(-200px)} 40%{transform: translate(-400px)} 58%{transform: translate(-400px)} 60%{transform: translate(-600px)} 78%{transform: translate(-600px)} 80%{transform: translate(-800px)} 100%{transform: translate(-800px)} }
        
         Copy after login
        
       
       Effect code
       
       ok, complete css code
       Complete code
       
       
        
         
          
           
          
         
         
          
           
          
         
         " 
          
          
          
         
        
         Copy after login
        
       【End】
       Recommended learning:
       HTML/CSS video tutorial


      
      The above is the detailed content of Teach you step by step how to use html+css to achieve carousel effect (code sharing). For more information, please follow other related articles on the PHP Chinese website!