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!