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

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

奋力向前

Release： 2021-08-27 14:45:39

Original

7046 people have browsed it

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 the Html part , you can understand this div tag. If you write CSS or JS, you can use these div tags, <div id="container"> is a <code>div with the ID being container. Without going into too much detail, let me give you the code below. Example.

div id="container">
<div id="screen">

Copy after login

id="screen" This can set attributes for the div tag block, such as width, height, color, etc. <a href="#">hrefNow is a meaning of CSS code is to specify the hyperlink target, <img alt="Teach you step by step how to use html+css to achieve carousel effect (code sharing)" > tag# The ##src attribute is required. Its value is the URL of the image file, which is the absolute path or relative path of the file that references the image.

a href="#"Usage

<a href="#" onclick="window.close()"></a>

Copy after login

img src=""`Usage`

The picture and the

HTML text are in the same directory: for example index.html and img.jpg

<img  src="img.jpg" alt="Teach you step by step how to use html+css to achieve carousel effect (code sharing)" >

Copy after login

The picture and

HTML are not in the same directory: The picture img.jpg is in the folder images, index.htmlThe folder images is in the same directory

 <img  src="images/img.jpg" alt="Teach you step by step how to use html+css to achieve carousel effect (code sharing)" >

Copy after login

Picture

img.jpg is in the folder images, index. htmlIn the controller folder, the images and controller folders are in the same directory

 <img  src="../images/img.jpg" alt="Teach you step by step how to use html+css to achieve carousel effect (code sharing)" >

Copy after login

Change the image width and height Set to 200 pixels respectively: The

height and width properties of the <img alt="Teach you step by step how to use html+css to achieve carousel effect (code sharing)" > tag set the dimensions of the image.

<img  src="#"    style="max-width:90%"  style="max-width:90%"  alt="Teach you step by step how to use html+css to achieve carousel effect (code sharing)" >

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 the a tag in screen to [left floating] and set the animation attribute, the period is 1s and it will loop infinitely.

*{
	margin: 0px;
	padding: 20px;
}
#screen a{
	animation: donghua 1s infinite;
	float: left;

Copy after login

Code effect

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

Settings

containerThe width and height are both 200px (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

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

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!