04/10/2018, 20:11

Tạo hiệu ứng quảng cáo với CSS3

Việc tạo những mẫu giảm giá hoặc các thông tin khuyến mại nhằm thu hút người dùng ngay từ các nhìn đầu tiên sẽ giúp cho doanh số bán hàng của khách hàng các bạn sẽ tăng lên rõ rệt. Hôm nay mình sẽ chia sẻ cho các bạn hiệu ứng chạy quảng cáo mà chúng ta thường thấy trên các trang web bán hàng. ...

Việc tạo những mẫu giảm giá hoặc các thông tin khuyến mại nhằm thu hút người dùng ngay từ các nhìn đầu tiên sẽ giúp cho doanh số bán hàng của khách hàng các bạn sẽ tăng lên rõ rệt. Hôm nay mình sẽ chia sẻ cho các bạn hiệu ứng chạy quảng cáo mà chúng ta thường thấy trên các trang web bán hàng.

Tạo hiệu ứng quảng cáo với CSS3

Xem Demo | Download

HTML

Cấu trúc html cho hiệu ứng này sẽ như sau :

<a href="#" class="biliboard electronic">Get your free ebook</a>
<a href="#" class="biliboard repeating">30% Off</a>
<a href="#" class="biliboard">Click NOW!</a>
<a href="#" class="biliboard radial">14-days Free trial</a>

Trong bài viết này, sẽ có 4 hiêu ứng khác nhau được phân loại bằng tên class khác nhau,nếu các bạn muốn hiệu ứng nào thì chèn tên class vào hiệu ứng đó.

CSS

Và đây là đoạn css giúp các bạn tạo các hiệu ứng riêng biệt.

a {
  display: block;
  margin: auto;
  margin-top: 50px;
  text-decoration: none;
  color: inherit;
}

@keyframes linear {
  
  from {
    background-position: 0 0;
  }
  to {
    background-position: 200px 0;
  }
  
}

@keyframes radial {
  
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 60px;
  }
  
}

@keyframes repeating {
  
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 85px;
  }
  
}

@keyframes electronic {
  
  0%, 100% {
    background-position: 20px -30px;
  }
  25% {
    background-position: 150px 5px;
  }
  50% {
    background-position: 20px 40px;
  }
  75% {
    background-position: -100px 5px;
  }
  
}

.biliboard {
  awidth: 200px;
  padding: 20px;
  text-align: center;
  position: relative;
  background: #fff;
  color: #333;
  font: 13px open, tahoma;
}
.biliboard:before {
  content: ';
  display: block;
  height: 100%;
  awidth: 100%;
  border-radius: 3px;
  transform: scale( 1.02, 1.08 );
  position: absolute;
  background: #f00;
  background: linear-gradient( 90deg, #fafafa, #fafafa, #1D8EF7, #fafafa, #fafafa );
  background-position: 55px 0;
  top: 0;
  animation: linear 1s infinite linear;
  left: 0;
  z-index: -1;
}

.biliboard.radial:before {
  background: radial-gradient( #fafafa, #fafafa, #F2A61A, #fafafa, #fafafa );
  animation: radial 1s infinite linear;
}

.biliboard.repeating:before {
  background: repeating-linear-gradient( -45deg, #fafafa, #fafafa 30px, #5FC914 30px, #5FC914 60px ) fixed;
  animation: repeating 1s infinite linear;
}

.biliboard.electronic:before {
  background: radial-gradient( #EA238D, #EA238D, #EA238D, #EA238D, #fafafa, #fafafa ) no-repeat;
  background-size: 150px 50px;
  animation: electronic 2s infinite linear;
}

Vậy là qua bài viết này, các bạn cũng có thể học thêm được cách tạo hiệu ứng động bằng các thuộc tính CSS3, mong là bài viết này thực sự hữu ích cho các bạn.

Nguồn tham khảo : CSSDECK

Tags: css3 CSS3 Animation

Chuyên Mục: Css

Bài viết được đăng bởi webmaster

Bài liên quan

Tạo hiệu ứng quảng cáo với CSS3

Việc tạo những mẫu giảm giá hoặc các thông tin khuyến mại nhằm thu hút người dùng ngay từ các nhìn đầu tiên sẽ giúp cho doanh số bán hàng của khách hàng các bạn sẽ tăng lên rõ rệt. Hôm nay mình sẽ chia sẻ cho các bạn hiệu ứng chạy quảng cáo mà chúng ta thường thấy trên các trang web bán hàng. ...

Vũ Văn Thanh viết 20:11 ngày 04/10/2018

Click Effect : Tạo hiệu ứng click chuột với CSS3

Có đôi lúc chúng ta cũng cần phải tạo một vài hiệu ứng click chuột để tạo cảm giác “Pro” cho người dùng. Nếu các bạn không thích sử dụng flash hoặc các đoạn script tạo hiệu ứng, thì thử dùng hiệu ứng click mà mình chia sẻ cho các bạn trong bài viết này. Với hiệu ứng này, các bạn chỉ ...

Tạ Quốc Bảo viết 20:11 ngày 04/10/2018

Tổng hợp hiệu ứng vòng tròn với CSS3 Transitions

Ngày hôm nay mình sẽ chia sẻ cho các bạn những hiệu ứng vòng tròn (Circle Hover Effects) với CSS transitions và 3D rotations. Bảo đảm là với những hiệu ứng này, các bạn có thể áp dụng vào chính trang web hay blog của mình, và nếu các bạn muốn nâng cao hơn về khả năng sử dụng CSS3 thì bài viết này ...

Trần Trung Dũng viết 20:03 ngày 04/10/2018

Tạo hiệu ứng Flip 3D với CSS3

Để có thể hiểu và sử dụng thành thạo CSS3 không phải là có thể trong ngày một ngày hai, ngoài việc chịu khó tìm hiểu những thuộc tính mà nó mang lại, chúng ta cần phải làm đi làm lại thật nhiều các ví dụ về các hiệu ứng mà CSS3 hỗ trợ cho chúng ta. Nhằm mang lại cho các bạn có thêm nhiều ví dụ để ...

Trịnh Tiến Mạnh viết 19:59 ngày 04/10/2018

Từng bước tạo Hiệu Ứng Bóng Nẩy Với CSS3

Chào các bạn, hôm nay chúng ta sẽ cùng nhau tìm hiểu thêm về CSS3 Gradient và Animation nhé. Trong bài viết này, mình sẽ chia sẻ cho các bạn từng bước tạo hiệu ứng bóng nẩy , đây chỉ là hiệu ứng đơn giản, tuy nhiên nó sẽ giúp các bạn có thêm kinh nghiệm sử dụng cũng như khả năng nắm vững CSS3. ...

Bùi Văn Nam viết 19:59 ngày 04/10/2018
0