Variable, Function, Animation - Serie CSS Phần 12

Variable, Function, Animation - Serie CSS Phần 12

Giới thiệu

CSS (Cascading Style Sheets) là một ngôn ngữ mô tả cấu trúc và giao diện của một trang web. Trong bài viết này, chúng tôi sẽ tìm hiểu về biến CSS, hàm CSS, và cách sử dụng chúng để tạo ra các hiệu ứng chuyển động trong CSS.

Biến trong CSS

Biến CSS, còn được biết đến như các thuộc tính tùy chỉnh, cho phép bạn định nghĩa các giá trị có thể tái sử dụng trong tệp CSS của mình. Điều này giúp giảm bớt việc lặp lại mã và giúp bạn dễ dàng cập nhật mã.

Ví dụ về biến CSS

:root {
  --main-color: #06f;
}

body {
  background-color: var(--main-color);
}

Trong ví dụ trên, chúng tôi đã định nghĩa một biến CSS --main-color và sử dụng nó như màu nền của thẻ body.

Ngoài ra bạn có thể thêm các hành động phức tạp tùy nhu cầu khi đính kèm javascript:

Hàm CSS

Hàm CSS là một công cụ mạnh mẽ, cho phép bạn thực hiện các tác vụ phức tạp hơn trong thiết kế web. Với hàm CSS, bạn có thể thực hiện các tác vụ như tính toán giá trị, thay đổi màu sắc, hoặc thậm chí tạo các hiệu ứng chuyển động phức tạp. Điều này mở ra một loạt các khả năng mới cho việc tạo ra trang web đẹp mắt và chuyên nghiệp.

Ví dụ về hàm CSS cho responsive

@media (max-width: 600px) {
  body {
    font-size: calc(16px + 6 * ((100vw - 600px) / 400));
  }
}

Trong ví dụ trên, chúng tôi đã sử dụng hàm calc() để tính toán kích thước font chữ cho thẻ body dựa trên chiều rộng của viewport.

Ví dụ về hàm CSS để tạo Box-shadow:

.box {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

Trong ví dụ trên, chúng tôi đã sử dụng hàm rgba() để tạo độ bóng cho một hộp.

Ví dụ về hàm CSS để tạo gradient màu:

body {
  background: linear-gradient(to right, red , blue);
}

Trong ví dụ trên, chúng tôi đã sử dụng hàm linear-gradient() để tạo một gradient màu từ đỏ sang xanh dương cho thẻ body.

 

Hiệu ứng chuyển động trong CSS

CSS cung cấp nhiều cách để tạo ra các hiệu ứng chuyển động, từ các hiệu ứng đơn giản như thay đổi màu sắc đến các hiệu ứng phức tạp hơn như quay hoặc thu phóng.

Ví dụ về việc sử dụng biến CSS trong hiệu ứng chuyển động

 @keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.my-element {
  animation: spin 2s infinite;
}

 

trong ví dụ trên, chúng tôi đã sử dụng @keyframes để tạo ra một hiệu ứng quay cho một phần tử.

Tạo hiệu ứng chuyển động với Animation:

@keyframes example {
  0%   {background-color: red; left:0px; top:0px;}
  25%  {background-color: yellow; left:200px; top:0px;}
  50%  {background-color: blue; left:200px; top:200px;}
  75%  {background-color: green; left:0px; top:200px;}
  100% {background-color: red; left:0px; top:0px;}
}

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

Trong ví dụ trên, chúng tôi đã tạo một hiệu ứng chuyển động cho một phần tử div sử dụng @keyframes. Phần tử sẽ thay đổi màu sắc và vị trí theo thời gian, tạo ra một hiệu ứng chuyển động phức tạp.

Hy vọng rằng thông qua bài viết này, bạn đã hiểu rõ hơn về CSS và cách sử dụng nó để tạo ra các trang web đẹp mắt và chuyên nghiệp. Hãy tiếp tục thực hành và khám phá thêm các khả năng của CSS!