Home  >  Article  >  Web Front-end  >  How to Create CSS3 Border Animations Without SVG or JavaScript?

How to Create CSS3 Border Animations Without SVG or JavaScript?

Barbara Streisand
Barbara StreisandOriginal
2024-11-02 18:54:311073browse

How to Create CSS3 Border Animations Without SVG or JavaScript?

CSS3 Border Animation without SVG or JavaScript

The popular border animation seen at tympanus.net, often created using SVG, can be recreated using pure CSS3. This article explains the steps involved.

Creating the Animation

Using multiple backgrounds and animating their positions achieves this effect. The code starts with the following HTML:

<code class="html"><div class="border">
  Some text
</div></code>

The CSS for the animation includes four linear gradients to create dashed borders on all sides:

<code class="css">.border {
  background: linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 16px 4px, 16px 4px, 4px 16px, 4px 16px;
  background-position: 0px 0px, 212px 116px, 0px 116px, 216px 0px;
  padding: 10px;
  transition: background-position 2s;
}</code>

This establishes the background with its four dashed borders.

On hover, the background positions are modified to create the animation effect:

<code class="css">.border:hover {
  background-position: 212px 0px, 0px 116px, 0px 0px, 216px 116px;
}</code>

Implementation

To add this animation to each blog post div, simply add the "border" class to the div in your WordPress templates.

This technique provides a simple and CSS-only solution for adding the desired border animation to your WordPress blog posts.

The above is the detailed content of How to Create CSS3 Border Animations Without SVG or JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn