Bring to life a dashed slanted line

Question

Bring to life a dashed slanted line

After incorporating the code from this post on Stack Overflow about animating diagonal lines, I was pleasantly surprised with how well it worked.

However, my next goal is to style the line in such a way that it appears dotted or dashed, as opposed to one solid line. I've attempted using the dotted and dashed border attributes, but unfortunately, they only seem to alter the outer border rather than the line itself.

If anyone has any suggestions or tips on how I can achieve this desired effect, your insight would be greatly appreciated.

css css-animations

Answer 1

Answer №1

If you're looking to create a cool animation effect, take inspiration from cocoa's suggestion. Start by drawing a line using SVG, then overlay a mask on top of it. Finally, animate the mask to reveal the line in a visually appealing way.

For a practical demonstration and code example, check out this CodePen demo.

<div class="box">
    <svg height="200" width="200" class="line1">
        <line fill="none" stroke="black" x1="0" y1="0" x2="200" y2="200" stroke-dasharray="5, 5" />
    </svg>
    <div class="mask"></div>
</div>

.box {
    overflow: hidden;
    outline: dotted 1px;
    width: 200px; 
    height: 200px;
    position: relative;
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px; 
    height: 200px;
    z-index: 10;
    background-color: white;
    background-repeat: no-repeat;
    animation: showDiag 2s linear forwards;
}

@keyframes showDiag {
    from { left: 0; top: 0; }
    to { left: 200px; top: 200px; }
}

Answer 2

If you're looking to create a cool animation effect, take inspiration from cocoa's suggestion. Start by drawing a line using SVG, then overlay a mask on top of it. Finally, animate the mask to reveal the line in a visually appealing way.

For a practical demonstration and code example, check out this CodePen demo.

<div class="box">
    <svg height="200" width="200" class="line1">
        <line fill="none" stroke="black" x1="0" y1="0" x2="200" y2="200" stroke-dasharray="5, 5" />
    </svg>
    <div class="mask"></div>
</div>

.box {
    overflow: hidden;
    outline: dotted 1px;
    width: 200px; 
    height: 200px;
    position: relative;
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px; 
    height: 200px;
    z-index: 10;
    background-color: white;
    background-repeat: no-repeat;
    animation: showDiag 2s linear forwards;
}

@keyframes showDiag {
    from { left: 0; top: 0; }
    to { left: 200px; top: 200px; }
}

Bring to life a dashed slanted line

Answer №1

Similar questions

Toggle the display of slide numbers in RMarkdown xaringan / reveal.js presentations

How do I make a div's height equal to 100% of the height of its parent

Unexpected issue encountered for identifiers beginning with a numerical digit

Is the content within the h3 tag invisible on Internet Explorer 8?

Tips for altering the selected color of a checkbox?

The functionality of JQuery's .hover() is disabled once an HTML onClick() event is activated

What’s the best method for enclosing a table and text within a div?

The problem with -webkit-center in HTML

What is the best way to position a div at the bottom of a web page?

Maximizing Efficiency on the Frontend: Balancing Requests with Caching

`the mobile site is not displaying properly on the screen`

What is the most effective way to extract information from a .txt file and showcase a random line of it using HTML?

Is there a way to turn off step navigation in bootstrap?

When you add the measurements of two images to the top bar, you get the viewport size

Unable to close Bootstrap sidebar menu on mobile devices

Modify the appearance of HTML dialog box using CSS styling

The leaking of angular-material CSS onto other divs is causing unexpected styling

What is the function of typekit.com and how does it utilize @font-face technology

Is there a way to automatically determine the text direction based on the language in the input text?

Is there a way to eliminate the table-hover effect on specific rows in the table?