How to use CSS to achieve the effect of gradually shortening text length in a web page?

CSS creates dynamic text shortening effect

In web design, dynamically changing text effects can improve user experience. This article will explain how to use CSS to create visual effects that gradually shorten the length of text, a technique that is often used in creative websites or display pages.

Effect implementation analysis

This example simulates a design case to achieve visual impact of gradually shortening the length of the text.

CSS code implementation

Through shape-outside property of CSS, we can define the shape of the element's peripherals, thereby controlling how text wrapping is. This example uses this property to create a gradually narrowing shape to achieve the shortening effect of text length.

The following is the sample code:

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic text shortening effect</title>
    <style>
        .container {
            width: 300px;
        }
        .shape {
            float: left;
            width: 300px;
            height: 300px;
            shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 50%, 50% 50%, 100% 50%, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 50%, 50% 50%, 100% 50%, 100% 100%, 0 100%); /* 可选，与shape-outside配合使用 */
            background-color: #f0f0f0;
        }
        p {
            margin: 0;
            padding: 20px;
        }
    </style>


    <div class="container">
        <div class="shape"></div>
        <p>This is a sample text that shows the effect of the text length getting shorter. Repeat this text multiple times to observe the effect.</p>
    </div>

In the code, shape-outside property defines a polygon, and the length will gradually be shortened when the text wraps around the shape. clip-path property is used in conjunction with shape-outside to enhance the effect (optional). By adjusting the vertex coordinates of the polygon, you can change the shape and degree of the shortening effect. You can try to modify the polygon parameters and explore different visual effects.

The above is the detailed content of How to use CSS to achieve the effect of gradually shortening text length in a web page?. For more information, please follow other related articles on the PHP Chinese website!