Liên hệ nhanh

Vui lòng điền thông tin form bên dưới để chúng tôi liên hệ nhanh với quý khách!



    Website

    Hiệu ứng dùng CSS

    Nội dung

      Tạo hiệu ứng chuyển động trong CSS3 cho phép chúng ta tạo ra các hiệu ứng mà không cần phải sử dụng Javascript hay Flash. Animation giúp Website chúng ta trở nên chuyên nghiệp mà bắt mắt với người dùng hơn. Trong bài viết này sẽ góp nhặt đến các bạn những hiệu ứng nhỏ gọn cho một thẻ div nhờ sử dụng HTML5 và CSS3.
      Gắn css trong bài viết

       

       

       

      Tạo hiệu ứng ánh sáng khi hover vào hình ảnh trong Flatsome

      Đoạn CSS sau theo đường dẫn: Giao diện > Tuỳ biến > Add custom CSS
      .product-small .box-image:hover::before{
      -webkit-animation:shine .75s;animation:shine .75s
      }
      @-webkit-keyframes shine{
      100%{left:125%}
      }
      @keyframes shine{
      100%{left:125%}
      }
      .product-small .box-image::before{
      position:absolute;
      top:0;
      left:-75%;
      z-index:2;
      display:block;
      content:'';
      width:50%;
      height:100%;
      background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
      background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
      -webkit-transform:skewX(-25deg);transform:skewX(-25deg)
      }

      Thu gọn tiêu đề sản phẩm thành 2 dòng

      p.name.product-title a {
      padding-top: 5px;
      text-align: center;
      color: #000;
      font-weight: 900;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;

      Lưu ý: Sửa các thông tin sau theo ý của bạn

      • -webkit-line-clamp: 2; là số dòng các bạn muốn cắt, nếu chỉ muốn cắt thành 1 dòng thì thay bằng số 1,..
      • font-weight: là độ dày của chữ, các bạn muốn nó thanh mảnh hơn thì giảm còn 600

      Chia Form thành 2 cột & Chèn icon vào Contact Form 7

      Đoạn HTML chèn vào tab “Nội dung Form”

      <div class="form-contact-twocol">
   <div id="info-left">
   <p>
[text]

      <i id=”icon-form” class=”icon-user”></i></p>
      </div>
      <div id=”info-right”>
      <p>[tel* your-number placeholder “Di động *”]<i id=”icon-form” class=”icon-phone”></i></p>
      </div>
      </div>
      <p>[email your-email placeholder “Email”]<i id=”icon-form” class=”icon-envelop”></i></p>
      <p>

      
[text]

      <i id=”icon-form” class=”icon-pen-alt-fill”></i></p>
      <p>[textarea your-message placeholder “Nội dung email…”]<i id=”icon-form” class=”icon-chat”></i></p>
      <center>[submit class:button primary “Gửi Đi”]</center>

       Đoạn CSS chia cột và chèn icon vào Form, các bạn dán vào mục “CSS tùy chỉnh” trong “Tùy biến” hoặc mục “Custom CSS” trong “Advance” của theme Flatsome.
      /*-- chia cột Form --*/#info-left {
    width: 49%;
    float: left;
    margin-right:2%;
}
#info-right {
    width: 49%;
    float: right;
}
.form-contact-twocol:after {
    content:"020";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    overflow:hidden;
    margin-bottom:10px;
}
.form-contact-twocol {
    display:block;
}
/*-- Chèn icons lên Form --*/.wpcf7 p{ position: relative; }
#icon-form{
  position: absolute;
  color: #666666;
  z-index: 100;
  font-size: 18px;
  top: 8px;
  right: 10px;
}

      Hiệu ứng dùng CSS


      .btn-11 {
      border: none;
      background: rgb(4 34 145);
      background: linear-gradient(0deg,rgb(7 35 124)0%,rgb(0 100 251)100%);
      color: #fff;
      overflow: hidden;
      }
      .btn-11:hover {
      text-decoration: none;
      color: #fff;
      }
      .btn-11:before {
      position: absolute;
      content: '';
      display: inline-block;
      top: -180px;
      left: 0;
      width: 30px;
      height: 100%;
      background-color: #fff;
      animation: shiny-btn1 3s ease-in-out infinite;
      }
      .btn-11:hover{
      opacity: .7;
      }
      .btn-11:active{
      box-shadow: 4px 4px 6px 0 rgba(255,255,255,.3),
      -4px -4px 6px 0 rgba(116, 125, 136, .2),
      inset -4px -4px 6px 0 rgba(255,255,255,.2),
      inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
      }

      @-webkit-keyframes shiny-btn1 {
      0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
      80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
      81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
      100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
      }
      https://codepen.io/yuhomyan/pen/OJMejWJ
      https://codepen.io/derekmorash/pen/XddZJY

      https://www.laixe.xyz/2020/07/tao-hieu-ung-rung-lac-khi-re-chuot-vao-anh.html

      img.shake-image:hover {
      /* Start the shake animation and make the animation last for 0.5 seconds */
      animation: shake 0.5s;
      /* When the animation is finished, start again */
      animation-iteration-count: infinite;
      }

      @keyframes shake {
      0% { transform: translate(1px, 1px) rotate(0deg); }
      10% { transform: translate(-1px, -2px) rotate(-1deg); }
      20% { transform: translate(-3px, 0px) rotate(1deg); }
      30% { transform: translate(3px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); }
      50% { transform: translate(-1px, 2px) rotate(-1deg); }
      60% { transform: translate(-3px, 1px) rotate(0deg); }
      70% { transform: translate(3px, 1px) rotate(-1deg); }
      80% { transform: translate(-1px, -1px) rotate(1deg); }
      90% { transform: translate(1px, 2px) rotate(0deg); }
      100% { transform: translate(1px, -2px) rotate(-1deg); }
      }

      https://www.niemvuilaptrinh.com/article/Cach-Tao-Hieu-Ung-Zoom-Effect-Cho-Trang-Web2020
      https://codepen.io/haycuoilennao19/pen/NWNbdQJ
      https://dev.to/vaishali1192/create-zoom-in-zoom-out-animation-effect-in-css-5hmg


      .zoom-in-out {
      margin: 24px;
      width: 40%;
      animation: zoom-in-zoom-out 4s ease-out infinite;
      }
      .zoom-in-zoom-out {
      margin: 24px;
      width: 50px;
      height: 50px;
      background: green;
      animation: zoom-in-zoom-out 2s ease-out infinite;
      }
      @keyframes zoom-in-zoom-out {
      0% {
      transform: scale(1, 1);
      }
      50% {
      transform: scale(1.5, 1.5);
      }
      100% {
      transform: scale(1, 1);
      }
      }

      https://blog.hubspot.com/website/css-animation-examples https://blog.hubspot.com/website/css-animation

      Hiệu ứng 3 box xoay vòng

      https://dev.to/pixmy/create-waves-with-pure-css-5gp

      https://codepen.io/Pixmy/pen/qaYQoV

       


      .boxwave {
      position: fixed;
      top: 0;
      transform: rotate(80deg);
      left: 0;
      }

      .wave {
      position: fixed;
      top: 0;
      left: 0;
      opacity: .4;
      position: absolute;
      top: 3%;
      left: 10%;
      background: #0af;
      width: 354px;
      height: 495px;
      margin-left: -150px;
      margin-top: -250px;
      transform-origin: 50% 48%;
      border-radius: 43%;
      animation: drift 7000ms infinite linear;
      }

      .wave.-three {
      animation: drift 7500ms infinite linear;
      position: fixed;
      background-color: #77daff;
      }

      .wave.-two {
      animation: drift 3000ms infinite linear;
      opacity: .1;
      background: black;
      position: fixed;
      }

      .boxwave:after {
      content: ”;
      display: block;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 11;
      transform: translate3d(0, 0, 0);
      }
      @keyframes drift {
      from { transform: rotate(0deg); }
      from { transform: rotate(360deg); }
      }

      Hiệu ứng chuyển màu

       

      code-boxx.com/css-animation-background-color

       


      #animation-background-color {
      width: 100%;
      height: 100px;
      animation: morph 3s infinite alternate;
      }
      @keyframes morph {
      0% { background-color: rgba(0, 0, 0, 0); }
      50% { background-color: rgba(255, 0, 0, 0.5); }
      100% { background-color: rgba(0, 255, 0, 1); }
      }

       

      Scrolling Text Animation

      https://codepen.io/yoannhel/pen/sJpDj

      Hello

      • world !
      • bob !
      • users !
      • everybody !

      .animation {
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 160px;
      overflow:hidden;
      }
      .animation__container {
      font-weight: 600;
      overflow: hidden;
      height: 40px;
      padding: 0 40px;
      }
      .animation__container:before {
      content: "[";
      left: 0;
      }

      .animation__container:after {
      content: “]”;
      position: absolute;
      right: 0;
      }

      .animation__container:after, .animation__container:before {
      position: absolute;
      top: 0;

      color: #16a085;
      font-size: 42px;
      line-height: 40px;

      -webkit-animation-name: opacity;
      -webkit-animation-duration: 2s;
      -webkit-animation-iteration-count: infinite;
      animation-name: opacity;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      }
      .animation__container__text {
      display: inline;
      float: left;
      margin: 0;
      }

      .animation__container__list {
      margin-top: 0;
      padding-left: 110px;
      text-align: left;
      list-style: none;

      -webkit-animation-name: change;
      -webkit-animation-duration: 10s;
      -webkit-animation-iteration-count: infinite;
      animation-name: change;
      animation-duration: 10s;
      animation-iteration-count: infinite;
      }
      .animation__container__list__item {
      line-height:40px;
      margin:0;
      }

      @-webkit-keyframes opacity {
      0%, 100% {opacity:0;}
      50% {opacity:1;}
      }

      @-webkit-keyframes change {
      0%, 12.66%, 100% {transform:translate3d(0,0,0);}
      16.66%, 29.32% {transform:translate3d(0,-25%,0);}
      33.32%,45.98% {transform:translate3d(0,-50%,0);}
      49.98%,62.64% {transform:translate3d(0,-75%,0);}
      66.64%,79.3% {transform:translate3d(0,-50%,0);}
      83.3%,95.96% {transform:translate3d(0,-25%,0);}
      }

      @-o-keyframes opacity {
      0%, 100% {opacity:0;}
      50% {opacity:1;}
      }

      @-o-keyframes change {
      0%, 12.66%, 100% {transform:translate3d(0,0,0);}
      16.66%, 29.32% {transform:translate3d(0,-25%,0);}
      33.32%,45.98% {transform:translate3d(0,-50%,0);}
      49.98%,62.64% {transform:translate3d(0,-75%,0);}
      66.64%,79.3% {transform:translate3d(0,-50%,0);}
      83.3%,95.96% {transform:translate3d(0,-25%,0);}
      }

      @-moz-keyframes opacity {
      0%, 100% {opacity:0;}
      50% {opacity:1;}
      }

      @-moz-keyframes change {
      0%, 12.66%, 100% {transform:translate3d(0,0,0);}
      16.66%, 29.32% {transform:translate3d(0,-25%,0);}
      33.32%,45.98% {transform:translate3d(0,-50%,0);}
      49.98%,62.64% {transform:translate3d(0,-75%,0);}
      66.64%,79.3% {transform:translate3d(0,-50%,0);}
      83.3%,95.96% {transform:translate3d(0,-25%,0);}
      }

      @keyframes opacity {
      0%, 100% {opacity:0;}
      50% {opacity:1;}
      }

      @keyframes change {
      0%, 12.66%, 100% {transform:translate3d(0,0,0);}
      16.66%, 29.32% {transform:translate3d(0,-25%,0);}
      33.32%,45.98% {transform:translate3d(0,-50%,0);}
      49.98%,62.64% {transform:translate3d(0,-75%,0);}
      66.64%,79.3% {transform:translate3d(0,-50%,0);}
      83.3%,95.96% {transform:translate3d(0,-25%,0);}
      }

       

      https://thichchiase.com/programing/css/30-hieu-ung-pure-css-animation-snippets/

      https://viblo.asia/p/14-css-tao-hieu-ung-cho-background-tuyet-dep-LzD5djaeZjY

      Gradient Background Animation


      .h100 {
      background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
      background-size: 400% 400%;
      animation: gradient 15s ease infinite;
      width: 200px;
      height: 200px;
      }

      @keyframes gradient {
      0% {
      background-position: 0% 50%;
      }
      50% {
      background-position: 100% 50%;
      }
      100% {
      background-position: 0% 50%;
      }
      }

      Chống SPAM cho Contact Form 7

      Theo https://levantoan.com/chia-se-cach-chong-spam-cho-contact-form-7-hieu-qua-nhat/ có 4 cách

      1: Chống spam bằng field ẩn

      2: Format số điện thoại theo định dạng Việt Nam

      3: Thêm dạng câu hỏi – trả lời vào form

      4: Chống spam bằng cách kiểm tra người dùng đã cuộn chuột (scroll) hay chưa

      Mà bạn đã cài akismet, recaptcha, wordfence, format sđt theo Việt Nam mà vẫn bị spam.

      Bài viết liên quan:
      Tối ưu wordpress bằng classicpress
      Điều cần biết khi mua Backlinks
      Tuy chỉnh menu trong flatsome
      Lỗi không load được nội dung trong wordpress phiên bản 6.0
      Chỉnh sửa bên dưới wordpress
      Xóa link short chứa mã bài viết khỏi head trong WordPress

      Để lại một bình luận

      Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *