Hoạt ảnh khung hình chính CSS cực kỳ linh hoạt và mạnh mẽ, nhưng chúng cũng hơi kỳ lạ. Trong hướng dẫn chuyên sâu này, chúng ta sẽ tìm hiểu cách các khung hình chính CSS hoạt động từ đầu và xem cách sử dụng chúng để tạo hoạt ảnh chất lượng cao.

Bạn đang xem : ví dụ về khung hình ảnh động css

Hoạt ảnh khung hình chính CSS thật tuyệt vời. Chúng là một trong những công cụ linh hoạt, mạnh mẽ nhất trong CSS và chúng ta có thể sử dụng chúng cho tất cả những việc tiện lợi.

Nhưng chúng cũng thường bị hiểu nhầm. Chúng hơi kỳ quặc và nếu bạn không hiểu những điều kỳ quặc đó, việc sử dụng chúng có thể khá khó chịu.

Trong hướng dẫn này, chúng tôi đi sâu vào khung hình chính CSS. Chúng tôi sẽ tìm hiểu cách chúng hoạt động và xem cách tạo một số hình ảnh động đẹp mắt với chúng. ✨

Đối tượng dự kiến ​​

Hướng dẫn này được viết cho các nhà phát triển JavaScript đang cố gắng trở nên thoải mái hơn với CSS. Nhưng nó phải phù hợp với tất cả các nhà phát triển hiểu rõ về các kiến ​​thức cơ bản về HTML / CSS.

Nếu bạn đã hiểu rõ về CSS, có thể bạn sẽ biết hầu hết những gì chúng tôi đề cập, nhưng tôi chia sẻ một số nội dung khá thú vị và ít người biết đến ở gần cuối bài đăng này. 😄

Trong hướng dẫn này, chúng tôi xây dựng dựa trên kiến ​​thức được chia sẻ trong “ Hướng dẫn tương tác về chuyển đổi CSS ”.

Liên kết đến tiêu đề này

Cú pháp

Ý tưởng chính với hoạt ảnh khung hình chính CSS là nó sẽ nội suy giữa các phần CSS khác nhau.

Ví dụ: ở đây chúng tôi xác định hoạt ảnh khung hình chính sẽ chuyển vị trí ngang của phần tử một cách suôn sẻ từ - 100% đến 0% :

 

css

Mỗi @ keyframes cần có tên! Trong trường hợp này, chúng tôi đã chọn đặt tên cho nó là slide-in . Bạn có thể coi điều này giống như một biến toàn cục.

Hoạt ảnh khung chính có nghĩa là chung và có thể tái sử dụng. Chúng tôi có thể áp dụng chúng cho các bộ chọn cụ thể với thuộc tính animation :

(Để chạy lại hoạt ảnh, hãy làm mới ngăn” Kết quả “bằng cách nhấp vào biểu tượng.)

Như với < thuộc tính code class = "InlineCode-sc-187729h-0 YNroS"> chuyển đổi , hoạt ảnh yêu cầu một khoảng thời gian. Ở đây chúng tôi đã nói rằng hoạt ảnh sẽ kéo dài 1 giây (1000ms).

Trình duyệt sẽ nội suy các khai báo trong từ khối đến , trong khoảng thời gian được chỉ định. Điều này xảy ra ngay lập tức, ngay sau khi thuộc tính được đặt.

Chúng ta có thể tạo hoạt ảnh cho nhiều thuộc tính trong cùng một khai báo hoạt ảnh. Đây là một ví dụ lạ lùng thay đổi nhiều thuộc tính:

Liên kết đến tiêu đề này

Các hàm định thời

Trong “ Hướng dẫn Tương tác về Chuyển đổi CSS ”, chúng tôi đã học tất cả về các hàm định thời gian khác nhau được tích hợp trong CSS.

Chúng tôi có quyền truy cập vào cùng một thư viện các hàm định thời cho hoạt ảnh khung hình chính của chúng tôi. Và, giống như với chuyển đổi , giá trị mặc định là dễ dàng .

Chúng tôi có thể ghi đè nó bằng thuộc tính animation-timing-function :

Liên kết đến tiêu đề này

Hoạt ảnh lặp lại

Theo mặc định, hoạt ảnh khung hình chính sẽ chỉ chạy một lần, nhưng chúng tôi có thể kiểm soát điều này bằng thuộc tính animation-iteration-count :

Việc chỉ định một số nguyên như thế này hơi hiếm, nhưng có một giá trị đặc biệt hữu ích: vô hạn .

Ví dụ: chúng ta có thể sử dụng nó để tạo một vòng quay tải:

Lưu ý rằng đối với người quay, chúng tôi thường muốn sử dụng hàm định thời tuyến tính để chuyển động là không đổi (mặc dù điều này hơi chủ quan — hãy thử hãy thay đổi nó và xem bạn nghĩ gì!).

Liên kết đến tiêu đề này

Hoạt ảnh nhiều bước

Ngoài từ đến từ khóa, chúng tôi cũng có thể sử dụng tỷ lệ phần trăm. Điều này cho phép chúng tôi thêm nhiều hơn 2 bước:

Tỷ lệ phần trăm đề cập đến tiến trình thông qua hoạt ảnh. từ thực sự chỉ là đường cú pháp? cho 0% . Và tới là đường cho 100% .

Quan trọng là, chức năng định thời áp dụng cho từng bước. Chúng tôi không dễ dàng chút nào cho toàn bộ hoạt ảnh.

Trong sân chơi này, cả hai người quay đều hoàn thành 1 vòng quay đầy đủ trong 2 giây. Nhưng multi-step-spin chia nó thành 4 bước riêng biệt và mỗi bước có chức năng thời gian được áp dụng:

Rất tiếc, chúng tôi không thể kiểm soát hành vi này bằng cách sử dụng hoạt ảnh khung hình chính CSS, mặc dù nó có thể định cấu hình bằng API Web Animations. Nếu bạn thấy mình trong tình huống nới lỏng từng bước có vấn đề, tôi khuyên bạn nên hãy kiểm tra !

Liên kết đến tiêu đề này

Hình ảnh động xen kẽ

Giả sử chúng ta muốn một phần tử” thở “, thổi phồng và xẹp xuống.

Chúng ta có thể thiết lập nó dưới dạng hoạt ảnh 3 bước:

Nó dành nửa đầu thời lượng để tăng gấp rưỡi kích thước mặc định. Sau khi đạt đến đỉnh đó, thời gian của nửa sau sẽ thu hẹp lại xuống 1 lần.

Điều này hiệu quả, nhưng có một cách thanh lịch hơn để đạt được điều tương tự. hiệu ứng. Chúng ta có thể sử dụng thuộc tính animation-direction :

animation-direction kiểm soát thứ tự của chuỗi. Giá trị mặc định là normal , tăng từ 0% đến 100% trong suốt khoảng thời gian được chỉ định.

Chúng ta cũng có thể đặt nó thành ngược lại . Điều này sẽ phát ngược hoạt ảnh, từ 100% xuống 0%.

Tuy nhiên, phần thú vị là chúng ta có thể đặt nó thành thay thế , trò chơi bóng bàn giữa normal đảo ngược trong các lần lặp tiếp theo.

Thay vì có 1 hoạt ảnh lớn phát triển và thu nhỏ lại, chúng tôi đặt hoạt ảnh của chúng ta phát triển và sau đó đảo ngược nó vào lần lặp tiếp theo, khiến nó thu nhỏ lại.

Một nửa thời lượng

Ban đầu, hoạt ảnh “thở” của chúng tôi kéo dài 4 giây. Tuy nhiên, khi chúng tôi chuyển sang chiến lược thay thế, chúng tôi cắt giảm thời lượng xuống một nửa, xuống còn 2 giây.

Điều này là do mỗi lần lặp chỉ thực hiện một nửa công việc. Nó luôn mất 2 giây để phát triển và 2 giây để thu nhỏ. Trước đây, chúng tôi có một hoạt ảnh dài 4 giây duy nhất. Bây giờ, chúng tôi có một hoạt ảnh dài 2 giây yêu cầu 2 lần lặp để hoàn thành một chu kỳ đầy đủ.

Liên kết đến tiêu đề này

Giá trị viết tắt

Chúng tôi đã chọn ra rất nhiều thuộc tính hoạt ảnh trong bài học này và bạn phải nhập rất nhiều!

Rất may là với chuyển tiếp , chúng ta có thể sử dụng animation viết tắt để kết hợp tất cả các thuộc tính này.

Hoạt ảnh trên có thể được viết lại:

 

css

Đây cũng là một tin tốt: đơn đặt hàng không quan trọng. Đối với hầu hết các phần, bạn có thể ném tài sản theo bất kỳ thứ tự nào bạn muốn. Bạn không cần phải ghi nhớ một trình tự cụ thể.

