Tin tức và phân tích của tất cả các thiết bị di động

Mảnh mã thiên thể kỷ niệm thiên đường và không gian bên ngoài

Thế giới tự nhiên luôn phục vụ như một nguồn cảm hứng tuyệt vời. Và chúng ta có thể thấy một số kỳ quan tuyệt vời nhất của nó nhìn lên bầu trời.

Một bầu trời trong xanh như pha lê vào một ngày nắng, những ngôi sao nhấp nháy vào ban đêm. Những suy nghĩ về thám hiểm không gian và thiên hà của chúng ta cũng khơi dậy trí tưởng tượng của chúng ta. Những gì ở trên chúng ta cung cấp cả một thực tế hàng ngày và sự tò mò về những điều chưa biết.

Không có gì đáng ngạc nhiên, một số nhà phát triển rất sáng tạo đã sử dụng thiên đường và không gian như một chủ đề để thử nghiệm. Việc sử dụng tiềm năng của ánh sáng, màu sắc, chuyển động và công nghệ web mới nhất phù hợp một cách tự nhiên.

Hôm nay chúng tôi sẽ trình bày một số ví dụ tuyệt vời bằng cách nào đó sử dụng thiên đường và không gian. Họ chạy quang phổ từ độ chính xác khoa học đến trí tưởng tượng thuần túy. Thưởng thức!

Cuộn xuống bầu trời

Hiệu ứng dịch chuyển thị sai là ở khắp mọi nơi trong những ngày này. Đó là một trong những xu hướng đã có một cuộc sống của riêng mình. Tuy nhiên, đây là một trong những ví dụ độc đáo và hấp dẫn nhất mà chúng ta đã thấy. Cuộn xuống trang dẫn đến cuộn 3D các đám mây, trong khi màu nền thay đổi làm cho nó trông giống như bạn đang rơi xuống đất.

Xem bản giới thiệu Pen Canvallax: Parallax Sky Background của Shaw

Bản đồ cho các ngôi sao

Điều làm cho bản đồ sao này trở nên thú vị là tính tương tác dựa trên CSS và JavaScript. Nhấp vào một sistema và tập trung, hoàn thành với các chuyển tiếp trơn tru như lụa. Bản đồ cũng cho thấy một đường băng mô phỏng và một số biểu tượng cảm xúc vui nhộn như đóng băng trên bánh.

Xem bút Bản đồ sao CSS của Scott Weaver (@ sweaver2112)

Đèn phía Bắc

Một trong những kỳ quan thực sự của vũ trụ, cực quang, là thứ mà không nhiều người trong chúng ta nhìn thấy. Nhưng ít nhất chúng ta có thể cố gắng để tạo lại trải nghiệm. Ở đây, một phiên bản CSS sạch của bầu trời đêm màu xanh lá cây và màu tím nhạt có thể chiếu sáng màn hình của bạn.

Xem bút Pure CSS Đèn phía Bắc? 😎 bởi Jhey

Mặt trời lặn trên mạng

Trái lại, một hoàng hôn ấn tượng là điều mà hầu như ai cũng có thể trải nghiệm. Nhưng điều đó không làm cho nó bớt chói mắt. Đoạn trích này cho phép bạn đặt hoàng hôn chuyển động bất cứ lúc nào trong ngày, chỉ cần nhấp vào quả cầu lớn màu vàng. Các màu sắc thay đổi tạo ra một hiệu ứng nổi bật.

Xem bút hoàng hôn

Ánh sáng của đêm

Bạn muốn biết khi nào trăng tròn sẽ tỏa sáng ở Paris, Pháp? Hoạt hình tuyệt vời này cho bạn biết và cho bạn một cái nhìn về cửa sổ của Tháp Eiffel. Bí ẩn duy nhất ở đây là nếu con mèo đen ấm cúng làm điều gì đó đặc biệt khi sự kiện đến.

Xem bút Full Moon ở Paris? bởi Paulina Hetman

Saturn CSS tinh khiết

Vòng sao Thổ là một nguồn mê hoặc lớn trong con người chúng ta. Đại diện hành tinh chỉ CSS này cung cấp một cái nhìn hơi khác. Trời tối và những chiếc nhẫn không nổi bật như bình thường. Nhưng nó cung cấp một ví dụ tuyệt vời về cách chuyển màu CSS có thể giúp chúng ta tạo ra nghệ thuật tuyệt vời.

Xem cây bút Saturn 🪐 của Luciano Felix

Tiếp cận mặt trời

Sử dụng WebGL làm cho hoạt hình mặt trời này ra khỏi thế giới này. Khi mặt trời rơi từ trên cùng của màn hình, bạn nhận thấy các hiệu ứng mờ xung quanh mép của nó. Mức độ chi tiết ở đây chỉ đơn giản là tuyệt vời. May mắn thay, không có nhiệt qua màn hình.

Xem bút Scott Weaver Solar

Màu sắc cho mọi bầu trời

Bộ sưu tập của chúng tôi được bổ sung bởi một mảnh có ích hơn một chút. Nó là một tập hợp các gradient CSS đẹp mà bạn có thể sử dụng để tái tạo các kết hợp màu trời khác nhau. Bạn sẽ tìm thấy mọi thứ từ bóng tối của màn đêm, mặt trời mọc, hoàng hôn và màu xanh hoàn hảo của bữa tối.

Xem độ dốc Pen Sky của zessx

Khám phá bầu trời thông qua mã

Như đoạn mã trên cho thấy, thiên đường và không gian bên ngoài có thể thêm các yếu tố thú vị và vẻ đẹp cho web. Cho dù họ đang tái tạo thế giới của chúng tôi hoặc cố gắng cho chúng tôi thấy những thế giới mới, họ cung cấp một cách độc đáo để nâng cao trải nghiệm người dùng.

Bạn muốn xem thêm ví dụ? Kiểm tra bộ sưu tập CodePen của chúng tôi!