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>
/*-- 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;
}
.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
#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.
