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%;
    }
    }

     

    Để 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 *