Website

Hiệu ứng dùng CSS

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

 

Bài viết liên quan:
Đ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
Vô hiệu hóa các phân đoạn giỏ hàng WooCommerce Ajax

Trả lời

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 *