Examples of dynamic text effects using pure CSS

I believe everyone has seen the medium effect on the website. Once the page is opened, both text and pictures change with the specified time. Today we will introduce how to achieve this effect by using pure CSS. Let’s take a look below.

You may often see cool websites

You can see in this type of website that as soon as the page is opened, both text and pictures change with the specified time. The principle is very simple, mainly using the animation attribute in CSS.

Next, I will take my current project as an example to achieve the animation effect of text and pictures.

HTML code writing:

##Copy code

The code is as follows:

<section class="rw-wrapper">
<span class="span-title">文字题目</span>
<h2 class="rw-sentence">
</h2>
</section>

At present, the general framework has been written, including a section tag, span (add according to preference), and h2 tag. Next add text code to it. Put the code in h2.

Copy code

The code is as follows:

<p class="rw-words rw-words-1">
<span>内容1</span>
<span>内容2</span>
...
</p>

The first text animation HTML.

Copy code

The code is as follows:

<p class="rw-words rw-words-2">
<span>内容1</span>
...
</p>

The second type of text animation HTML.

Copy code

The code is as follows:

//同理
<p class="rw-words rw-words-3">
<span><img  src="/static/imghwm/default1.png"  data-src="图片路径"  class="lazy"      style="max-width:90%" height="XX" alt="Examples of dynamic text effects using pure CSS" ></span>
...
</p>

The image transformation effect is as shown in the GIF above. Pictures slide from the right and change.

ok, now that the HTML code is done, now let’s implement the core part: CSS animation and font styles.

CSS code writing

Copy code

The code is as follows:

.rw-words{
-webkit-perspective:800px;
-moz-perspective:800px;
-o-perspective:800px;
-ms-perspactive:800px;
perspactive:800px;
}

By the way, the perspective attribute defines the distance of the 3D element from the view, in pixels. When you define the perspective attribute for an element, its child elements get the perspective effect, not the element itself. The number 800px represents the distance of the element from the view. -moz represents firefox browser private properties, -ms represents IE browser private properties, -webkit represents chrome and safari private properties, -o represents opera browser private properties.

Copy code ##The code is as follows:

.rw-words span{
white-space:nowrap; //文字不允许换行
overflow:hidden;
}

The specific label position settings are set according to the actual situation.

Copy codeThe code is as follows:

.rw-words-1 span{
-webkit-animation: rotateWordsFirst 10s linear infinite 0s;
-o-animation: rotateWordsFirst 10s linear infinite 0s;
-moz-animation: rotateWordsFirst 10s linear infinite 0s;
-ms-animation: rotateWordsFirst 10s linear infinite 0s;
animation:rotateWordsFirst 10s linear infinite 0s;
}

Use animation effects here! First, rotateWordsFirst is the name of the animation, 10s is the time it takes for the entire animation to be completed once, linear is the time curve used, and infinite is repeated an unlimited number of times.

About animation syntax:

##Copy code

The code is as follows:

animation: name duration timing-function delay iteration-count direction;

animation-name: Specifies the keyframe name that needs to be bound to the selector.

animation-duration: Specifies the time it takes to complete the animation, in seconds or milliseconds.

animation-timing-function: Specifies the speed curve of animation.

animation-delay: Specifies the delay before the animation starts.

animation-iteration-count: Specifies the number of times the animation should be played (infinite rotation)

animation-direction: Specifies whether the animation should be played in reverse in turn.

If you want to know more, search: CSS series animationi.

Next, another type of animation.

Copy code

The code is as follows:

.rw-words-2 span{
-webkit-animation: rotateWordsFirst 10s ease-in infinite 0s;
-o-animation: rotateWordsFirst 10s ease-in infinite 0s;
-moz-animation: rotateWordsFirst 10s ease-in infinite 0s;
-ms-animation: rotateWordsFirst 10s ease-in infinite 0s;
animation:rotateWordsFirst 10s ease-in infinite 0s;
}

ease-in explanation:

ease is stipulated to be slow A transition effect that starts at a slow speed, then becomes faster, and then ends at a slow speed; ease-in specifies a transition effect that starts at a slow speed; ease-out specifies a transition effect that ends at a slow speed; ease-in-out specifies a transition effect that starts at a slow speed and ends at a slow speed Ending transition effect (you can try these effects)

Similarly, the .rw-words-3 span can be set in the same way.

Copy code

The code is as follows:

.rw-words span：nth-child(1){
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}

:nth-child(n) selector matches the element that belongs to its parent The Nth child element of , regardless of the element's type. n can be a number, keyword, or formula.

Copy code

The code is as follows:

.rw-words span:nth-child(n) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
...

Set different selectors to achieve display delay between text .

Copy code

The code is as follows:

@-webkit-keyframes rotateWordsFirst/second {
0% { opacity: 0; -webkit-animation-timing-function: ease-in; width: 0px;}
//此属性查看animation
5% { opacity: 1; -webkit-animation-timing-function: ease-out; width: 100%;}
17% { opacity: 1; } //设置不透明级别
20% { opacity: 0; }
100% { opacity: 0; }
}

keyframes defines the timeline for each animation, and you can set a certain time What is the state of the element being animated. Used with animation.

Then write the adaptation of each browser, such as -o, -moz, -ms, etc.

In addition to the animation attribute, you can also try the use of the transform attribute, which can achieve effects such as rotation and scaling of text and images. The above is all about using pure CSS to achieve dynamic text effects. I hope it can help It helps everyone learning to use CSS.

Related recommendations:

CSS text font color setting method (CSS color)

The above is the detailed content of Examples of dynamic text effects using pure CSS. For more information, please follow other related articles on the PHP Chinese website!