How to use CSS to create a marquee effect

Steps on how to use CSS to implement the marquee effect

The marquee effect is a common front-end special effect that displays continuously scrolling text or pictures on a web page. Adds some movement and energy to the page. This article will introduce the specific steps on how to use CSS to achieve the marquee effect, and provide corresponding code examples for reference.

Step 1: Create HTML structure

First, we need to create a container in HTML to achieve the marquee effect. You can use a div element as a container, as shown below:

<div class="marquee-container">
  <ul class="marquee-content">
    <li>跑马灯内容1</li>
    <li>跑马灯内容2</li>
    <li>跑马灯内容3</li>
    <!-- 添加更多的跑马灯内容 -->
  </ul>
</div>

In the above code, we created a div element with class "marquee-container" as the container of the marquee, and created it inside this container A ul element with class "marquee-content" is used to accommodate the content of the marquee.

Step 2: Set CSS styles

Next, we need to set the corresponding CSS styles for the container and content. The specific steps are as follows:

1. Set the width and height of the container, and set it to relative positioning (position: relative) to position the marquee content within the container.

.marquee-container {
  width: 100%;
  height: 100px;
  position: relative;
}

2. Set the content style and scrolling effect. Set the content's ul element to absolute positioning (position: absolute) and set its width to a larger value to ensure that the content can scroll horizontally.

.marquee-content {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  white-space: nowrap; /* 防止内容换行 */
  animation: marquee 10s linear infinite; /* 设置滚动效果 */
}

@keyframes marquee {
  0% { transform: translateX(0%); } /* 初始状态，内容从左侧显示 */
  100% { transform: translateX(-100%); } /* 结束状态，内容向左滚动完全消失 */
}

In the above code, we set up a @keyframes animation named "marquee" to achieve horizontal scrolling of the content through the translateX function of the transform attribute. Set the initial state of 0% to a horizontal offset of 0%, the end state of 100% to a horizontal offset of -100% (i.e. scroll left until the content disappears completely), and set the animation to last 10 seconds, linear motion, and infinite loop.

Step 3: Adjust the display effect of the container and content

Finally, we can adjust the display effect of the container and content according to actual needs. For example, we can set the background color, borders, margins, etc. of the container to better match the overall style of the page. At the same time, we can also set the font, color, font size, etc. of the content, and add some CSS transition effects to increase the smoothness of the marquee.

.marquee-container {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  margin: 20px;
}

.marquee-content li {
  font-family: Arial, sans-serif;
  color: #333;
  font-size: 16px;
  padding: 10px;
  transition: color 0.3s ease-in-out;
}

.marquee-content li:hover {
  color: #ff0000; /* 鼠标悬停时改变文字颜色 */
}

In the above code, we set the background color of the container to #f2f2f2, the border to 1px solid #ccc, and set the margin to 20px. At the same time, we set the font of the content to Arial, the color to #333, the font size to 16px, and set a 0.3-second color transition effect for the content, so that the text color gradually turns red when the mouse is hovered.

In summary, through the above steps, we can use CSS to achieve a simple marquee effect. Of course, according to actual needs, we can further expand and optimize this effect. Hope the above content is helpful to you!

The above is the detailed content of How to use CSS to create a marquee effect. For more information, please follow other related articles on the PHP Chinese website!