Có một ngoại lệ: animation-delay , một thuộc tính mà chúng ta sẽ nói thêm trong thời gian ngắn, cần xuất hiện sau thời lượng, vì cả hai thuộc tính đều có cùng loại giá trị (mili giây / giây).

Vì lý do này, tôi muốn loại trừ độ trễ khỏi cách viết tắt:

 

css

Liên kết cho tiêu đề này

Chế độ điền

Có lẽ khía cạnh khó hiểu nhất của hoạt ảnh khung hình chính là chế độ điền. Chúng là trở ngại lớn nhất trên con đường hướng tới sự tự tin của keyframe.

Hãy bắt đầu với một vấn đề.

Chúng tôi muốn phần tử của chúng tôi mờ dần. Bản thân hoạt ảnh hoạt động tốt, nhưng khi nó kết thúc, phần tử sẽ xuất hiện trở lại:

Nếu chúng ta vẽ biểu đồ độ mờ của phần tử theo thời gian, nó sẽ trông giống như sau:

Tại sao phần tử quay trở lại chế độ hiển thị đầy đủ? Chà, chỉ áp dụng khai báo trong các khối từ đến trong khi hoạt ảnh đang chạy.

Sau 1000 mili giây trôi qua, hoạt ảnh sẽ tự đóng gói và xuất hiện. Các khai báo trong khối đến sẽ tiêu tan, để lại phần tử của chúng ta với bất kỳ khai báo CSS nào đã được định nghĩa ở nơi khác. Vì chúng tôi chưa đặt opacity cho phần tử này ở bất kỳ nơi nào khác, nó sẽ quay trở lại giá trị mặc định của nó ( 1 ).

Một cách để giải quyết vấn đề này là thêm khai báo opacity cho . Box selector:

Trong khi hoạt ảnh đang chạy, các khai báo trong câu lệnh @ keyframes sẽ ghi đè khai báo độ mờ trong Bộ chọn . box . Tuy nhiên, khi hoạt ảnh kết thúc, khai báo đó sẽ xuất hiện và giữ hộp ẩn.

Tính cụ thể?

Trong CSS, xung đột được giải quyết dựa trên“ tính cụ thể ”của một bộ chọn. Một bộ chọn ID ( # login-form ) sẽ thắng trong trận chiến với một lớp (. cái gì đó).

Nhưng còn hình ảnh động khung hình chính thì sao? Tính cụ thể của chúng là gì?

Hóa ra tính cụ thể không thực sự là cách đúng đắn để nghĩ về điều này; thay vào đó, chúng ta cần nghĩ về nguồn gốc phân tầng.

Vì vậy, chúng ta có thể cập nhật CSS của mình để các thuộc tính của phần tử khớp với đến khối , nhưng đó có thực sự là cách tốt nhất không?

< span class = "ContentHeading__Anchor-sc-11npftn-1 kQeoVr" id = "fill-forwards" name = "fill-forwards">

Liên kết đến tiêu đề này Điền chuyển tiếp

Thay vì dựa vào khai báo dự phòng, hãy xem xét một cách tiếp cận khác, sử dụng animation-fill-mode :

animation-fill-mode cho phép chúng tôi duy trì giá trị cuối cùng từ hoạt ảnh, chuyển tiếp theo thời gian.

"forwards" là một cái tên rất khó hiểu, nhưng hy vọng bạn thấy nó trên biểu đồ này rõ ràng hơn một chút!

Khi hoạt ảnh kết thúc, animation-fill-mode: chuyển tiếp sẽ sao chép / dán các khai báo trong khối cuối cùng, liên tục chuyển tiếp chúng trong thời gian.

Liên kết đến tiêu đề này

Điền ngược

Chúng tôi không phải lúc nào cũng muốn hoạt ảnh của mình bắt đầu ngay lập tức! Như với chuyển đổi , chúng ta có thể chỉ định độ trễ, với animation-delay < / code> property.

Rất tiếc, chúng tôi gặp phải sự cố tương tự:

Trong nửa giây đầu tiên đó, phần tử hiển thị hoàn toàn!

< span>

CSS trong từ < / code> và tới khối chỉ được áp dụng khi hoạt ảnh đang chạy. Thật đáng tiếc, khoảng thời gian animation-delay không được tính. Vì vậy, trong nửa giây đầu tiên đó, có vẻ như CSS trong từ khối không tồn tại.

animation-fill-mode có một giá trị khác có thể giúp chúng tôi ở đây: ngược lại . Điều này sẽ áp dụng CSS từ khối đầu tiên trở lại theo thời gian.

“Chuyển tiếp” và “lùi lại” là các giá trị khó hiểu, nhưng đây là một phép loại suy có thể hữu ích: hãy tưởng tượng nếu chúng tôi đã ghi lại phiên của người dùng ngay từ lúc này trang được tải. Chúng tôi có thể quét tới và lui trong video. Chúng ta có thể quay ngược lại, trước khi hoạt ảnh bắt đầu hoặc tua đi, sau khi hoạt ảnh kết thúc.

Điều gì xảy ra nếu chúng ta muốn để duy trì hoạt ảnh chuyển tiếp và lùi lại? Chúng tôi có thể sử dụng giá trị thứ ba, cả hai , vẫn tồn tại theo cả hai hướng:

Cá nhân tôi ước rằng cả hai đều là giá trị mặc định. Nó trực quan hơn rất nhiều! Mặc dù nó có thể khiến bạn hơi khó hiểu nơi đặt giá trị CSS cụ thể.

Giống như tất cả các thuộc tính hoạt ảnh mà chúng ta đang thảo luận, nó có thể được đưa vào hoạt ảnh xà lách viết tắt:

 

css

Liên kết đến tiêu đề này

Hoạt ảnh động với các biến CSS

Hoạt ảnh khung chính đã đủ thú vị, nhưng khi chúng tôi kết hợp chúng với các biến CSS (thuộc tính tùy chỉnh CSS AKA ), mọi thứ trở nên ⚡️ cấp độ tiếp theo ⚡️.

Giả sử rằng chúng ta muốn tạo hoạt ảnh quả bóng nảy, sử dụng mọi thứ chúng ta đã học được trong phần này bài học:

Bezier khối?

Để làm cho hoạt ảnh thoát thực hơn một chút, tôi đang sử dụng chức năng định thời gian tùy chỉnh, sử dụng khối-bezier .

Tôi sẽ sớm xuất bản một bài đăng trên blog về sự kỳ diệu của đường cong Bézier - đăng ký nhận bản tin của tôi nếu bạn muốn được thông báo vi nó đã được xuất bản! 😄

Hoạt ảnh CSS có ý nghĩa chung chung và có thể sử dụng lại, nhưng hoạt ảnh này sẽ luôn khiến một phần tử bị trả lại 20px. Sẽ không gọn gàng nếu các phần tử khác nhau có thể cung cấp "độ cao số trang không truy cập" khác nhau?

Với các biến CSS, chúng ta có thể thực hiện chính xác điều đó:

Hoạt ảnh @ keyframes của chúng tôi đã được cập nhật để thay vì trả về - 20px , nó truy cập giá trị của - bị trả lại thuộc tính -offset . Và vì thuộc tính đó có một giá trị khác nhau trong mỗi hộp, nên mỗi hộp sẽ trả về số tiền khác nhau.

Chiến lược này cho phép chúng tôi tạo hoạt ảnh khung hình chính có thể sử dụng lại, có thể tùy chỉnh. Hãy coi nó giống như đạo cụ cho một thành phần React!

Giá trị xuất phát với calc

Vì vậy, có điều gì đó khiến tôi khó chịu về ví dụ trên.

Với hàm translateY , giá trị dương di chuyển phần tử xuống, giá trị âm di chuyển phần tử lên. Chúng tôi muốn di chuyển phần tử lên trên, vì vậy chúng tôi phải sử dụng giá trị âm.

Nhưng đây là chi tiết triển khai. Khi tôi muốn áp dụng hoạt ảnh này, thật kỳ lạ khi tôi cần sử dụng giá trị âm.

Các biến CSS hoạt động tốt nhất khi chúng có ngữ nghĩa. Thay vì đặt - bounce-offset thành giá trị âm, tôi muốn làm điều này hơn:

 

css

Sử dụng calc , chúng ta có thể lấy được giá trị true từ giá trị được cung cấp, trong @ keyframes at-rule:

css

< / pre>

Chúng tôi chỉ xác định hoạt ảnh khung hình chính này một lần, nhưng chúng tôi có thể sẽ sử dụng nó nhiều lần. Nó đáng được tối ưu hóa cho khía cạnh "người tiêu dùng" của mọi thứ, để làm cho nó dễ sử dụng nhất có thể, ngay cả khi nó làm phức tạp định nghĩa một chút.

calc cho phép chúng tôi tạo ra các API hoàn hảo cho hoạt ảnh khung hình chính của chúng tôi. 💯

Liên kết đến tiêu đề này

Chỉ là phần đầu

Khi đang xây dựng vài bản demo cuối cùng, tôi nhận ra rằng CSS đã phát triển đến mức nào trong vài năm qua!

Nó đã trở thành một ngôn ngữ đáng kinh ngạc, biểu cảm linh hoạt và mạnh mẽ. Tôi thích viết CSS.

Tuy nhiên, rất nhiều nhà phát triển front-end có mối quan hệ rất khác với ngôn ngữ. Tôi đã nói chuyện với hàng trăm nhà phát triển JavaScript, những người thấy CSS gây khó chịu và khó hiểu. Đôi khi, cùng một CSS sẽ hoạt động hoàn toàn khác! Nó cảm thấy không nhất quán.

Tôi có một lý thuyết về điều này: không giống như JS, rất nhiều CSS là ẩn và hậu trường. Nó không đủ để biết các thuộc tính; bạn cần biết các nguyên tắc thúc đẩy chúng.

Tôi đã dành năm ngoái để làm việc toàn thời gian cho một khóa học sẽ giúp dạy CSS ở cấp độ sâu hơn, cơ bản hơn. Nếu bạn thấy bài đăng trên blog này hữu ích, bạn sẽ thích khóa học.

Nó có tên là CSS dành cho Nhà phát triển JavaScript và nó vừa được phát hành ra công chúng. Bạn có thể tìm hiểu thêm tại css-for-js.dev .


Xem thêm những thông tin liên quan đến chủ đề ví dụ về khung hình ảnh động css

CSS Filters - SVG Turbulence Filter Animation [ CSS3 Creative Menu Hover Effects ] Squigglevision

  • Tác giả: Franks laboratory
  • Ngày đăng: 2020-05-08
  • Đánh giá: 4 ⭐ ( 5369 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Let's take a look at CSS filters, specifically SVG turbulence animation (and displacement map) which apply 'perlin noise' effect to any HTML element. It can also be applied to HTML canvas so you can try to combine it with any of the canvas effects we created in previous videos. Let's create really cool CSS3 creative menu hover effects also known as 'Squigglevision'.

    I have used CSS filters before to create sticky liquid effect. To achieve that we first blur the elements and then we apply strong contrast to make the famous flowing goo effect.
    Today I will show you how to rapidly iterate between 5 distortion states using turbulence and displacement map inline SVG filters and how to tweak the effect to create your own variations

    There is a patented cartoon animation technique called Squigglevision and we will recreate it with CSS. It was used for shows like Dr Katz and it is a computer animation style, that is supposed to remind viewer of hand drawn animation sketches. It is characteristic by shaking squiggly lines even when the characters are standing still.

    Squigglevision cartoon technique is much faster to produce than hand drawn animation, because it's made using computer. The shaking lines are done by looping 5 slighly different images over and over.

    Relevant links:
    https://css-tricks.com/squigglevision-in-css-and-svg/
    https://en.wikipedia.org/wiki/Squigglevision
    https://en.wikipedia.org/wiki/Perlin_noise

    If you want source code to my tutorials I have made some of my videos available on live coding platform Eversparked. You can watch my videos with LIVE browser preview and live code that can be copied and adjusted at any stage. I really like the project idea, I wish I had a tool like that when learning hot to code. Let me know what you think https://bit.ly/2Yxp7ia

    You can message me on TWITTER https://twitter.com/code_laboratory
    Check out some of my source code on CODEPEN https://codepen.io/franksLaboratory

    For more creative CSS animation tutorials for beginners as well as advanced HTML & CSS guides, hover animation and transition examples from scratch with pure vanilla CSS, new experimental animations on buttons, menus, forms and other web elements, CSS animation examples, creative ideas for web design, advanced CSS selectors and the best CSS tricks of 2019, check out my CSS3 & HTML5 playlist:

    https://www.youtube.com/watch?v=TbI7TFjlDbU&list=PLYElE_rzEw_t2O2DvfopIoq-diTgefVzV

    I also have pure vanilla JavaScript animation series, in each tutorial we create all different kinds of interactive animated effects from scratch. No plugins, no libraries, no frameworks. Every line of code is explained to give you hands on experience and teach you as much JavaScript as possible. If you want more creative JavaScript tutorials, HTML canvas animations, interactive animated effects, code alongs, video guides for beginners as well as advanced pure vanilla JavaScript, check out the playlist here:

    https://www.youtube.com/watch?v=afdHgwn1XCY&list=PLYElE_rzEw_siuo-kkHh5h7Sk--6IPYNh

    If you liked this advanced CSS3 tutorial I'm sure you will enjoy other videos on my channel. You can find HTML Canvas Animation Tutorials, JavaScript tutorials, animated effects and step by step animation guides, each video shows many examples of the final effect. I will help you learn modern web development techniques by building real projects you can show off on your personal website or GitHub. Code along with me and gain skills to get your first job in the industry. If I could do it you can do it too. If you decide to code along and modify the effects, share your Codepen/JS Fiddle in the comments, I want to see what you came up with.

    My name is Frank, I'm a self-taught Front End Web Developer. I learned everything I know in my free time and I used the knowledge to get a great job in web development industry. The part I enjoy the most is building creative animations and interactive effects for the web using HTML, CSS and JavaScript. Thank you for watching my video.

    For more creative vanilla JavaScript tutorials, CSS tricks, HTML canvas animations, front end web development and web design guides, subscribe to the channel and click the bell icon to get notified when I release a new animation tutorial.

    css3 html5 frankslaboratory

    Music:
    Business / Corporate by Mixaund | https://mixaund.bandcamp.com
    Music promoted by https://www.free-stock-music.com

    The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commision without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!

Hình ảnh (image) trong CSS, chèn ảnh, resize và căn chỉnh kích thước ả

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 5 ⭐ ( 5918 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hình ảnh (image) trong CSS, Hình ảnh (image) trong CSS, chèn ảnh, resize và căn chỉnh kích thước ảnh

17 MẪU HIỆU ỨNG CSS HÀNG ĐẦU HIỆN NAY

  • Tác giả: aptech-danang.edu.vn
  • Đánh giá: 3 ⭐ ( 2595 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn đã có thể nhận thấy số lượng các ví dụ hiệu ứng CSS có trên các trang web đã tăng lên gần đây. Hiệu ứng đã tạo ra một giật gân trực tuyến và được thiết lập để trở thành một trong những xu hướng thiết kế web quan trọng của năm 2018 . Tất cả trên web, các nhà thiết kế đang sáng tạo và sử dụng hoạt ảnh CSS để mang cá tính đến trang web của họ, giải thích các ý tưởng phức tạp một cách nhanh chóng và dễ dàng và hướng dẫn hành động của người dùng.

Hướng dẫn tạo ảnh động CSS

  • Tác giả: tech-wiki.online
  • Đánh giá: 4 ⭐ ( 3562 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hiệu ứng Hình ảnh trong CSS

  • Tác giả: vietjack.com
  • Đánh giá: 5 ⭐ ( 3922 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hiệu ứng Hình ảnh trong CSS | Image trong CSS - Học CSS cơ bản và nâng cao theo từng bước bắt đầu từ CSS là gì, Thuộc tính trong CSS, Cú pháp CSS, Căn lề trong CSS, Border trong CSS, Căn chỉnh vị trí trong CSS, Định dạng Text trong CSS, Pseudo Class, Pseudo Element, Phần tử giả trong CSS, Hiệu ứng trong CSS, Đơn vị trong CSS, Color trong CSS, Chia cột trong CSS, Qui tắc trong CSS.

Những thuộc tính css của images mà bạn cần biết

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 3166 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 1. Làm sắc nét hình ảnh với *image-rendering* Khi một hình ảnh được phóng to, trình duyệt làm mịn hình ảnh, do đó, nó không nhìn pixelated. Tuy nhiên, tùy thuộc vào độ phân giải của hình ảnh và màn...

Ví dụ về hoạt ảnh CSS: hoạt ảnh tốt nhất cho video

  • Tác giả: www.creativosonline.org
  • Đánh giá: 4 ⭐ ( 4265 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong CSS, bạn có thể tạo các hình ảnh động vô tận. Trong bài đăng này, chúng tôi chỉ cho bạn một số ví dụ về một số hoạt ảnh CSS tốt nhất.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Trung tâm chuỗi Python () (Có ví dụ) - chức năng trung tâm trong python

By ads_php