Tất cả bài viết | CSS3
Tạo hiệu ứng cầu vòng tuyệt đẹp cho văn bản bằng CSS3
Trong bài học thiết kế web này các Bạn sẽ được hướng dẫn cách Tạo hiệu ứng cầu vòng tuyệt đẹp cho văn bản bằng CSS3
Phần định nghĩa CSS
.rainbow {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
border: none;
font: normal normal bold 76px/normal "Yeseva One", Helvetica, sans-serif;
color: rgba(0, 0, 0, 0);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
text-shadow: 3px 0 0 rgb(217,31,38) , 6px 0 0 rgb(226,91,14) , 9px 0 0 rgb(245,221,8) , 12px 0 0 rgb(5,148,68) , 15px 0 0 rgb(2,135,206) , 18px 0 0 rgb(4,77,145) , 21px 0 0 rgb(42,21,113) ;
-webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.rainbow:hover {
text-shadow: -3px 0 0 rgb(217,31,38) , -6px 0 0 rgb(226,91,14) , -9px 0 0 rgb(245,221,8) , -12px 0 0 rgb(5,148,68) , -15px 0 0 rgb(2,135,206) , -18px 0 0 rgb(4,77,145) , -21px 0 0 rgb(42,21,113) ;
-webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
body {
background-color:#00FD15
}
Phần định nghĩa HTML
Welcome
To
My
Website
Thay đổi font chữ Google tại đây
CSS3 Xem (3222) Học thiết kế web giá rẻ
