Подтвердить что ты не робот

Пунктирная анимация в анимации css3

Я видел эту статью http://tympanus.net/Tutorials/BorderAnimationSVG/

Я хочу добавить это в свой блог WP. Чтобы каждый новый пост-div имел эту анимацию на своей границе. Но проблема в том, что это в SVG. Есть ли в любом случае я могу сделать эту анимацию работать без использования SVG, а также я не хочу использовать javascript.

Давайте скажем, что код:

.go {
  width: 900px;
  height: 200px;
  border: 8px dashed;
}
<div class="go"></div>
4b9b3361

ОТВЕТЫ

Ответ 1

Это очень возможно с CSS и довольно просто при использовании нескольких фонов и изменении их позиций с помощью анимации.

.border {
  height: 100px;
  width: 200px;
  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;
}
.border:hover{
    background-position: 212px 0px, 0px 116px, 0px 0px, 216px 116px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="border">Some text</div>

Ответ 2

С помощью чистого CSS вы можете использовать repeating-linear-gradient, чтобы нарисовать точки на фоне, установите transition и при наведении перемещают фон.

Пример кода css:

.animationBorder {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 12px;
  width: 200px;
  height: 200px;
  color: black;
  font-size: 20px;
}
.animationBorder:hover .background {
  background-position: 100px 0;
}
.background, .content {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}
.background {
  transition: 1200ms;
  background-color: black;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, #ffffff 10px, #ffffff 20px);
  background-size: 30px;
}
.content {
  transition: 200ms;
  margin: 1px;
  line-height: 200px;
  text-align: center;
  background-color: white;
}

Демо:

.animationBorder {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 12px;
  width: 200px;
  height: 200px;
  color: black;
  font-size: 20px;
}
.animationBorder:hover .background {
  background-position: 100px 0;
}
.background, .content {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}
.background {
  transition: 1200ms;
  background-color: black;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, #ffffff 10px, #ffffff 20px);
  background-size: 30px;
}
.content {
  transition: 200ms;
  margin: 1px;
  line-height: 200px;
  text-align: center;
  background-color: white;
}
<span class="animationBorder">
  <div class="background"></div>
  <div class="content">My post</div>
</span>

Ответ 3

основываясь на ответе Гарри

это может анимировать все формы всех размеров

div{
margin:10px;
}
.size1{
background:black;
width:100px;
height:100px;
}

.size2{
background:black;
width:300px;
height:100px;
}


.active-animatioon {
    background-image: linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
    background-position: left top, right bottom, left bottom, right   top;
    animation: border-dance 1s infinite linear;
  }
  @keyframes border-dance {
    0% {
      background-position: left top, right bottom, left bottom, right   top;
    }
    100% {
      background-position: left 15px top, right 15px bottom , left bottom 15px , right   top 15px;
    }
  }
}
<div class="size1 active-animatioon"></div>
<div class="size2 active-animatioon"></div>

Ответ 4

Этот код адаптирован из ответа, написанного @Harry, измененного в ответ на вопрос, отправленный @dude, который будет работать для div с любой шириной и высотой.

.box
{
  position: absolute;
  left: 20px;
  top: 20px;
  width: 150px;
  height: 150px;
}

.dashed 
{
  background: 
    linear-gradient(90deg, blue 50%, transparent 50%),
    linear-gradient(0deg, blue 50%, transparent 50%),
    linear-gradient(90deg, blue 50%, transparent 50%),
    linear-gradient(0deg, blue 50%, transparent 50%);
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-size: 15px 4px, 4px 15px, 15px 4px, 4px 15px;
  background-position: left top, right top, left bottom, left top;
  padding: 4px;
  animation: border-dance 4s infinite linear;
}
	
@keyframes border-dance 
{
  0%
  {
    background-position: left top, right top, right bottom, left bottom;
  }
  100% 
  {
    background-position: right top, right bottom, left bottom, left top;
  }
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel volutpat ante, eu convallis turpis. Cras sit amet est diam. Suspendisse non lectus faucibus, egestas enim quis, feugiat sapien. Nulla pellentesque, risus sit amet ultrices congue, nisl
ante semper est, in tempor eros augue quis tellus. Morbi venenatis varius eros sit amet dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed lobortis sit amet lacus quis tincidunt. Curabitur nibh ex,
imperdiet sit amet sem a, ornare vehicula ipsum. Quisque vitae dui dignissim, viverra enim et, porta risus. Pellentesque pharetra at neque eu efficitur.
<div class="box dashed"></div>

Ответ 5

Вот способ сделать это без указания размера элемента, на котором вы хотите вращающуюся границу:

.rotating-border {
  width: max-content;
  background: linear-gradient(90deg, purple 50%, transparent 50%), linear-gradient(90deg, purple 50%, transparent 50%), linear-gradient(0deg, purple 50%, transparent 50%), linear-gradient(0deg, purple 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 15px 4px, 15px 4px, 4px 15px, 4px 15px;
  padding: 10px;
  animation: border-dance 4s infinite linear;
}

@keyframes border-dance {
  0% {
    background-position: 0 0, 100% 100%, 0 100%, 100% 0;
  }
  100% {
    background-position: 100% 0, 0 100%, 0 0, 100% 100%;
  }
}
<div class="rotating-border">Hello World</div>

Ответ 6

Это всего лишь быстрый пример, но он использует псевдоэффекты для "перемещения" границы на зависании (обратите внимание, что ключевые кадры будут более полезными, если вы хотите "продолжить" эффект)

.go {
  width: 900px;
  height: 200px;
  position:relative;
  border:8px dashed black;
}

.go:hover:before{
  content:"";
  position:absolute;
  height:100%;
  width:100%;
  top:-8px;
  left:-8px;
  border: 8px solid black;
  }

.go:hover:after{
  content:"";
  position:absolute;
  height:100%;
  width:100%;
  top:-8px;
  left:-8px;
  border: 8px dashed white;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="go">hover then 'unhover' to see effect</div>