Làm cách nào để sử dụng dấu chấm trong CSS?
Chúng tôi đang xem xét các bộ tải trong loạt bài này. Hơn thế nữa, chúng tôi đang chia nhỏ một số mẫu trình tải phổ biến và cách tạo lại chúng chỉ với một div duy nhất. Cho đến nay, chúng tôi đã chọn bộ nạp quay cổ điển. Bây giờ, hãy xem một cái khác mà bạn có thể biết rõ. dấu chấm Show Trình tải dấu chấm ở khắp mọi nơi. Chúng gọn gàng vì chúng thường bao gồm ba dấu chấm trông giống như dấu chấm lửng văn bản (…) nhảy múa xung quanh Loạt bài viết
Mục tiêu của chúng tôi ở đây là tạo ra điều tương tự từ một phần tử div duy nhất. Nói cách khác, không có một div cho mỗi dấu chấm hoặc hoạt ảnh riêng lẻ cho mỗi dấu chấm Dự phòng nhúng CodePen Ví dụ về trình tải ở trên được tạo với một phần tử div duy nhất, một vài khai báo CSS và không có phần tử giả. Tôi đang kết hợp hai kỹ thuật sử dụng CSS 4 và 5. Và khi hoàn tất, chúng ta sẽ thấy hiệu ứng chuyển màu nền giúp tạo ra ảo ảnh về từng chấm thay đổi màu sắc như thế nào khi chúng di chuyển lên xuống liên tiếpHoạt hình nềnHãy bắt đầu với hoạt hình nền
Tôi hy vọng điều này có vẻ khá đơn giản. Những gì chúng tôi có là một phần tử 7 rộng 6 hiển thị hai dải màu hình nón thể hiện các điểm dừng màu cứng giữa hai màu mỗi màu — dải màu đầu tiên có màu đỏ và xanh lam dọc theo nửa trên của 7 và dải màu thứ hai có màu xanh lục và tím dọc theo Cách nền của trình tải có kích thước (rộng ___10), chúng tôi chỉ nhìn thấy một trong những màu đó ở mỗi nửa tại một thời điểm. Sau đó, chúng tôi có hoạt hình nhỏ này đẩy vị trí của các chuyển màu nền đó sang trái, phải và ngược lại mãi mãi Khi xử lý các thuộc tính nền - đặc biệt là 1 - tôi luôn tham khảo câu trả lời Stack Overflow của mình, nơi tôi đưa ra lời giải thích chi tiết về cách thức hoạt động của tất cả những thứ này. Nếu bạn không thoải mái với thủ thuật nền CSS, tôi thực sự khuyên bạn nên đọc câu trả lời đó để trợ giúp cho những gì tiếp theoTrong hình ảnh động, lưu ý rằng lớp đầu tiên là 2 (được đặt ở trên cùng) trong khi lớp 3 được thay đổi từ 4 thành 5 Đối với lớp thứ hai, chúng ta có tương tự cho 3 nhưng 7 (được đặt ở dưới cùng)Dự phòng nhúng CodePen
Câu hỏi hay. Theo trực giác, chúng ta nên sử dụng một gradient tuyến tính để tạo ra một gradient hai màu như thế này
Nhưng chúng ta cũng có thể đạt được điều tương tự bằng cách sử dụng 8 — và với ít mã hơn. Chúng tôi giảm mã và cũng học một thủ thuật mới trong quá trình nàyTrượt các màu sang trái và phải là một cách hay để làm cho nó trông giống như chúng ta đang thay đổi màu sắc, nhưng sẽ tốt hơn nếu chúng ta thay đổi màu ngay lập tức — theo cách đó, sẽ không có khả năng chấm tải nhấp nháy hai màu cùng lúc. Để làm điều này, hãy thay đổi chức năng thời gian của 31 từ 32 thành 33Dự phòng nhúng CodePen Các dấu chấm tảiNếu bạn đã theo dõi bài viết đầu tiên trong loạt bài này, tôi cá là bạn biết điều gì sẽ xảy ra tiếp theo. mặt nạ CSS. Điều làm cho mặt nạ trở nên tuyệt vời là chúng cho phép chúng ta “cắt bỏ” các phần của nền theo hình dạng của một yếu tố khác. Vì vậy, trong trường hợp này, chúng tôi muốn tạo một vài dấu chấm, hiển thị độ dốc của nền qua các dấu chấm và cắt bỏ bất kỳ phần nào của nền không phải là một phần của dấu chấm Chúng tôi sẽ sử dụng 34 cho việc này 3Có một số mã trùng lặp trong đó, vì vậy hãy tạo một biến CSS để thu gọn mọi thứ 8mát mẻ. Nhưng bây giờ chúng ta cần một hoạt ảnh mới giúp di chuyển các dấu chấm lên và xuống giữa các chuyển sắc hoạt hình 9Vâng, đó là tổng cộng ba gradient xuyên tâm trong đó, tất cả đều có cùng cấu hình và cùng kích thước — hoạt ảnh sẽ cập nhật vị trí của từng cái. Lưu ý rằng tọa độ 3 của mỗi dấu chấm là cố định. 36 được xác định sao cho dấu chấm đầu tiên ở bên trái ( 4), dấu chấm thứ hai ở giữa ( 38) và dấu chấm thứ ba ở bên phải ( 39). Chúng tôi chỉ cập nhật tọa độ 80 từ 4 đến 39 để làm cho các dấu chấm nhảy múaĐây là những gì chúng tôi nhận được Dự phòng nhúng CodePen Bây giờ, hãy kết hợp điều này với hoạt ảnh chuyển màu của chúng tôi và điều kỳ diệu bắt đầu xảy ra Dự phòng nhúng CodePen Các biến thể của trình tải dấu chấmBiến CSS mà chúng tôi đã tạo trong ví dụ trước giúp việc hoán đổi màu mới dễ dàng hơn nhiều và tạo nhiều biến thể hơn của cùng một trình tải. Ví dụ, màu sắc và kích cỡ khác nhau Dự phòng nhúng CodePen Còn một phong trào khác cho các dấu chấm của chúng ta thì sao? Dự phòng nhúng CodePen Ở đây, tất cả những gì tôi đã làm là cập nhật hoạt ảnh để xem xét các vị trí khác nhau và chúng tôi nhận được một trình tải khác có cùng cấu trúc mã Kỹ thuật hoạt hình tôi đã sử dụng cho các lớp mặt nạ cũng có thể được sử dụng với các lớp nền để tạo ra nhiều bộ tải khác nhau với một màu duy nhất. Tôi đã viết một bài viết chi tiết về điều này. Bạn sẽ thấy rằng từ cùng một cấu trúc mã, chúng ta có thể tạo ra các biến thể khác nhau chỉ bằng cách thay đổi một vài giá trị. Tôi đang chia sẻ một vài ví dụ ở cuối bài viết Tại sao không phải là trình tải có một dấu chấm? Dự phòng nhúng CodePen Cái này khá dễ mò mẫm vì tôi đang sử dụng kỹ thuật tương tự nhưng với logic đơn giản hơn Dự phòng nhúng CodePen Đây là một ví dụ khác về trình tải mà tôi cũng đang tạo hiệu ứng động 83 kết hợp với bộ lọc CSS và 84 để tạo hiệu ứng blobbyDự phòng nhúng CodePen Nếu bạn kiểm tra mã, bạn sẽ thấy rằng tất cả những gì tôi thực sự đang làm ở đó là tạo hoạt ảnh cho 1, chính xác như chúng ta đã làm với trình tải trước đó, nhưng thêm một dấu gạch ngang của 86 để làm cho đốm màu trông có vẻ lớn hơn khi nó hấp thụ các dấu chấmNếu bạn muốn hiểu điều kỳ diệu đằng sau hiệu ứng đốm màu đó, bạn có thể tham khảo các slide tương tác này (chỉ dành cho Chrome) của Ana Tudor vì cô ấy bao quát chủ đề rất tốt Đây là một ý tưởng trình tải dấu chấm khác, lần này sử dụng một kỹ thuật khác Dự phòng nhúng CodePen Cái này chỉ có 10 khai báo CSS và một khung hình chính. Phần tử chính và hai phần tử giả của nó có cùng cấu hình nền với một gradient xuyên tâm. Mỗi người tạo ra một dấu chấm, tổng cộng là ba. Hoạt hình di chuyển dải màu từ trên xuống dưới bằng cách sử dụng các độ trễ khác nhau cho mỗi dấu chấm Ồ, và lưu ý cách bản trình diễn này sử dụng CSS Grid. Điều này cho phép chúng tôi tận dụng căn chỉnh 87 mặc định của lưới để cả hai phần tử giả bao phủ toàn bộ khu vực của phần tử gốc của chúng. Không cần định cỡ. Đẩy mạnh xung quanh một chút với 88 và chúng ta đã sẵn sàngThêm ví dụChỉ để đưa vấn đề về nhà, tôi muốn để lại cho bạn một loạt các ví dụ bổ sung thực sự là các biến thể của những gì chúng ta đã xem xét. Khi bạn xem các bản trình diễn, bạn sẽ thấy rằng các phương pháp mà chúng tôi đề cập ở đây cực kỳ linh hoạt và mở ra vô số khả năng thiết kế Dự phòng nhúng CodePen Dự phòng nhúng CodePen Dự phòng nhúng CodePen Dự phòng nhúng CodePen Dự phòng nhúng CodePen Tiếp theo…OK, vì vậy chúng tôi đã đề cập đến trình tải dấu chấm trong bài viết này và trình quay vòng trong bài viết cuối cùng. Trong phần tiếp theo của loạt bài gồm bốn phần này, chúng ta sẽ chú ý đến một loại trình tải phổ biến khác. Những quán bar. Chúng ta sẽ tiếp thu nhiều kiến thức đã học được cho đến nay và xem cách chúng ta có thể mở rộng chúng để tạo thêm một trình tải phần tử đơn lẻ khác với mã ít nhất và tính linh hoạt cao nhất có thể Làm cách nào để tạo một vòng tròn trong CSS?Để tạo hình tròn, chúng ta có thể đặt bán kính đường viền cho phần tử . Điều này sẽ tạo ra các góc cong trên phần tử. Nếu chúng tôi đặt nó thành 50%, nó sẽ tạo ra một vòng tròn. Nếu bạn đặt chiều rộng và chiều cao khác, thay vào đó, chúng tôi sẽ nhận được hình bầu dục.
Làm cách nào để sử dụng id div trong CSS?Để sử dụng bộ chọn ID trong CSS, bạn chỉ cần viết thẻ bắt đầu bằng # (#) theo sau là ID của phần tử . Sau đó đặt các thuộc tính kiểu bạn muốn áp dụng cho phần tử trong ngoặc.
Làm cách nào để sử dụng bộ chọn lớp trong CSS?Để chọn các phần tử với một lớp cụ thể, viết dấu chấm (. ), theo sau là tên của lớp . Bạn cũng có thể chỉ định rằng chỉ các phần tử HTML cụ thể mới bị ảnh hưởng bởi một lớp.
Biểu tượng trong CSS là gì?Bộ mô tả CSS ký hiệu được được sử dụng để chỉ định các ký hiệu mà hệ thống bộ đếm đã chỉ định sẽ sử dụng để xây dựng biểu diễn bộ đếm . |