Code hiệu ứng chuyển động cho chữ (Text Animation)

Dưới đây là một số đoạn code HTML, CSS hiệu ứng chuyển động cho chữ (tiếng Anh là Text Animation) rất đẹp và thường được dùng khi làm website.

Marquee trong HTML

Cách dùng như sau

<marquee>Chào mừng bạn đến với TuongAds.com!</marquee>

1	<marquee>Chào mừng bạn đến với TuongAds.com!</marquee>

Đây là kết quả
Chào mừng bạn đến với TuongAds.com!

Và tiếp theo là đoạn marquee chạy từ trái qua phải

<marquee direction="right"> Chúc mừng năm mới </marquee>

1	<marquee direction="right"> Chúc mừng năm mới </marquee>

Đây là kết quả
Chúc mừng năm mới

Hiệu Ứng Text Blend Mode

Trông nó như trong video

Code HTML

<div class="container-ef">
  <div class="text"><span>Chào mừng bạn đến với TuongAds</span></div>
</div>

<div class="text"><span>Chào mừng bạn đến với TuongAds</span></div>

</div>

CSS

.container-ef{
  display: flex;
  justify-content: center;
  max-width:1200px;
  height: 350px;
  margin: 0 auto;
  align-items: center;
}
.text{
  position: relative;
  font-size: 2em;
  background: #fff;
  color: #000;
  text-transform: uppercase;
  letter-spacing: .3em;
  font-weight: bold;
  padding: 5px;
}
.text span{
  color: #fff;
  mix-blend-mode: difference;
}
.text:before{
  content:"";
  position: absolute;
  top:0;
  width:60px;
  height: 100%;
  background: #000;
  animation: thangcover 4s linear infinite;
}
@keyframes thangcover {
  0%{
    left: 0;
  }
  50%{
    left: calc( 100% - 60px);
  }
  100%{
    left:0;
  }
}

.container-ef{

display: flex;

justify-content: center;

max-width:1200px;

height: 350px;

margin: 0 auto;

align-items: center;

}

.text{

position: relative;

font-size: 2em;

background: #fff;

color: #000;

text-transform: uppercase;

letter-spacing: .3em;

font-weight: bold;

padding: 5px;

}

.text span{

color: #fff;

mix-blend-mode: difference;

}

.text:before{

content:"";

position: absolute;

top:0;

width:60px;

height: 100%;

background: #000;

animation: thangcover 4s linear infinite;

}

@keyframes thangcover {

0%{

left: 0;

}

50%{

left: calc( 100% - 60px);

}

100%{

left:0;

}

Ok.

Chia sẻ code, Hướng dẫn

Code hiệu ứng chuyển động cho chữ (Text Animation)

Marquee trong HTML

Hiệu Ứng Text Blend Mode

Trả lời Hủy

Main Headline

Smaller Headline

ĐĂNG KÝ NHẬN TƯ VẤN