Hướng dẫn tạo border xoay bằng css cực hay

Hahaha, vừa tìm được một đoạn css rất hay có thể làm đẹp cho blog của mình hoặc cho bạn nào muốn làm một trang landing page cực độc nhé.

Demo “sống”

Các bạn tự làm rồi tự trải nghiệm nhé 😀

Design

Ngay khi các bạn view source lên các bạn cũng có thể học được ngay cách này, vì mình đã áp dụng nó cho blog của mình, nhìn cũng bắt mắt, làm nổi bật bài viết của mình hơn đúng không ^^
Đầu tiên các bạn cần khung HTML nhé

<div class="rotating-dashed">
  <span class="dashing"><i></i></span>
  <span class="dashing"><i></i></span>
  <span class="dashing"><i></i></span>
  <span class="dashing"><i></i></span>
  <strong>Nội dung muốn thể hiện</strong>
</div>

</div>

Rất đơn giản, tiếp theo là đoạn css trang trí

.rotating-dashed {
  position: relative;
  margin: 40px auto;
  width: 90px;
  height: 90px;
  overflow: hidden;
  color: #3498db;
}

.rotating-dashed .dashing {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
}

.rotating-dashed .dashing:nth-of-type(1) { -webkit-transform: rotate(   0deg ); }
.rotating-dashed .dashing:nth-of-type(2) { -webkit-transform: rotate(  90deg ); }
.rotating-dashed .dashing:nth-of-type(3) { -webkit-transform: rotate( 180deg ); }
.rotating-dashed .dashing:nth-of-type(4) { -webkit-transform: rotate( 270deg ); }

.rotating-dashed .dashing i {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  border-bottom: 5px dashed;
}

.rotating-dashed strong {
  display: block;
  width: 105%;
  line-height: 90px;
  text-align: center;
  position: absolute;
  font-size: 50px;
}

.rotating-dashed:hover {
  color: white;
  cursor: pointer; 
}

.rotating-dashed .dashing i {
  -webkit-animation: slideDash 2.5s infinite linear;
}

@-webkit-keyframes slideDash {
  from { -webkit-transform: translateX( -50% ); }
  to   { -webkit-transform: translateX(   0% ); }
}

.rotating-dashed {

position: relative;

margin: 40px auto;

width: 90px;

height: 90px;

overflow: hidden;

color: #3498db;

}

.rotating-dashed .dashing {

display: block;

width: 100%;

height: 100%;

position: absolute;

}

.rotating-dashed .dashing:nth-of-type(1) { -webkit-transform: rotate( 0deg ); }

.rotating-dashed .dashing:nth-of-type(2) { -webkit-transform: rotate( 90deg ); }

.rotating-dashed .dashing:nth-of-type(3) { -webkit-transform: rotate( 180deg ); }

.rotating-dashed .dashing:nth-of-type(4) { -webkit-transform: rotate( 270deg ); }

.rotating-dashed .dashing i {

display: block;

position: absolute;

left: 0;

top: 0;

width: 200%;

border-bottom: 5px dashed;

}

.rotating-dashed strong {

display: block;

width: 105%;

line-height: 90px;

text-align: center;

position: absolute;

font-size: 50px;

}

.rotating-dashed:hover {

color: white;

cursor: pointer;

}

.rotating-dashed .dashing i {

-webkit-animation: slideDash 2.5s infinite linear;

}

@-webkit-keyframes slideDash {

from { -webkit-transform: translateX( -50% ); }

to { -webkit-transform: translateX( 0% ); }

}

Done! tất cả chỉ có vậy thôi, rất đơn giản mà, phải không?. Nếu bạn nào không làm được, thì có thể xem đầy đủ nội dung đoạn code bên dưới nhé. Chú ý, bài này chỉ chạy được trên chrome thôi nhé. Lý do vì sao thì chắc các bạn đã biết rồi 😀

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="vi">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.rotating-dashed {
  position: relative;
  margin: 40px auto;
  width: 90px;
  height: 90px;
  overflow: hidden;
  color: #3498db;
}
 
.rotating-dashed .dashing {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
}
 
.rotating-dashed .dashing:nth-of-type(1) { -webkit-transform: rotate(   0deg ); }
.rotating-dashed .dashing:nth-of-type(2) { -webkit-transform: rotate(  90deg ); }
.rotating-dashed .dashing:nth-of-type(3) { -webkit-transform: rotate( 180deg ); }
.rotating-dashed .dashing:nth-of-type(4) { -webkit-transform: rotate( 270deg ); }
 
.rotating-dashed .dashing i {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  border-bottom: 5px dashed;
}
 
.rotating-dashed strong {
  display: block;
  width: 105%;
  line-height: 90px;
  text-align: center;
  position: absolute;
  font-size: 50px;
}
 
.rotating-dashed:hover {
  color: white;
  cursor: pointer;
}
 
.rotating-dashed .dashing i {
  -webkit-animation: slideDash 2.5s infinite linear;
}
 
@-webkit-keyframes slideDash {
  from { -webkit-transform: translateX( -50% ); }
  to   { -webkit-transform: translateX(   0% ); }
}
</style>
</head>
<body>
<div class="rotating-dashed">
  <span class="dashing"><i></i></span>
  <span class="dashing"><i></i></span>
  <span class="dashing"><i></i></span>
  <span class="dashing"><i></i></span>
  <strong>Nội dung muốn thể hiện</strong>
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<style>

.rotating-dashed {

position: relative;

margin: 40px auto;

width: 90px;

height: 90px;

overflow: hidden;

color: #3498db;

}

.rotating-dashed .dashing {

display: block;

width: 100%;

height: 100%;

position: absolute;

}

.rotating-dashed .dashing:nth-of-type(1) { -webkit-transform: rotate( 0deg ); }

.rotating-dashed .dashing:nth-of-type(2) { -webkit-transform: rotate( 90deg ); }

.rotating-dashed .dashing:nth-of-type(3) { -webkit-transform: rotate( 180deg ); }

.rotating-dashed .dashing:nth-of-type(4) { -webkit-transform: rotate( 270deg ); }

.rotating-dashed .dashing i {

display: block;

position: absolute;

left: 0;

top: 0;

width: 200%;

border-bottom: 5px dashed;

}

.rotating-dashed strong {

display: block;

width: 105%;

line-height: 90px;

text-align: center;

position: absolute;

font-size: 50px;

}

.rotating-dashed:hover {

color: white;

cursor: pointer;

}

.rotating-dashed .dashing i {

-webkit-animation: slideDash 2.5s infinite linear;

}

@-webkit-keyframes slideDash {

from { -webkit-transform: translateX( -50% ); }

to { -webkit-transform: translateX( 0% ); }

}

</style>

</head>

<body>

</div>

</body>

</html>

Hướng dẫn tạo border xoay bằng css cực hay

Demo “sống”

Design

Like this:

Có liên quan

Nguyễn Trung Hiếu

Demo “sống”

Design

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu