Hướng dẫn success animation css - css hoạt hình thành công

Thêm nhận xét/câu hỏi

Nhập thêm 15 ký tự

Nội dung chính

• Đọc thêm:
• Tạo hình ảnh động UI mát mẻ với CSS
• 02. Tiết lộ lớn
• 03. TUYỆT VỜI trên
• 04. Squigglevision
• 05. Chữ ngã
• 06. Cuốn sách lật
• 07. Bong bóng thổi
• 09. Viết hoạt hình
• 10. Chim bay
• 11. Băng qua chiếc bánh hamburger của tôi
• 12. Vòng tròn theo đuổi
• Xem mã (mở trong tab mới)
• 14. Các chữ cái xuất hiện ngẫu nhiên
• 15. Tuyết rơi
• 16. Vòng tròn xung
• 17. Văn bản trục trặc
• 18. Bối cảnh di chuyển
• 19. Chuyển đổi đầy màu sắc
• Như đã thấy trên: Daink (mở trong tab mới)
• 19. Chuyển đổi đầy màu sắc
• 19. Chuyển đổi đầy màu sắc
• Như đã thấy trên: Daink (mở trong tab mới)
• 19. Chuyển đổi đầy màu sắc
• 19. Chuyển đổi đầy màu sắc

Như đã thấy trên: Daink (mở trong tab mới)

Tìm hiểu, phát triển và giúp đỡ người khác với BBBOOTSTRAP

Đóng góp cho chúng tôi với một số đoạn trích thú vị tuyệt vời sử dụng HTML, CSS, JavaScript và Bootstrap

Đánh dấu kiểm tra hoạt hình CSS Pure bên trong Circle Snippet được tạo bởi nhóm BBBOOTSTRAP bằng cách sử dụng CSS thuần túy. Đoạn trích này là miễn phí và nguồn mở do đó bạn có thể sử dụng nó trong dự án của mình. CSS hoạt hình KIỂM TRA Bên trong Snippet Snippet Ví dụ là tốt nhất cho tất cả các loại dự án. Các biểu tượng thiết kế vật liệu và màu sắc thiết kế vật liệu tại bbbootstrap.com.

Thư viện Greenwich có một quá trình chuyển đổi thực sự thú vị trên các nút của nó. Khi tương tác với nút, hai điều xảy ra: phần văn bản của nút được bao phủ và mũi tên sau đó được hoạt hình ở phía bên phải của nút và quay lại từ bên trái. & NBSP;

Việc chuyển đổi màu được thực hiện với thuộc tính chuyển tiếp và mũi tên bằng hình ảnh động KeyFrame đơn giản. Cả quá trình chuyển đổi và hoạt hình đều sử dụng cùng một thời lượng để đồng bộ hóa các chuyển động.

Hoạt hình CSS là gì?

Hoạt hình CSS là một phương pháp hoạt hình một số phần tử HTML mà không phải sử dụng JavaScript bộ xử lý và bộ nhớ. Không có giới hạn về số lượng hoặc tần suất của các thuộc tính CSS có thể thay đổi. Hoạt hình CSS được bắt đầu bằng cách chỉ định các khung chính cho hình ảnh động: các khung khóa này chứa các kiểu mà phần tử sẽ có và chúng không khó để tạo. & NBSP;

Đọc thêm:

Tạo hình ảnh động UI mát mẻ với CSS

• 02. Tiết lộ lớn Donovan Hutchinson (opens in new tab)

03. TUYỆT VỜI trên

04. Squigglevision

<div class="demo">
  <div class="perspective-container">
    <div class="card"></div>
  </div>
</div>

05. Chữ ngã

.demo {
  background-color: hsl(207, 9%, 19%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

.perspective-container {
  perspective: 800px;
}

06. Cuốn sách lật

.card {
  background-image: url(https://media.giphy.com/media/sIIhZliB2McAo/giphy.gif);
  background-size: cover;
  box-shadow: 0 0 140px 10px rgba(0,0,0,.5);
  position: relative;
  height: 300px;
  width: 500px;
  overflow: hidden; /* Try removing this to see how the sheen works! */
  --sheenX: 0; /* Set these with JavaScript */
  --sheenY: 0;
}

07. Bong bóng thổioverflow to hidden so that we can add a sheen effect later. We also set css variables, sheenX and sheenY.

09. Viết hoạt hìnhafter pseudo-element:

.card::after {
  content: "";
  position: absolute;
  top: -400px;
  right: -400px;
  bottom: -400px;
  left: -400px;
  background: linear-gradient(217deg, rgba(255,255,255,0), rgba(255,255,255,0) 35%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
  transform: translateX(var(--sheenX)) translateY(var(--sheenY));
}

10. Chim baycard using transform.

11. Băng qua chiếc bánh hamburger của tôitransform property is making use of those CSS variables we set earlier. We will set those with JavaScript. Let's set up the JavaScript to first listen for mouse events:

12. Vòng tròn theo đuổi

Xem mã (mở trong tab mới)handleMouseMove function to handle onmousemove:

function handleMouseMove(event) {
  const height = window.innerHeight;
  const width = window.innerWidth;
  // Creates angles of (-20, -20) (left, bottom) and (20, 20) (right, top)
  const yAxisDegree = event.pageX / width * 40 - 20;
  const xAxisDegree = event.pageY / height * -1 * 40 + 20;
  target.style.transform = `rotateY(${yAxisDegree}deg) rotateX(${xAxisDegree}deg)`;
  // Set the sheen position
  setSheenPosition(event.pageX / width, event.pageY / width);
}

14. Các chữ cái xuất hiện ngẫu nhiêntransform style of our card. This gives the card an angle based on the mouse!

15. Tuyết rơi

function setSheenPosition(xRatio, yRatio) {
  // This creates a "distance" up to 400px each direction to offset the sheen
  const xOffset = 1 - (xRatio - 0.5) * 800;
  const yOffset = 1 - (yRatio - 0.5) * 800;
  target.style.setProperty('--sheenX', `${xOffset}px`)
  target.style.setProperty('--sheenY', `${yOffset}px`)
}

Phần tử giả của chúng tôi trông tốt nhất khi nó di chuyển theo hướng ngược lại với chuột. Để đạt được điều này, chúng tôi tạo ra một số từ -0,5 và 0,5 thay đổi theo hướng ngược lại bằng cách tính tỷ lệ theo -1.

Chúng tôi nhân số này với 800 vì chúng tôi muốn nó mở rộng lên tối đa 400px, đó là cách chúng tôi đặt phần tử giả bóng bên ngoài thẻ.400px, which is how far we set the sheen pseudo-element outside the card.400px, which is how far we set the sheen pseudo-element outside the card.

Cuối cùng, chúng tôi đặt các giá trị bù này cho các thuộc tính biến CSS của chúng tôi và trình kết xuất của trình duyệt thực hiện phần còn lại.

Bây giờ chúng tôi có một thẻ chuyển sang đối mặt với chuột trong khi hiệu ứng ánh sáng di chuyển theo hướng ngược lại trên đỉnh. Điều này tạo ra một hiệu ứng tốt đẹp, bắt mắt.

02. Tiết lộ lớn

• Tác giả: Adam Kuhn (Mở trong Tab mới)Adam Kuhn (opens in new tab)Adam Kuhn (opens in new tab)

Nội dung hoạt hình tiết lộ các hiệu ứng đã được chứng minh phổ biến và được sử dụng đúng cách, họ có thể thu hút sự tập trung của người dùng và thu hút đối tượng của bạn. Bạn đã nhìn thấy điều này trước đây: một khối màu phát triển từ bên này hoặc bên khác theo chiều ngang hoặc chiều dọc, sau đó rút lui về phía đối diện, lần này tiết lộ một số văn bản hoặc một hình ảnh bên dưới. Nó có một khái niệm có vẻ khó khăn nhưng thực sự dựa vào một vài điều.

Đầu tiên, chúng tôi sẽ thiết lập định vị phần tử của mình (tải xuống mã đầy đủ tại đây (mở trong tab mới)) - Xác định nó là tương đối (chỉ tĩnh sẽ thất bại trong trường hợp này). Trong các trường hợp văn bản, tốt nhất là cho phép chiều cao và chiều rộng tự động, mặc dù một chút đệm không bị tổn thương. Chúng tôi cũng sẽ xác định nguồn gốc biến đổi, trong trường hợp phần tử cha mà chúng tôi muốn sử dụng vị trí bắt đầu. Vì chúng tôi muốn phần tử được ẩn ban đầu, chúng tôi sẽ sử dụng một biến đổi tỷ lệ dọc theo trục thích hợp để thu hẹp nó. (opens in new tab)) – define it as relative (only static will fail in this case). In text cases it’s best to allow automatic height and width, although a bit of padding doesn’t hurt. We’ll also define a transform origin, in the case of the parent element we want to use the starting position. Since we want the element hidden initially, we’ll use a scale transform along the appropriate axis to shrink it. (opens in new tab)) – define it as relative (only static will fail in this case). In text cases it’s best to allow automatic height and width, although a bit of padding doesn’t hurt. We’ll also define a transform origin, in the case of the parent element we want to use the starting position. Since we want the element hidden initially, we’ll use a scale transform along the appropriate axis to shrink it.

Tiếp theo, chúng tôi sẽ sử dụng một phần tử giả để che giấu cha mẹ của chúng tôi, đặt nguồn gốc biến đổi thành tùy chọn đối lập. Cuối cùng, chuỗi hoạt hình lại với nhau, sử dụng các hàm thời gian hoặc chậm trễ để bù cho mỗi chức năng.

Lưu ý, chúng tôi đã bù đắp hình ảnh động của phần tử cha mẹ và giả với một độ trễ nói với hộp ẩn văn bản của chúng tôi để tiết lộ nó chỉ sau khi bản thân phần tử đã được mở rộng hoàn toàn. Kiểm tra Codepen dưới đây.

03. TUYỆT VỜI trên

• Tác giả: Adam KuhnAdam KuhnAdam Kuhn

Khi bạn đã bắt đầu tích lũy một thư viện khá khác nhau về các đoạn nới lỏng khác nhau, đó là thời gian để xem xét các cách khác để tăng cường độ sâu của hình ảnh động của bạn và một trong những cách tốt nhất là bù đắp các yếu tố hoạt hình của bạn.

Tất cả đều quá phổ biến rằng một trình kích hoạt JavaScript được thiết lập để bắt đầu một loạt các hình ảnh động dựa trên vị trí cuộn, chỉ để tìm thấy tất cả các mục di chuyển hiệu quả song song. May mắn thay, CSS tự cung cấp một thuộc tính đơn giản có thể tạo ra (hoặc phá vỡ) trải nghiệm hoạt hình của bạn: Hoạt hình-Phân chế.animation-delay.animation-delay.

Ví dụ, hãy nói, chúng ta có một lưới các hình ảnh mà chúng ta muốn làm động vào khung khi người dùng cuộn. Có một số cách chúng tôi có thể kích hoạt điều này, rất có thể thêm các lớp vào các yếu tố khi chúng vào chế độ xem. Tuy nhiên, điều này có thể là một thang máy khá nặng trên trình duyệt và có thể tránh được bằng cách chỉ cần thêm một lớp duy nhất vào phần tử container và xác định độ trễ hoạt hình trên các phần tử trẻ em.

Đây là một trường hợp sử dụng đặc biệt tốt cho các tiền xử lý như SCS hoặc ít hơn, cho phép chúng tôi sử dụng vòng lặp @for để lặp qua từng phần tử.@for loop to iterate through each element.@for loop to iterate through each element.

#parent{
.child{
     animation: animationName 1.5s ease-in-out 1 forwards;
@for $i from 1 through 20{
     &:nth-of-type(#{$i}){
animation-delay:#{$i/10}s;
                 }
}
    }
}

Ở đây, bạn sẽ thấy với SCSS, chúng tôi có thể lặp qua từng bộ chọn: bộ chọn loại thứ hai, sau đó áp dụng độ trễ hoạt hình dựa trên mỗi phần tử con giá trị số của con. Trong trường hợp này, bạn sẽ lưu ý rằng chúng tôi chia thời gian của chúng tôi để giảm mỗi lần tăng xuống còn một phần nhỏ. Trong khi bù đắp các yếu tố hoạt hình của bạn có thể cho vay cảm xúc cho hoạt hình của bạn, quá nhiều sự chậm trễ có thể khiến nó cảm thấy rời rạc. Kiểm tra mã hóa này dưới đây.:nth-of-type selector, then apply an animation delay based on each child element’s numerical value. In this case you’ll note we divide up our timing to reduce each increment to a fraction of a second. While offsetting your animated elements can lend emotion to your animation, too much delay can make it feel disjointed. Check out this CodePen below.:nth-of-type selector, then apply an animation delay based on each child element’s numerical value. In this case you’ll note we divide up our timing to reduce each increment to a fraction of a second. While offsetting your animated elements can lend emotion to your animation, too much delay can make it feel disjointed. Check out this CodePen below.

04. Squigglevision

• Tác giả: Adam KuhnAdam KuhnAdam Kuhn

Các bộ lọc SVG cung cấp một cách tuyệt vời để đạt được cảm giác tự nhiên, vẽ tay và thoát khỏi một số ràng buộc kết xuất cảm giác phẳng của một mình CSS. Hoạt hình họ có thể tăng cường hơn nữa hiệu ứng.

Trường hợp tại điểm: Squigglevision. Vâng, đây không phải là một thuật ngữ kỹ thuật được biết đến với hầu hết các nhà làm phim hoạt hình, nhưng bạn chắc chắn đã thấy nó được sử dụng trong phim hoạt hình. Ý tưởng là các cạnh của các yếu tố hoạt hình này không chỉ hơi lởm chở đời sống.

Để đạt được hiệu ứng này, chúng tôi có thể bao gồm một SVG trên trang của chúng tôi với nhiều bộ lọc và các biến thể nhỏ về mức độ nhiễu loạn cho mỗi bộ. Tiếp theo, chúng tôi sẽ thiết lập dòng thời gian hoạt hình của mình, gọi mỗi bộ lọc trong khung chính của nó. Điều quan trọng là chơi với thời gian thời gian vì chúng tôi dự đoán hoạt hình sẽ cảm thấy 'nhảy' nhưng không muốn nó chậm đến mức cảm thấy rời rạc hoặc nhanh đến mức cảm thấy điên rồ. & NBSP;

Cuối cùng, điều quan trọng cần lưu ý là CSS thiếu khả năng chuyển đổi trơn tru giữa các bộ lọc SVG vì không có cách nào để truy cập các thuộc tính như nhiễu loạn và quy mô, vì vậy các loại hình ảnh động này phải luôn luôn được mong đợi là khó khăn. & NBSP;

05. Chữ ngã

• Như đã thấy trên: Trò chơi của năm (mở trong Tab mới)Game of the Year (opens in new tab)Game of the Year (opens in new tab)
• Tác giả: Leon Brown (Mở trong Tab mới) Leon brown (opens in new tab) Leon brown (opens in new tab)

Trò chơi của năm của Google có một hoạt hình CSS vui tươi trên trang chủ, với các từ tiêu đề lộn xộn và va vào nhau. Đây là cách nó đã được thực hiện. & Nbsp;

Bước đầu tiên là xác định tài liệu trang web với HTML. Nó bao gồm các thùng chứa tài liệu HTML, nơi lưu trữ phần đầu và phần thân. Mặc dù phần đầu được sử dụng để tải các tài nguyên CSS và JavaScript bên ngoài, phần thân được sử dụng để lưu trữ nội dung trang.

<!DOCTYPE html>
<html>
<head>
<title>Off Kilter Text Animation</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script srx="code.js"></script>
</head>
<body>
  <h2 class="animate backwards">The Animated Title</h2>
  <h2 class="animate forwards">The Animated Title</h2>
  <h2 class="animate mixed">The Animated Title </h2>
</body>
</html>

Nội dung trang bao gồm ba thẻ tiêu đề H2 sẽ hiển thị các biến thể khác nhau của hiệu ứng hoạt hình. Mặc dù bất kỳ văn bản nào cũng có thể được chèn vào các thẻ này, hoạt hình của chúng được xác định bởi các tên trong thuộc tính lớp. Các cài đặt trình bày và hoạt hình cho các tên lớp này sẽ được xác định trong CSS sau này.

Tiếp theo, tạo một tệp mới có tên 'Code.js'. Chúng tôi muốn tìm tất cả các thành phần trang với lớp Animate và tạo một danh sách mảng đại diện cho từng từ của văn bản bên trong. Độ trễ hoạt hình ban đầu cũng được xác định trong bước này. Nội dung trang không có sẵn cho đến khi trang được tải đầy đủ, vì vậy mã này đang được đặt bên trong trình nghe sự kiện tải cửa sổ.code.js'. We want to find all page elements with the animate class and create an array list representing each word of the inner text. The initial animation delay is also defined in this step. Page content is not available until the page has fully loaded, so this code is being placed inside the window’s load event listener.code.js'. We want to find all page elements with the animate class and create an array list representing each word of the inner text. The initial animation delay is also defined in this step. Page content is not available until the page has fully loaded, so this code is being placed inside the window’s load event listener.

Nội dung từ của các mục hoạt hình cần được chứa bên trong một phần tử nhịp. Để thực hiện điều này, nội dung HTML hiện tại được đặt lại để trống, sau đó một vòng lặp được sử dụng để tạo từ trong danh sách 'từ' được xác định là một phần tử nhịp. Ngoài ra, một kiểu hình ảnh động được áp dụng - được tính toán liên quan đến độ trễ ban đầu (được chỉ định bên dưới) và vị trí chỉ mục từ.span element. To do this, the existing HTML content is reset to blank, then a loop is used to make the word in the identified 'words' list a span element. Additionally, an animationDelay style is applied – calculated in relation to the initial delay (specified below) and the word’s index position.span element. To do this, the existing HTML content is reset to blank, then a loop is used to make the word in the identified 'words' list a span element. Additionally, an animationDelay style is applied – calculated in relation to the initial delay (specified below) and the word’s index position.

window.addEventListener("load", function(){
	var delay = 2;
	var nodes = document.querySelectorAll
(".animate");
	for(var i=0; i<nodes.length; i++){
		var words = nodes[i].innerText.split(" ");
		nodes[i].innerHTML = "";
for(var i2=0; i2<words.length; i2++){
			var item = document.createElement("span");
			item.innerText = words[i2];
			var calc = (delay+((nodes.length + i2)/3));
	item.style.animationDelay = calc+"s";
			nodes[i].appendChild(item);
}
	}
});

Tạo một tệp mới có tên style.css. Bây giờ chúng tôi sẽ đặt các quy tắc trình bày sẽ là một phần của mọi yếu tố từ trong hình ảnh động, được kiểm soát bởi thẻ nhịp của chúng. Hiển thị dưới dạng khối, kết hợp với căn chỉnh văn bản tập trung, sẽ dẫn đến mỗi từ xuất hiện trên một dòng riêng biệt được căn chỉnh theo chiều ngang đến giữa thùng chứa của nó. Định vị tương đối sẽ được sử dụng để sinh động liên quan đến vị trí dòng văn bản của nó.styles.css. Now we'll set the presentation rules that will be part of every word element in the animation, controlled by their span tag. Display as block, combined with centred text alignment, will result in each word appearing on a separate line horizontally aligned to the middle of its container. Relative positioning will be used to animate in relation to its text-flow position.styles.css. Now we'll set the presentation rules that will be part of every word element in the animation, controlled by their span tag. Display as block, combined with centred text alignment, will result in each word appearing on a separate line horizontally aligned to the middle of its container. Relative positioning will be used to animate in relation to its text-flow position.

.animate span{
	display: block;
	position: relative;
	text-align: center;
}

Các yếu tố hoạt hình có lớp ngược và chuyển tiếp có một hình ảnh động cụ thể được áp dụng cho chúng. Bước này xác định hình ảnh động để áp dụng cho các phần tử nhịp có thùng chứa cha mẹ có cả lớp animate và lùi hoặc chuyển tiếp. & NBSP;animate and backwards or forwards class. animate and backwards or forwards class. 

Lưu ý làm thế nào không có khoảng trống giữa tham chiếu lớp Animate và Backwards, có nghĩa là phần tử cha phải có cả hai.animate and backwards class reference, meaning the parent element must have both.animate and backwards class reference, meaning the parent element must have both.

.demo {
  background-color: hsl(207, 9%, 19%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

.perspective-container {
  perspective: 800px;
}

Hoạt hình hỗn hợp được xác định bằng cách sử dụng các cài đặt tương tự được sử dụng cho các hình ảnh động về phía trước và phía sau. Thay vì áp dụng hình ảnh động cho mọi đứa trẻ của cha mẹ, bộ chọn thứ n-con được sử dụng để áp dụng các cài đặt hoạt hình xen kẽ. Hoạt hình ngược được áp dụng cho mọi trẻ em chẵn, trong khi hoạt hình phía trước được áp dụng cho mọi đứa trẻ số lẻ.nth-child selector is used to apply alternating animation settings. The backwards animation is applied to every even-number child, while the forwards animation is applied to every odd-number child.nth-child selector is used to apply alternating animation settings. The backwards animation is applied to every even-number child, while the forwards animation is applied to every odd-number child.

.demo {
  background-color: hsl(207, 9%, 19%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

.perspective-container {
  perspective: 800px;
}

Các hình ảnh động mà chúng tôi vừa tạo được thực hiện với vị trí bắt đầu 'từ' ban đầu, không có vị trí dọc hoặc điều chỉnh xoay. Vị trí 'đến' là trạng thái cuối cùng của hình ảnh động, đặt các phần tử có vị trí dọc và trạng thái xoay được điều chỉnh. Cài đặt kết thúc hơi khác nhau được sử dụng cho cả hai hình ảnh động để tránh văn bản trở nên không thể đọc được do sự chồng chéo trong các hình ảnh động hỗn hợp.from' starting position, with no vertical position or rotation adjustment. The 'to' position is the final state of the animation, which sets the elements with an adjusted vertical position and rotation state. Slightly different ending settings are used for both animations to avoid the text becoming unreadable due to overlap in mixed animations.from' starting position, with no vertical position or rotation adjustment. The 'to' position is the final state of the animation, which sets the elements with an adjusted vertical position and rotation state. Slightly different ending settings are used for both animations to avoid the text becoming unreadable due to overlap in mixed animations.

.demo {
  background-color: hsl(207, 9%, 19%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

.perspective-container {
  perspective: 800px;
}

06. Cuốn sách lật

• Tác giả: Adam KuhnAdam KuhnAdam Kuhn

Khi hoạt hình với CSS đôi khi một cách tiếp cận đơn giản chết là cần thiết. Và có một vài phương pháp hoạt hình đơn giản hơn cuốn sách lật. Sử dụng các bước () làm hàm thời gian của chúng tôi, chúng tôi có thể sao chép hiệu ứng này. Mặc dù điều này nghe có vẻ khó khăn và mâu thuẫn trực tiếp với nhiệm vụ của chúng tôi để duy trì tính trôi chảy, với nhịp độ đúng, nó có thể cảm thấy giống như hữu cơ.steps () as our timing function, we are able to replicate this effect. While this might sound choppy and directly contradict our mission to maintain fluidity, with the right pacing it can feel just as seamlessly organic.steps () as our timing function, we are able to replicate this effect. While this might sound choppy and directly contradict our mission to maintain fluidity, with the right pacing it can feel just as seamlessly organic.

Vì vậy, làm thế nào nó hoạt động? Chúng tôi xác định chức năng nới lỏng hoạt hình của chúng tôi chỉ bằng một vài tham số bổ sung - cho biết hoạt hình của chúng tôi có bao nhiêu bước cần thiết và tại thời điểm đó trong bước đầu tiên chúng tôi muốn bắt đầu (bắt đầu, kết thúc) - ví dụ như các bước như thế này, ví dụ như các bước (10, bắt đầu).(start, end) – looking a little like this, for example steps (10, start).(start, end) – looking a little like this, for example steps (10, start).

Trong các khung chính của chúng tôi, giờ đây chúng tôi có thể chỉ định một điểm cuối cùng cho hoạt hình của chúng tôi: Ví dụ này, hãy giả sử hoạt hình của chúng tôi dài 10 giây và chúng tôi sử dụng 10 bước. Trong trường hợp này, mỗi bước sẽ dài một giây, ngay lập tức chuyển sang khung một giây sau không chuyển đổi giữa.

Một lần nữa, điều này dường như bay vào mặt trôi chảy, nhưng ở đây, nơi mà các hoạt hình bước thực sự có thể thực sự tỏa sáng. Chúng ta có thể lặp đi lặp lại thông qua một tờ sprite và kích thích từng khung hình giống như một cuốn sách lật. Bằng cách xác định các khung có kích thước bằng nhau nhưng biên dịch chúng vào một hình ảnh ngang (hoặc dọc), chúng ta có thể đặt hình ảnh này làm nền phần tử và xác định vị trí nền pixel hoặc phần trăm là điểm cuối của hoạt hình của chúng ta, cho phép một bước duy nhất cho mỗi khung. Tờ sprite sau đó sẽ thay đổi và điền vào khung phần tử theo khung với một hình ảnh nền mới dựa trên vị trí của nó.

Hãy cùng xem một ví dụ. Trong trường hợp này, một số bộ chân hoạt hình được thêm vào một số ký tự văn bản. Đầu tiên, chúng tôi sẽ xác định tên hoạt hình, thời lượng, số bước, vị trí bắt đầu và số lần lặp: & nbsp;

.demo {
  background-color: hsl(207, 9%, 19%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

.perspective-container {
  perspective: 800px;
}

Một lần nữa, lưu ý rằng thời lượng tương đối nhanh ở mức dưới một giây đầy đủ cho 32 khung hình. Tiếp theo, chúng tôi sẽ xác định các khung chính của chúng tôi: & nbsp;

.demo {
  background-color: hsl(207, 9%, 19%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

.perspective-container {
  perspective: 800px;
}

Lưu ý rằng vị trí thẳng đứng của hình ảnh là nhất quán trong suốt, cho chúng ta biết rằng các sprites được kéo dài theo chiều ngang trên hình ảnh, có tổng chiều rộng 1280px. Vì chúng tôi đã xác định 32 khung hình cho hình ảnh đó, chúng tôi có thể suy ra rằng mỗi khung hình phải rộng 40px. Kiểm tra mã hóa này dưới đây.

Điều quan trọng cần lưu ý là một tấm sprite lớn có khả năng có thể là một lực cản nghiêm trọng về hiệu suất, vì vậy hãy chắc chắn kích thước và nén hình ảnh. Với một tấm sprite được chế tạo tốt và thời lượng hoạt hình thích hợp, giờ đây bạn có một hình ảnh động trơn tru có thể truyền tải các chuyển động phức tạp.

07. Bong bóng thổi

• Như đã thấy trên: 7up & nbsp; (Mở trong tab mới)7UP  (opens in new tab)7UP  (opens in new tab)
• Xem mã (mở trong tab mới) (opens in new tab) (opens in new tab)
• Tác giả: Steven Roberts & NBSP; (Mở trong tab mới) Steven Roberts  (opens in new tab) Steven Roberts  (opens in new tab)

Hoạt hình Bubble Bubble có tính năng trên 7UP là một ví dụ tuyệt vời về việc mang chủ đề thương hiệu vào thiết kế trang web. Hoạt hình bao gồm một vài yếu tố: SVG ‘Vẽ của các bong bóng và sau đó hai hình ảnh động được áp dụng cho mỗi bong bóng. & NBSP;

Hoạt hình đầu tiên thay đổi độ mờ của bong bóng và di chuyển nó theo chiều dọc trong hộp xem; Thứ hai tạo ra hiệu ứng chao đảo để thêm hiện thực. Các độ lệch được xử lý bằng cách nhắm mục tiêu từng bong bóng và áp dụng thời lượng hoạt hình và độ trễ khác nhau.

Để tạo bong bóng của chúng tôi, chúng tôi sẽ sử dụng SVG (mở trong tab mới). Trong SVG của chúng tôi, chúng tôi tạo ra hai lớp bong bóng: một cho các bong bóng lớn hơn và một cho các bong bóng nhỏ hơn. Bên trong SVG, chúng tôi định vị tất cả các bong bóng của chúng tôi ở dưới cùng của hộp xem. (opens in new tab). In our SVG we create two layers of bubbles: one for the larger bubbles and one for the smaller bubbles. Inside the SVG we position all of our bubbles at the bottom of the view box. (opens in new tab). In our SVG we create two layers of bubbles: one for the larger bubbles and one for the smaller bubbles. Inside the SVG we position all of our bubbles at the bottom of the view box.

.demo {
  background-color: hsl(207, 9%, 19%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

.perspective-container {
  perspective: 800px;
}

Để áp dụng hai hình ảnh động riêng biệt cho SVG của chúng tôi, cả hai đều sử dụng thuộc tính Transform, chúng tôi cần áp dụng các hình ảnh động vào các yếu tố riêng biệt. Phần tử trong SVG có thể được sử dụng giống như Div trong HTML; Chúng ta cần bao bọc từng bong bóng của mình (đã ở trong một nhóm) trong một thẻ nhóm. element in SVG can be used much like a div in HTML; we need to wrap each of our bubbles (which are already in a group) in a group tag. element in SVG can be used much like a div in HTML; we need to wrap each of our bubbles (which are already in a group) in a group tag.

.demo {
  background-color: hsl(207, 9%, 19%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

.perspective-container {
  perspective: 800px;
}

CSS có một động cơ hoạt hình mạnh mẽ và mã thực sự đơn giản để tạo ra các hình ảnh động phức tạp. Chúng tôi sẽ bắt đầu với việc di chuyển các bong bóng lên màn hình và thay đổi độ mờ của chúng để làm mờ chúng vào và ra vào đầu và cuối của hoạt hình.

.demo {
  background-color: hsl(207, 9%, 19%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

.perspective-container {
  perspective: 800px;
}

Để tạo ra một hiệu ứng chao đảo, chúng ta chỉ cần di chuyển (hoặc dịch) bong bóng trái và phải, chỉ đúng một lượng - quá nhiều sẽ khiến hoạt hình trông quá vui vẻ và bị ngắt kết nối, trong khi quá ít sẽ không được chú ý. Thử nghiệm là chìa khóa khi làm việc với hoạt hình.

.demo {
  background-color: hsl(207, 9%, 19%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

.perspective-container {
  perspective: 800px;
}

Để áp dụng hình ảnh động cho bong bóng của chúng tôi, chúng tôi sẽ sử dụng các nhóm chúng tôi đã sử dụng trước đó và sự trợ giúp của loại thứ hai để xác định từng nhóm bong bóng riêng lẻ. Chúng tôi bắt đầu bằng cách áp dụng giá trị độ mờ cho bong bóng và thuộc tính thay đổi ý chí để sử dụng tăng tốc phần cứng.nth-of-type to identify each bubble group individually. We start by applying an opacity value to the bubbles and the will-change property in order to utilise hardware acceleration.nth-of-type to identify each bubble group individually. We start by applying an opacity value to the bubbles and the will-change property in order to utilise hardware acceleration.

.demo {
  background-color: hsl(207, 9%, 19%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

.perspective-container {
  perspective: 800px;
}

Chúng tôi muốn giữ tất cả thời gian hoạt hình và sự chậm trễ trong vòng một vài giây của nhau và đặt chúng để lặp lại vô hạn. Cuối cùng, chúng tôi áp dụng chức năng thời gian dễ dàng vào ngoài vào hoạt hình lắc lư của chúng tôi để làm cho nó trông tự nhiên hơn một chút.ease-in-out timing function to our wobble animation to make it look a little more natural.ease-in-out timing function to our wobble animation to make it look a little more natural.

.card {
  background-image: url(https://media.giphy.com/media/sIIhZliB2McAo/giphy.gif);
  background-size: cover;
  box-shadow: 0 0 140px 10px rgba(0,0,0,.5);
  position: relative;
  height: 300px;
  width: 500px;
  overflow: hidden; /* Try removing this to see how the sheen works! */
  --sheenX: 0; /* Set these with JavaScript */
  --sheenY: 0;
}

• Như đã thấy trên: Huấn luyện Baltic (Mở trong Tab mới)Baltic Training (opens in new tab)Baltic Training (opens in new tab)
• Xem mã (mở trong tab mới) (opens in new tab) (opens in new tab)
• Tác giả: Steven Roberts & NBSP; (Mở trong tab mới) Steven Roberts  (opens in new tab)Steven Roberts (opens in new tab)

Hoạt hình Bubble Bubble có tính năng trên 7UP là một ví dụ tuyệt vời về việc mang chủ đề thương hiệu vào thiết kế trang web. Hoạt hình bao gồm một vài yếu tố: SVG ‘Vẽ của các bong bóng và sau đó hai hình ảnh động được áp dụng cho mỗi bong bóng. & NBSP;

Hoạt hình đầu tiên thay đổi độ mờ của bong bóng và di chuyển nó theo chiều dọc trong hộp xem; Thứ hai tạo ra hiệu ứng chao đảo để thêm hiện thực. Các độ lệch được xử lý bằng cách nhắm mục tiêu từng bong bóng và áp dụng thời lượng hoạt hình và độ trễ khác nhau.

.card {
  background-image: url(https://media.giphy.com/media/sIIhZliB2McAo/giphy.gif);
  background-size: cover;
  box-shadow: 0 0 140px 10px rgba(0,0,0,.5);
  position: relative;
  height: 300px;
  width: 500px;
  overflow: hidden; /* Try removing this to see how the sheen works! */
  --sheenX: 0; /* Set these with JavaScript */
  --sheenY: 0;
}

Để tạo bong bóng của chúng tôi, chúng tôi sẽ sử dụng SVG (mở trong tab mới). Trong SVG của chúng tôi, chúng tôi tạo ra hai lớp bong bóng: một cho các bong bóng lớn hơn và một cho các bong bóng nhỏ hơn. Bên trong SVG, chúng tôi định vị tất cả các bong bóng của chúng tôi ở dưới cùng của hộp xem. (opens in new tab). In our SVG we create two layers of bubbles: one for the larger bubbles and one for the smaller bubbles. Inside the SVG we position all of our bubbles at the bottom of the view box.

.card {
  background-image: url(https://media.giphy.com/media/sIIhZliB2McAo/giphy.gif);
  background-size: cover;
  box-shadow: 0 0 140px 10px rgba(0,0,0,.5);
  position: relative;
  height: 300px;
  width: 500px;
  overflow: hidden; /* Try removing this to see how the sheen works! */
  --sheenX: 0; /* Set these with JavaScript */
  --sheenY: 0;
}

Để áp dụng hai hình ảnh động riêng biệt cho SVG của chúng tôi, cả hai đều sử dụng thuộc tính Transform, chúng tôi cần áp dụng các hình ảnh động vào các yếu tố riêng biệt. Phần tử trong SVG có thể được sử dụng giống như Div trong HTML; Chúng ta cần bao bọc từng bong bóng của mình (đã ở trong một nhóm) trong một thẻ nhóm. element in SVG can be used much like a div in HTML; we need to wrap each of our bubbles (which are already in a group) in a group tag.

.card {
  background-image: url(https://media.giphy.com/media/sIIhZliB2McAo/giphy.gif);
  background-size: cover;
  box-shadow: 0 0 140px 10px rgba(0,0,0,.5);
  position: relative;
  height: 300px;
  width: 500px;
  overflow: hidden; /* Try removing this to see how the sheen works! */
  --sheenX: 0; /* Set these with JavaScript */
  --sheenY: 0;
}

CSS có một động cơ hoạt hình mạnh mẽ và mã thực sự đơn giản để tạo ra các hình ảnh động phức tạp. Chúng tôi sẽ bắt đầu với việc di chuyển các bong bóng lên màn hình và thay đổi độ mờ của chúng để làm mờ chúng vào và ra vào đầu và cuối của hoạt hình.

.card {
  background-image: url(https://media.giphy.com/media/sIIhZliB2McAo/giphy.gif);
  background-size: cover;
  box-shadow: 0 0 140px 10px rgba(0,0,0,.5);
  position: relative;
  height: 300px;
  width: 500px;
  overflow: hidden; /* Try removing this to see how the sheen works! */
  --sheenX: 0; /* Set these with JavaScript */
  --sheenY: 0;
}

Cuối cùng, chúng tôi áp dụng hình ảnh động cho vòng tròn, cùng với thuộc tính ‘Transform-Origin, và thuộc tính thay đổi ý chí để cho phép tăng tốc phần cứng. Các thuộc tính hoạt hình khá tự giải thích. Hàm thời gian hình khối được sử dụng để đầu tiên kéo vòng tròn trở lại trước khi thả nó xuống dưới cùng của hình dạng chuột của chúng tôi; Điều này thêm một cảm giác vui tươi cho hoạt hình.will-change property to allow hardware acceleration. The animation properties are fairly self-explanatory. The cubic-bezier timing function is used to first pull the circle back before dropping it to the bottom of our mouse shape; this adds a playful feel to the animation.will-change property to allow hardware acceleration. The animation properties are fairly self-explanatory. The cubic-bezier timing function is used to first pull the circle back before dropping it to the bottom of our mouse shape; this adds a playful feel to the animation.

.card {
  background-image: url(https://media.giphy.com/media/sIIhZliB2McAo/giphy.gif);
  background-size: cover;
  box-shadow: 0 0 140px 10px rgba(0,0,0,.5);
  position: relative;
  height: 300px;
  width: 500px;
  overflow: hidden; /* Try removing this to see how the sheen works! */
  --sheenX: 0; /* Set these with JavaScript */
  --sheenY: 0;
}

09. Viết hoạt hình

(Mở trong tab mới)

• Như đã thấy trên: Garden Eight (Opens trong Tab mới)Garden Eight (opens in new tab)Garden Eight (opens in new tab)
• Xem mã cho các đường dẫn (mở trong tab mới) và văn bản (mở trong tab mới)paths (opens in new tab) and text (opens in new tab)paths (opens in new tab) and text (opens in new tab)
• Tác giả: Steven Roberts (Mở trong Tab mới)Steven Roberts (opens in new tab)Steven Roberts (opens in new tab)

Trang web Garden Eight sử dụng một kỹ thuật hoạt hình phổ biến, theo đó văn bản dường như được viết ra. Để đạt được hiệu quả, chúng tôi chuyển sang SVG. Để bắt đầu, chúng tôi sẽ tạo ra SVG. Có hai cách tiếp cận ở đây: chuyển đổi văn bản thành các đường dẫn để làm động chúng hoặc sử dụng văn bản SVG. Cả hai cách tiếp cận đều có ưu và nhược điểm của họ.

Bắt đầu bằng cách tạo hoạt hình KeyFrame của chúng tôi. Chức năng duy nhất chúng ta cần nó để thực hiện là thay đổi đột quỵ. Bây giờ chúng tôi đã tạo ra hoạt hình của mình, chúng tôi cần áp dụng các giá trị mà chúng tôi muốn làm động. Chúng tôi đặt Stroke-Dasharray, sẽ tạo ra những khoảng trống trong đột quỵ. Chúng tôi muốn đặt đột quỵ của chúng tôi là một giá trị đủ lớn để bao phủ toàn bộ phần tử, cuối cùng bù đắp cho dấu gạch ngang bằng chiều dài của đột quỵ.stroke-dashoffset. Now we’ve created our animation, we need to apply the values we want to animate from. We set the stroke-dasharray, which will create gaps in the stroke. We want to set our stroke to be a large enough value to cover the entire element, finally offsetting the dash by the length of the stroke.stroke-dashoffset. Now we’ve created our animation, we need to apply the values we want to animate from. We set the stroke-dasharray, which will create gaps in the stroke. We want to set our stroke to be a large enough value to cover the entire element, finally offsetting the dash by the length of the stroke.

Điều kỳ diệu xảy ra khi chúng ta áp dụng hoạt hình của chúng ta. Bằng cách hoạt hình phần bù, chúng tôi sẽ đưa đột quỵ vào chế độ xem - tạo hiệu ứng vẽ. Chúng tôi muốn các phần tử vẽ từng lần một, với một số sự chồng chéo giữa phần cuối của việc vẽ một phần tử và bắt đầu vẽ phần tiếp theo. Để đạt được điều này, chúng tôi chuyển sang SASS (mở trong Tab mới)/SCSS và loại thứ hai để trì hoãn mỗi chữ cái bằng một nửa chiều dài của hình ảnh động, nhân với vị trí của chữ cái cụ thể đó. (opens in new tab)/SCSS and nth-of-type to delay each letter by half the length of the animation, multiplied by the position of that particular letter. (opens in new tab)/SCSS and nth-of-type to delay each letter by half the length of the animation, multiplied by the position of that particular letter.

10. Chim bay

• Như đã thấy trên: Fournier Père et Fils (mở trong tab mới) Fournier Père et Fils (opens in new tab) Fournier Père et Fils (opens in new tab)
• Xem mã cho một con chim (mở trong tab mới) hoặc toàn bộ đàn (mở trong tab mới)single bird (opens in new tab) or the whole flock (opens in new tab)single bird (opens in new tab) or the whole flock (opens in new tab)
• Tác giả: Steven Roberts (Mở trong Tab mới)Steven Roberts (opens in new tab)Steven Roberts (opens in new tab)

Trang web Garden Eight sử dụng một kỹ thuật hoạt hình phổ biến, theo đó văn bản dường như được viết ra. Để đạt được hiệu quả, chúng tôi chuyển sang SVG. Để bắt đầu, chúng tôi sẽ tạo ra SVG. Có hai cách tiếp cận ở đây: chuyển đổi văn bản thành các đường dẫn để làm động chúng hoặc sử dụng văn bản SVG. Cả hai cách tiếp cận đều có ưu và nhược điểm của họ.

Bắt đầu bằng cách tạo hoạt hình KeyFrame của chúng tôi. Chức năng duy nhất chúng ta cần nó để thực hiện là thay đổi đột quỵ. Bây giờ chúng tôi đã tạo ra hoạt hình của mình, chúng tôi cần áp dụng các giá trị mà chúng tôi muốn làm động. Chúng tôi đặt Stroke-Dasharray, sẽ tạo ra những khoảng trống trong đột quỵ. Chúng tôi muốn đặt đột quỵ của chúng tôi là một giá trị đủ lớn để bao phủ toàn bộ phần tử, cuối cùng bù đắp cho dấu gạch ngang bằng chiều dài của đột quỵ.stroke-dashoffset. Now we’ve created our animation, we need to apply the values we want to animate from. We set the stroke-dasharray, which will create gaps in the stroke. We want to set our stroke to be a large enough value to cover the entire element, finally offsetting the dash by the length of the stroke.

.card {
  background-image: url(https://media.giphy.com/media/sIIhZliB2McAo/giphy.gif);
  background-size: cover;
  box-shadow: 0 0 140px 10px rgba(0,0,0,.5);
  position: relative;
  height: 300px;
  width: 500px;
  overflow: hidden; /* Try removing this to see how the sheen works! */
  --sheenX: 0; /* Set these with JavaScript */
  --sheenY: 0;
}

Điều kỳ diệu xảy ra khi chúng ta áp dụng hoạt hình của chúng ta. Bằng cách hoạt hình phần bù, chúng tôi sẽ đưa đột quỵ vào chế độ xem - tạo hiệu ứng vẽ. Chúng tôi muốn các phần tử vẽ từng lần một, với một số sự chồng chéo giữa phần cuối của việc vẽ một phần tử và bắt đầu vẽ phần tiếp theo. Để đạt được điều này, chúng tôi chuyển sang SASS (mở trong Tab mới)/SCSS và loại thứ hai để trì hoãn mỗi chữ cái bằng một nửa chiều dài của hình ảnh động, nhân với vị trí của chữ cái cụ thể đó. (opens in new tab)/SCSS and nth-of-type to delay each letter by half the length of the animation, multiplied by the position of that particular letter.

.card {
  background-image: url(https://media.giphy.com/media/sIIhZliB2McAo/giphy.gif);
  background-size: cover;
  box-shadow: 0 0 140px 10px rgba(0,0,0,.5);
  position: relative;
  height: 300px;
  width: 500px;
  overflow: hidden; /* Try removing this to see how the sheen works! */
  --sheenX: 0; /* Set these with JavaScript */
  --sheenY: 0;
}

10. Chim bayanimation-timing-function to show the image in steps – much like flicking through pages in a notebook to allude to animation.

.card {
  background-image: url(https://media.giphy.com/media/sIIhZliB2McAo/giphy.gif);
  background-size: cover;
  box-shadow: 0 0 140px 10px rgba(0,0,0,.5);
  position: relative;
  height: 300px;
  width: 500px;
  overflow: hidden; /* Try removing this to see how the sheen works! */
  --sheenX: 0; /* Set these with JavaScript */
  --sheenY: 0;
}

Như đã thấy trên: Fournier Père et Fils (mở trong tab mới) Fournier Père et Fils (opens in new tab)

Khi chúng tôi đã tạo ra hình ảnh động của mình, chúng tôi chỉ cần áp dụng chúng. Chúng tôi có thể & nbsp; tạo nhiều bản sao của chim và áp dụng thời gian hoạt hình và độ trễ khác nhau. & Nbsp;

.card {
  background-image: url(https://media.giphy.com/media/sIIhZliB2McAo/giphy.gif);
  background-size: cover;
  box-shadow: 0 0 140px 10px rgba(0,0,0,.5);
  position: relative;
  height: 300px;
  width: 500px;
  overflow: hidden; /* Try removing this to see how the sheen works! */
  --sheenX: 0; /* Set these with JavaScript */
  --sheenY: 0;
}

11. Băng qua chiếc bánh hamburger của tôi

• Như đã thấy trên: Cơ quan thương hiệu tốt hơn (Mở trong Tab mới)Better Brand Agency (opens in new tab)Better Brand Agency (opens in new tab)
• Xem mã cho các nhịp (mở trong tab mới) và SVG (mở trong tab mới)spans (opens in new tab) and SVG (opens in new tab)spans (opens in new tab) and SVG (opens in new tab)
• Tác giả: Steven Roberts (Mở trong Tab mới)Steven Roberts (opens in new tab)Steven Roberts (opens in new tab)

Hoạt hình này được sử dụng trên tất cả các trang web, biến ba dòng thành biểu tượng thập giá hoặc đóng. Cho đến gần đây, phần lớn các triển khai đã đạt được bằng cách sử dụng các phần tử HTML, nhưng thực sự SVG phù hợp hơn nhiều với loại hình ảnh động này - ở đó, không còn cần phải làm rõ mã nút của bạn với nhiều nhịp. & NBSP;

Do tính chất hoạt hình và SVG và DOM có thể điều hướng của nó, mã để thực hiện hoạt hình hoặc chuyển đổi thay đổi rất ít - kỹ thuật là như nhau. & NBSP;

Chúng tôi bắt đầu bằng cách tạo bốn yếu tố, có thể là bên trong một div hoặc các đường dẫn bên trong một SVG. Nếu chúng tôi sử dụng các nhịp, chúng tôi cần sử dụng CSS để định vị chúng bên trong Div; Nếu chúng tôi sử dụng SVG, thì đây là & NBSP; đã được chăm sóc. Chúng tôi muốn định vị các dòng 2 và 3 ở trung tâm - một ở đầu khác - trong khi khoảng cách & nbsp; dòng 1 và 4 đều ở trên và bên dưới, đảm bảo tập trung vào nguồn gốc biến đổi.

Chúng tôi sẽ dựa vào việc chuyển đổi hai thuộc tính: độ mờ và xoay. Trước hết, chúng tôi muốn làm mờ các dòng 1 và 4, mà chúng tôi có thể nhắm mục tiêu bằng cách sử dụng bộ chọn: con-con.:nth-child selector.:nth-child selector.

.card::after {
  content: "";
  position: absolute;
  top: -400px;
  right: -400px;
  bottom: -400px;
  left: -400px;
  background: linear-gradient(217deg, rgba(255,255,255,0), rgba(255,255,255,0) 35%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
  transform: translateX(var(--sheenX)) translateY(var(--sheenY));
}

Điều duy nhất còn lại để làm là nhắm mục tiêu hai dòng giữa và xoay chúng 45 độ theo hướng ngược lại.

.card::after {
  content: "";
  position: absolute;
  top: -400px;
  right: -400px;
  bottom: -400px;
  left: -400px;
  background: linear-gradient(217deg, rgba(255,255,255,0), rgba(255,255,255,0) 35%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
  transform: translateX(var(--sheenX)) translateY(var(--sheenY));
}

12. Vòng tròn theo đuổi

• Như đã thấy trên: Cơ quan thương hiệu tốt hơn (Mở trong Tab mới)Better Brand Agency (opens in new tab)Better Brand Agency (opens in new tab)
• Xem mã cho các nhịp (mở trong tab mới) và SVG (mở trong tab mới)spans (opens in new tab) and SVG (opens in new tab) (opens in new tab)
• Tác giả: Steven Roberts (Mở trong Tab mới)Steven Roberts (opens in new tab)Steven Roberts (opens in new tab)

Hoạt hình này được sử dụng trên tất cả các trang web, biến ba dòng thành biểu tượng thập giá hoặc đóng. Cho đến gần đây, phần lớn các triển khai đã đạt được bằng cách sử dụng các phần tử HTML, nhưng thực sự SVG phù hợp hơn nhiều với loại hình ảnh động này - ở đó, không còn cần phải làm rõ mã nút của bạn với nhiều nhịp. & NBSP;

.card::after {
  content: "";
  position: absolute;
  top: -400px;
  right: -400px;
  bottom: -400px;
  left: -400px;
  background: linear-gradient(217deg, rgba(255,255,255,0), rgba(255,255,255,0) 35%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
  transform: translateX(var(--sheenX)) translateY(var(--sheenY));
}

Do tính chất hoạt hình và SVG và DOM có thể điều hướng của nó, mã để thực hiện hoạt hình hoặc chuyển đổi thay đổi rất ít - kỹ thuật là như nhau. & NBSP;:nth-of-type selector to apply a different stroke-dasharray to each circle.

.card::after {
  content: "";
  position: absolute;
  top: -400px;
  right: -400px;
  bottom: -400px;
  left: -400px;
  background: linear-gradient(217deg, rgba(255,255,255,0), rgba(255,255,255,0) 35%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
  transform: translateX(var(--sheenX)) translateY(var(--sheenY));
}

Chúng tôi bắt đầu bằng cách tạo bốn yếu tố, có thể là bên trong một div hoặc các đường dẫn bên trong một SVG. Nếu chúng tôi sử dụng các nhịp, chúng tôi cần sử dụng CSS để định vị chúng bên trong Div; Nếu chúng tôi sử dụng SVG, thì đây là & NBSP; đã được chăm sóc. Chúng tôi muốn định vị các dòng 2 và 3 ở trung tâm - một ở đầu khác - trong khi khoảng cách & nbsp; dòng 1 và 4 đều ở trên và bên dưới, đảm bảo tập trung vào nguồn gốc biến đổi.

.card::after {
  content: "";
  position: absolute;
  top: -400px;
  right: -400px;
  bottom: -400px;
  left: -400px;
  background: linear-gradient(217deg, rgba(255,255,255,0), rgba(255,255,255,0) 35%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
  transform: translateX(var(--sheenX)) translateY(var(--sheenY));
}

Chúng tôi sẽ dựa vào việc chuyển đổi hai thuộc tính: độ mờ và xoay. Trước hết, chúng tôi muốn làm mờ các dòng 1 và 4, mà chúng tôi có thể nhắm mục tiêu bằng cách sử dụng bộ chọn: con-con.:nth-child selector.

.card::after {
  content: "";
  position: absolute;
  top: -400px;
  right: -400px;
  bottom: -400px;
  left: -400px;
  background: linear-gradient(217deg, rgba(255,255,255,0), rgba(255,255,255,0) 35%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
  transform: translateX(var(--sheenX)) translateY(var(--sheenY));
}

Điều duy nhất còn lại để làm là nhắm mục tiêu hai dòng giữa và xoay chúng 45 độ theo hướng ngược lại.

.card::after {
  content: "";
  position: absolute;
  top: -400px;
  right: -400px;
  bottom: -400px;
  left: -400px;
  background: linear-gradient(217deg, rgba(255,255,255,0), rgba(255,255,255,0) 35%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
  transform: translateX(var(--sheenX)) translateY(var(--sheenY));
}

12. Vòng tròn theo đuổi

.card::after {
  content: "";
  position: absolute;
  top: -400px;
  right: -400px;
  bottom: -400px;
  left: -400px;
  background: linear-gradient(217deg, rgba(255,255,255,0), rgba(255,255,255,0) 35%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
  transform: translateX(var(--sheenX)) translateY(var(--sheenY));
}

Xem mã cho các nhịp (mở trong tab mới) và SVG (mở trong tab mới) (opens in new tab)

• Do tính chất hoạt hình và SVG và DOM có thể điều hướng của nó, mã để thực hiện hoạt hình hoặc chuyển đổi thay đổi rất ít - kỹ thuật là như nhau. & NBSP;:nth-of-type selector to apply a different stroke-dasharray to each circle.Adam Kuhn

Chúng tôi sẽ dựa vào việc chuyển đổi hai thuộc tính: độ mờ và xoay. Trước hết, chúng tôi muốn làm mờ các dòng 1 và 4, mà chúng tôi có thể nhắm mục tiêu bằng cách sử dụng bộ chọn: con-con.offset-path and clip-path. For instance, using offset-path we can define (and even hand draw) an SVG path and adjust our offset-distance (or in the case of legacy browsers, motion-offset) to allow our elements to move around our defined path.

Xem mã (mở trong tab mới)

.card::after {
  content: "";
  position: absolute;
  top: -400px;
  right: -400px;
  bottom: -400px;
  left: -400px;
  background: linear-gradient(217deg, rgba(255,255,255,0), rgba(255,255,255,0) 35%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
  transform: translateX(var(--sheenX)) translateY(var(--sheenY));
}

Biểu tượng tải hoạt hình được tạo thành từ bốn vòng tròn. Các vòng tròn không có điền, nhưng có màu đột quỵ xen kẽ.Adam Kuhnoffset-path animations do not accept relative units. 

Hiện tại, chúng tôi có trình tải của chúng tôi, nhưng tất cả các yếu tố đang quay cùng nhau cùng một lúc. Để khắc phục điều này, chúng tôi sẽ áp dụng một số sự chậm trễ. Chúng tôi sẽ tạo ra sự chậm trễ của chúng tôi bằng cách sử dụng SASS cho Loop.clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%) to clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%); and smoothly transition a square into a triangle – a feat otherwise near impossible with CSS. 

Do sự chậm trễ, lần lượt, vòng tròn của chúng tôi hoạt hình, tạo ra ảo ảnh về các vòng tròn đuổi theo nhau. Vấn đề duy nhất với điều này là khi trang đầu tiên tải, các vòng tròn là tĩnh, sau đó chúng bắt đầu di chuyển, từng lần một. Chúng ta có thể đạt được hiệu ứng bù tương tự, nhưng hãy dừng tạm dừng không mong muốn trong hoạt hình của chúng ta bằng cách đặt độ trễ thành một giá trị âm.clip-path: the number of points on the path must remain equal for both the beginning and ending shapes. For an easy way to visualise how clip-path will animate check out Bennett Feely’s Clippy (opens in new tab).

13. Tắt con đường bị đánh đập

Và ví dụ về đường dẫn đầu tiên ánh sáng đầu tiên:clip-path example First Light:

14. Các chữ cái xuất hiện ngẫu nhiên

• Như đã thấy trên: bất đồng quan điểm hạt nhân (mở trong tab mới)Nuclear Dissent (opens in new tab)

Jam3 (mở trong tab mới) đã sử dụng JavaScript và CSS để tạo lớp phủ nội dung hoạt hình cho nền video toàn màn hình trên trang web của mình bất đồng quan điểm hạt nhân. & NBSP; (opens in new tab) used JavaScript and CSS to create an animated content overlay for a full-screen video background on its site Nuclear Dissent. 

Để sao chép hoạt hình CSS này, bước đầu tiên là bắt đầu cấu trúc của tài liệu HTML. Điều này bao gồm các thùng chứa tài liệu lưu trữ các phần đầu và cơ thể. Mặc dù phần đầu được sử dụng để tải các tài nguyên CSS và JavaScript bên ngoài, phần thân sẽ chứa nội dung trang có thể nhìn thấy được tạo trong bước tiếp theo.

Nội dung trang tiền cảnh được đặt bên trong thùng chứa chính để cung cấp lợi thế của việc kiểm soát dễ dàng lưu lượng nội dung. Phần tử văn bản có lớp lớp phủ được áp dụng để nó có thể được tham chiếu bởi JavaScript và CSS để áp dụng hoạt hình văn bản. Nhiều yếu tố có thể có hình ảnh động được áp dụng bằng cách sử dụng lớp lớp phủ.main container to deliver the advantage of easy control of content flow. The text element has the overlay class applied so that it can be referenced by the JavaScript and CSS for applying the text animation. Multiple elements can have the animation applied by using the overlay class.

.card::after {
  content: "";
  position: absolute;
  top: -400px;
  right: -400px;
  bottom: -400px;
  left: -400px;
  background: linear-gradient(217deg, rgba(255,255,255,0), rgba(255,255,255,0) 35%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
  transform: translateX(var(--sheenX)) translateY(var(--sheenY));
}

Phần cuối cùng của HTML là xác định phần tử video nền. Không phải tất cả các trình duyệt đều có thể hỗ trợ từng tiêu chuẩn video, do đó cần phải chỉ định các nguồn khác nhau. Trình duyệt sẽ hiển thị nguồn đầu tiên mà nó có thể hỗ trợ. Hãy lưu ý về cách phần tử video có các thuộc tính autoplay, tắt tiếng và vòng lặp được áp dụng để nó tự động phát và lặp lại mà không có âm thanh.autoplay, muted and loop attributes applied so that it automatically plays and repeats without sound.

function handleMouseMove(event) {
  const height = window.innerHeight;
  const width = window.innerWidth;
  // Creates angles of (-20, -20) (left, bottom) and (20, 20) (right, top)
  const yAxisDegree = event.pageX / width * 40 - 20;
  const xAxisDegree = event.pageY / height * -1 * 40 + 20;
  target.style.transform = `rotateY(${yAxisDegree}deg) rotateX(${xAxisDegree}deg)`;
  // Set the sheen position
  setSheenPosition(event.pageX / width, event.pageY / width);
}

Tạo một tệp mới có tên style.css. Bước đầu tiên trong tệp này & nbsp; là xác định các thuộc tính của thùng chứa nội dung chính. Cài đặt mặc định cho phông chữ và màu sắc là & nbsp; được áp dụng cho nội dung con để kế thừa. Các giá trị tự động được áp dụng cho các lề bên để nội dung con & nbsp; xuất hiện căn chỉnh tập trung.styles.css. The first step in this file is to define the properties of the main content container. Default settings for font and colour are applied for child content to inherit. Auto values are applied to the side margins so that child content appears centrally aligned.

function handleMouseMove(event) {
  const height = window.innerHeight;
  const width = window.innerWidth;
  // Creates angles of (-20, -20) (left, bottom) and (20, 20) (right, top)
  const yAxisDegree = event.pageX / width * 40 - 20;
  const xAxisDegree = event.pageY / height * -1 * 40 + 20;
  target.style.transform = `rotateY(${yAxisDegree}deg) rotateX(${xAxisDegree}deg)`;
  // Set the sheen position
  setSheenPosition(event.pageX / width, event.pageY / width);
}

Yếu tố nền yêu cầu kiểu dáng cụ thể để hiệu ứng hoạt động. Đầu tiên, định vị cố định là rất quan trọng để đảm bảo rằng nó ở cùng một vị trí nếu người dùng cuộn trang. Thứ hai, nó phải sử dụng chỉ số Z phủ định sẽ đảm bảo vị trí của nó bên dưới nội dung trang chính. Biến đổi và kích thước cũng được sử dụng để đặt kích thước và vị trí phần tử để bao phủ cửa sổ toàn trang.z-index that will guarantee its position underneath the main page content. Transform and size are also used to set the element’s size and location to cover the full-page window.

function handleMouseMove(event) {
  const height = window.innerHeight;
  const width = window.innerWidth;
  // Creates angles of (-20, -20) (left, bottom) and (20, 20) (right, top)
  const yAxisDegree = event.pageX / width * 40 - 20;
  const xAxisDegree = event.pageY / height * -1 * 40 + 20;
  target.style.transform = `rotateY(${yAxisDegree}deg) rotateX(${xAxisDegree}deg)`;
  // Set the sheen position
  setSheenPosition(event.pageX / width, event.pageY / width);
}

Phần tử lớp phủ sẽ được JavaScript thao tác để phân chia từng chữ cái của nội dung văn bản của nó để được gói bởi thẻ nhịp. Điều này cho phép các chữ cái riêng lẻ được hoạt hình thông qua CSS. Đầu tiên, các cài đặt mặc định cho các chữ cái nhịp được xác định là có định vị tương đối, độ mờ vô hình và hoạt hình AnimateOverlay được áp dụng. Thứ hai, sự chậm trễ cho hoạt hình của họ được áp dụng dựa trên định vị con của họ.overlay element will be manipulated by JavaScript to split each letter of its text content to be wrapped by a span tag. This allows individual letters to be animated via CSS. Firstly, the default settings for the span letters are defined to have relative positioning, invisible opacity and an applied animateOverlay animation. Secondly, a delay to their animation is applied based on their child positioning.

function handleMouseMove(event) {
  const height = window.innerHeight;
  const width = window.innerWidth;
  // Creates angles of (-20, -20) (left, bottom) and (20, 20) (right, top)
  const yAxisDegree = event.pageX / width * 40 - 20;
  const xAxisDegree = event.pageY / height * -1 * 40 + 20;
  target.style.transform = `rotateY(${yAxisDegree}deg) rotateX(${xAxisDegree}deg)`;
  // Set the sheen position
  setSheenPosition(event.pageX / width, event.pageY / width);
}

Hoạt hình được áp dụng cho mỗi phần tử nhịp chỉ bao gồm một khung mà các yếu tố sẽ hoạt động theo hướng. Điều này đặt độ mờ đục của họ để trở nên hoàn toàn nhìn thấy được, cùng với vị trí dọc của họ để hoạt động theo vị trí dòng văn bản mặc định của họ. Hãy lưu ý cách Bước 6 đặt từng phần tử nhịp được đẩy xuống 1EM.

function handleMouseMove(event) {
  const height = window.innerHeight;
  const width = window.innerWidth;
  // Creates angles of (-20, -20) (left, bottom) and (20, 20) (right, top)
  const yAxisDegree = event.pageX / width * 40 - 20;
  const xAxisDegree = event.pageY / height * -1 * 40 + 20;
  target.style.transform = `rotateY(${yAxisDegree}deg) rotateX(${xAxisDegree}deg)`;
  // Set the sheen position
  setSheenPosition(event.pageX / width, event.pageY / width);
}

Tạo một tệp mới có tên Code.js. Bước đầu tiên này sẽ & nbsp; Tìm kiếm tất cả các phần tử bằng cách sử dụng lớp lớp phủ - trong đó một vòng lặp được sử dụng để áp dụng mã sau này. Các yếu tố này không có sẵn cho đến sau trang & nbsp; đã tải, vì vậy chúng cần được đặt bên trong trình nghe sự kiện trong cửa sổ trình duyệt được kích hoạt khi hoàn thành tải.code.js. This first step will search for all of the elements using the overlay class – of which a for loop is used to apply the code later on. These elements are not available until after the page has loaded, so they need to be placed inside an event listener in the browser window that is triggered on its load completion.code.js. This first step will search for all of the elements using the overlay class – of which a for loop is used to apply the code later on. These elements are not available until after the page has loaded, so they need to be placed inside an event listener in the browser window that is triggered on its load completion.

function handleMouseMove(event) {
  const height = window.innerHeight;
  const width = window.innerWidth;
  // Creates angles of (-20, -20) (left, bottom) and (20, 20) (right, top)
  const yAxisDegree = event.pageX / width * 40 - 20;
  const xAxisDegree = event.pageY / height * -1 * 40 + 20;
  target.style.transform = `rotateY(${yAxisDegree}deg) rotateX(${xAxisDegree}deg)`;
  // Set the sheen position
  setSheenPosition(event.pageX / width, event.pageY / width);
}

Mỗi phần tử được tìm thấy ở đây cần phải có nội dung HTML được xác định lại để mỗi chữ cái nằm trong một phần tử nhịp. Điều này đạt được bằng cách đọc văn bản thuần túy của nó bằng cách sử dụng Internaltext, và sau đó sử dụng một vòng thứ hai cho vòng lặp để thêm từng chữ cái vào phiên bản mới của HTML - hoàn thành trong thẻ nhịp của nó. Sau khi mỗi chữ cái được đọc, nút mẹ bên trong bên trong được cập nhật với HTML mới.innerText, and then using a second for loop to individually add each letter to the new version of the HTML – complete within its span tag. After each letter has been read, the parent node’s innerHTML is updated with the new HTML.innerText, and then using a second for loop to individually add each letter to the new version of the HTML – complete within its span tag. After each letter has been read, the parent node’s innerHTML is updated with the new HTML.

function handleMouseMove(event) {
  const height = window.innerHeight;
  const width = window.innerWidth;
  // Creates angles of (-20, -20) (left, bottom) and (20, 20) (right, top)
  const yAxisDegree = event.pageX / width * 40 - 20;
  const xAxisDegree = event.pageY / height * -1 * 40 + 20;
  target.style.transform = `rotateY(${yAxisDegree}deg) rotateX(${xAxisDegree}deg)`;
  // Set the sheen position
  setSheenPosition(event.pageX / width, event.pageY / width);
}

15. Tuyết rơi

• Như đã thấy trên: USA Today (mở trong Tab mới)USA Today (opens in new tab)USA Today (opens in new tab)
• Xem mã (mở trong tab mới) (opens in new tab) (opens in new tab)
• Tác giả: Steven Roberts (Mở trong Tab mới)Steven Roberts (opens in new tab)Steven Roberts (opens in new tab)

Ví dụ hoạt hình CSS Snow CSS này được tạo ra bằng SVG và kỹ thuật này rất giống với cách chúng tôi tạo ra các bong bóng trước đó. Để bắt đầu, chúng tôi tạo hai lớp vòng tròn & nbsp; bên trong một svg, sau đó chúng tôi làm động hai lớp đó bằng cách dịch y & nbsp; giá trị với hoạt hình keyframe. & Nbsp;

Chúng tôi & nbsp; áp dụng hoạt hình cho từng lớp thay vì các yếu tố riêng lẻ và sử dụng lại cùng một hình ảnh động cho cả hai lớp. Bằng cách đơn giản là cho họ thời lượng khác nhau, chúng ta có thể thêm một số chiều sâu vào cảnh của chúng ta.

16. Vòng tròn xung

• Như đã thấy trên: Peekabeat (Mở trong Tab mới)PeekaBeat (opens in new tab)PeekaBeat (opens in new tab)
• Xem mã (mở trong tab mới) (opens in new tab) (opens in new tab)
• Tác giả: Steven Roberts (Mở trong Tab mới)Steven Roberts (opens in new tab)Steven Roberts 

Ví dụ hoạt hình CSS Snow CSS này được tạo ra bằng SVG và kỹ thuật này rất giống với cách chúng tôi tạo ra các bong bóng trước đó. Để bắt đầu, chúng tôi tạo hai lớp vòng tròn & nbsp; bên trong một svg, sau đó chúng tôi làm động hai lớp đó bằng cách dịch y & nbsp; giá trị với hoạt hình keyframe. & Nbsp;

Chúng tôi & nbsp; áp dụng hoạt hình cho từng lớp thay vì các yếu tố riêng lẻ và sử dụng lại cùng một hình ảnh động cho cả hai lớp. Bằng cách đơn giản là cho họ thời lượng khác nhau, chúng ta có thể thêm một số chiều sâu vào cảnh của chúng ta.

16. Vòng tròn xung (opens in new tab), designer and developer Mark Shufflebottom walks through the process. You'll also use CSS Grid (opens in new tab) to position elements on the screen. 

Như đã thấy trên: Peekabeat (Mở trong Tab mới)PeekaBeat (opens in new tab)

• Tác giả: Steven Roberts (Mở trong Tab mới)Steven Roberts A Violent Act (opens in new tab)
• Xem mã (mở trong tab mới) (opens in new tab) (opens in new tab)
• Tác giả: Steven Roberts (Mở trong Tab mới)Steven Roberts (opens in new tab) Steven Roberts

Ví dụ hoạt hình CSS Snow CSS này được tạo ra bằng SVG và kỹ thuật này rất giống với cách chúng tôi tạo ra các bong bóng trước đó. Để bắt đầu, chúng tôi tạo hai lớp vòng tròn & nbsp; bên trong một svg, sau đó chúng tôi làm động hai lớp đó bằng cách dịch y & nbsp; giá trị với hoạt hình keyframe. & Nbsp;

Chúng tôi & nbsp; áp dụng hoạt hình cho từng lớp thay vì các yếu tố riêng lẻ và sử dụng lại cùng một hình ảnh động cho cả hai lớp. Bằng cách đơn giản là cho họ thời lượng khác nhau, chúng ta có thể thêm một số chiều sâu vào cảnh của chúng ta.

• 16. Vòng tròn xungDaInk (opens in new tab)
• Xem mã (mở trong tab mới) (opens in new tab) (opens in new tab)
• Tác giả: Steven Roberts (Mở trong Tab mới)Steven Roberts (opens in new tab)Steven Roberts

Ví dụ hoạt hình CSS Snow CSS này được tạo ra bằng SVG và kỹ thuật này rất giống với cách chúng tôi tạo ra các bong bóng trước đó. Để bắt đầu, chúng tôi tạo hai lớp vòng tròn & nbsp; bên trong một svg, sau đó chúng tôi làm động hai lớp đó bằng cách dịch y & nbsp; giá trị với hoạt hình keyframe. & Nbsp;

Chúng tôi & nbsp; áp dụng hoạt hình cho từng lớp thay vì các yếu tố riêng lẻ và sử dụng lại cùng một hình ảnh động cho cả hai lớp. Bằng cách đơn giản là cho họ thời lượng khác nhau, chúng ta có thể thêm một số chiều sâu vào cảnh của chúng ta.nth-of-type, we apply delays, offsetting each by 75ms from the last to create a smooth transition.

Như đã thấy trên: Daink (mở trong tab mới)

• Trang web của Daink sử dụng một kỹ thuật thực sự hiệu quả để chuyển đổi giữa các trang. Việc chuyển đổi rất đơn giản và bao gồm một SVG chứa một số hình chữ nhật có kích thước khác nhau có màu khác nhau được đặt trên đỉnh của nhau. & NBSP;Heartbeat (opens in new tab)Heartbeat (opens in new tab)
• Xem mã (mở trong tab mới) (opens in new tab) (opens in new tab)

Tác giả: Steven Roberts::before pseudo element. To begin with, the pseudo element is placed at the bottom while spanning the full width, but only a few pixels in height. ::before pseudo element. To begin with, the pseudo element is placed at the bottom while spanning the full width, but only a few pixels in height. 

Trang web Một hành động bạo lực sử dụng mặt nạ và chuyển động tinh tế để thu hút sự chú ý của người dùng. Phần lớn công việc ở đây là trong thiết lập và tạo SVG.

19. Chuyển đổi đầy màu sắc

• Như đã thấy trên: Daink (mở trong tab mới) Ensemble Correspondances (opens in new tab) Ensemble Correspondances (opens in new tab)
• Xem mã (mở trong tab mới) (opens in new tab) (opens in new tab)

Tác giả: Steven Roberts::before pseudo element. To begin with, the pseudo element is placed at the bottom while spanning the full width, but only a few pixels in height. 

• Trang web Một hành động bạo lực sử dụng mặt nạ và chuyển động tinh tế để thu hút sự chú ý của người dùng. Phần lớn công việc ở đây là trong thiết lập và tạo SVG.Coulee Creative (opens in new tab) 
• Xem mã (mở trong tab mới) (opens in new tab) (opens in new tab)

Tác giả: Steven Roberts::before pseudo element. To begin with, the pseudo element is placed at the bottom while spanning the full width, but only a few pixels in height. 

Trang web Một hành động bạo lực sử dụng mặt nạ và chuyển động tinh tế để thu hút sự chú ý của người dùng. Phần lớn công việc ở đây là trong thiết lập và tạo SVG.cubic-bezier to gain complete control, we’re able to start the animation slowly, race through the middle part and slow it down again at the end.

19. Chuyển đổi đầy màu sắc

• Như đã thấy trên: Daink (mở trong tab mới) Ensemble Correspondances (opens in new tab)God of War (opens in new tab)
• Xem mã (mở trong tab mới) (opens in new tab) (opens in new tab)

Trang web Một hành động bạo lực sử dụng mặt nạ và chuyển động tinh tế để thu hút sự chú ý của người dùng. Phần lớn công việc ở đây là trong thiết lập và tạo SVG.

19. Chuyển đổi đầy màu sắc::after pseudo element to the bottom and then scaling it when the button is interacted with.

Như đã thấy trên: Daink (mở trong tab mới)

• Như đã thấy trên: Daink (mở trong tab mới) Ensemble Correspondances (opens in new tab)Princess Alexandra Auditorium (opens in new tab)
• Xem mã (mở trong tab mới) (opens in new tab) (opens in new tab)

Tác giả: Steven Roberts::before pseudo element. To begin with, the pseudo element is placed at the bottom while spanning the full width, but only a few pixels in height. 

Trang web Một hành động bạo lực sử dụng mặt nạ và chuyển động tinh tế để thu hút sự chú ý của người dùng. Phần lớn công việc ở đây là trong thiết lập và tạo SVG.::before and ::after pseudo elements, transitioning the size of the triangle and fading the name in when the element is interacted with.

19. Chuyển đổi đầy màu sắc

• Như đã thấy trên: Daink (mở trong tab mới) Ensemble Correspondances (opens in new tab)Greenwich Library (opens in new tab)
• Xem mã (mở trong tab mới) (opens in new tab) (opens in new tab)

Tác giả: Steven Roberts::before pseudo element. To begin with, the pseudo element is placed at the bottom while spanning the full width, but only a few pixels in height. 

Trang web Một hành động bạo lực sử dụng mặt nạ và chuyển động tinh tế để thu hút sự chú ý của người dùng. Phần lớn công việc ở đây là trong thiết lập và tạo SVG.

Tác giả: Steven Roberts

• Trang web Một hành động bạo lực sử dụng mặt nạ và chuyển động tinh tế để thu hút sự chú ý của người dùng. Phần lớn công việc ở đây là trong thiết lập và tạo SVG.Coulee Creative (opens in new tab) 
• Trang web Một hành động bạo lực sử dụng mặt nạ và chuyển động tinh tế để thu hút sự chú ý của người dùng. Phần lớn công việc ở đây là trong thiết lập và tạo SVG.cubic-bezier to gain complete control, we’re able to start the animation slowly, race through the middle part and slow it down again at the end.
• Như đã thấy trên: Daink (mở trong tab mới)God of War (opens in new tab)