Chào mọi người.
Trong bài giảng này, chúng ta sẽ nói về quá trình chuyển đổi.
Bạn đã thấy trong các ví dụ khác nhau mà chúng ta có thể thay đổi trạng thái của các yếu tố.
Liên kết có thể đi từ liên kết thông thường đến truy cập.
Bạn có thể di chuột qua mọi thứ.
Bạn có thể tập trung chúng.
Vâng, nếu bạn muốn thực sự có một chút gần như hoạt hình
khi bạn làm những việc này?
Đó là những gì chúng ta có thể sử dụng chuyển tiếp cho.
Vì vậy, nếu bạn di chuột qua liên kết, bạn có thể thay đổi màu sắc.
Nếu ảnh được lấy nét,
nghĩa là bạn đã gắn thẻ vào ảnh đó, bạn có thể thay đổi kích cỡ.
Và nó chỉ là những thứ nhỏ bé mà đôi khi,
khi bạn tạo ra trang web của mình, mang đến cho bạn một chút yếu tố thú vị mà bạn
đang tìm kiếm, để cho thấy rằng bạn đang thực sự bắt đầu nắm bắt những khái niệm này.
Vì vậy, hãy bắt đầu.
Nếu bạn muốn thêm chuyển tiếp vào trang của mình,
có bốn thuộc tính mà bạn sẽ muốn xem.
Đầu tiên là thuộc tính chuyển tiếp thực tế.
Bạn muốn thay đổi điều gì?
Bạn có muốn thay đổi kích thước, màu sắc, vị trí, tất cả chúng?
Còn thời gian chuyển tiếp thì sao?
Mỗi lần chuyển tiếp kéo dài bao lâu?
Chúng có thể xảy ra rất nhanh, nơi mà mọi người hầu như không nhận thấy nó, hoặc
nó có thể thực sự dài và rút ra.
Thời gian chuyển tiếp là, nó hơi kỳ quặc, nhưng nó là ý tưởng,
nếu bạn định tạo ra một cái gì đó lớn hơn, bạn có muốn làm cho nó từ từ lớn hơn và
tuyến tính tất cả cùng một lúc hay bạn muốn nó giảm bớt hay giảm bớt?
Bạn thực sự có thể thay đổi cách thức, kiểu như tốc độ nó đang làm những việc khác nhau.
Trì hoãn chuyển tiếp là, bạn có muốn tôi chờ đợi,
trình duyệt có nên đợi trước khi nó bắt đầu chuyển tiếp không?
Nếu ai đó đang lơ lửng, anh có muốn họ lơ lửng trong hai giây trước khi anh tiếp tục không?
Bạn có thể muốn nghĩ về điều này, bởi vì đôi khi khi
mọi người đang nhìn vào trang của bạn, họ đã có, chỉ cần chuột chạy khắp nơi.
Và bạn không muốn họ nhìn vào quá trình chuyển đổi trừ khi họ thực sự cần
phải tập trung vào một yếu tố đó.
Được rồi.
Vì vậy, chúng ta hãy đi trước và bắt đầu.
Nếu bạn muốn sử dụng chuyển tiếp, điều đầu tiên bạn cần làm là
chỉ những gì bạn đã làm tất cả cùng, xác định phần tử của bạn và
nói phong cách bạn muốn nó có khi bạn lần đầu tiên tải trang.
Tiếp theo, bạn muốn chọn những yếu tố bạn muốn chuyển tiếp.
Vì vậy, bạn có thể đã tạo kiểu nó với màu nền, màu sắc, chiều rộng và chiều cao.
Bạn không nhất thiết muốn thay đổi tất cả những điều đó
khi bạn đi vào quá trình chuyển đổi của bạn.
Vì vậy, hãy chọn những cái mà bạn muốn thay đổi.
Thứ ba, xác định các giá trị mới cho các phần tử đó.
Và điều này rất quan trọng.
Bạn cần phải kết hợp bước này với một lớp giả.
Nó cần phải được cùng với một di chuột hoặc một tập trung hoặc một hoạt động.
Vì vậy, chúng ta hãy nhìn vào một số mã chỉ trên màn hình, và
sau đó tôi sẽ chạy bạn qua một ví dụ thực tế.
Vì vậy, ở đây, tôi đã đi, Tôi đã đi trước và xác định một div để chỉ có màu sắc,
nền, chiều cao dòng, chiều cao chiều rộng, tất cả những điều điển hình.
Nếu bạn nhận thấy, bán kính đường viền là khá nhỏ.
Nó chỉ có 6 điểm ảnh.
Tiếp theo, tôi đi vào và nói, bạn biết không, tôi sẽ đi trước và
xác định từng thuộc tính này.
Vì vậy, thuộc tính của tôi tôi tôi muốn thay đổi sẽ là màu sắc, chiều rộng, nền
và bán kính biên giới.
Đây là loại rất nhiều, nhưng tôi muốn có một ví dụ lớn.
Bạn có thể nói, tôi muốn mất nửa giây,
tôi muốn tất cả đều giống nhau, và
tôi muốn bạn đợi nửa giây trước khi bạn bắt đầu quá trình chuyển đổi đó.
Bước cuối cùng, một trong đó đã làm với lớp giả,
là thêm div:di chuột và đưa ra các giá trị mới mà tôi muốn tất cả mọi thứ được.
Vì vậy, thay vì là màu đen, tôi muốn chuyển nó sang màu trắng.
Thay vì chiều rộng là 250 pixel, tôi muốn nó là 350,
màu nền khác nhau, và bán kính đường viền lớn hơn nhiều.
Được chứ? Vì vậy, chúng ta hãy đi trước và
nhìn vào một ví dụ mà tôi có.
Tôi đã mã hóa để cho các bạn thấy.
Vì vậy, trong ví dụ này tôi đã sử dụng một bảng phong cách nội bộ,
một phần bởi vì toàn bộ phần lớn HTML của tôi là ngay xuống đây.
Tất cả những gì tôi có là một div.
Làm thế nào tôi đã phong cách nó là để nói rằng bây giờ trên khi ai đó di chuột qua div này,
Tôi muốn bạn thay đổi màu sắc với nền và bán kính biên giới.
Và tôi cũng đã tích cực,
chỉ vì tôi muốn cho các bạn thấy rằng bạn có thể làm nhiều trạng thái khác nhau.
Hoạt động, nếu bạn có, có thể không nhớ, là khi bạn đang nhấp chuột vào một tiểu bang.
Vì vậy, chúng ta hãy xem qua.
Đây là quá trình chuyển đổi của tôi, chỉ theo mặc định, khi bạn đang nhìn vào trang.
Bây giờ, khi tôi di chuột qua nó,
bạn có thể thấy rằng đó là một sự thay đổi tuyệt vời của màu sắc và bán kính biên giới.
Bán kính biên giới thực sự có thể thay đổi mọi thứ từ trông giống hình vuông
đến trông giống hình tròn. Điều
cuối cùng là bây giờ tôi sẽ giữ con chuột xuống và
chúng ta sẽ xem điều gì xảy ra khi nhà nước đi vào hoạt động.
Bạn có thể thấy, một lần nữa, tôi đã thay đổi tất cả những thứ đó.
Tôi thực sự nghĩ điều này khá hay.
Nó cũng có thể, tuy nhiên, rất mất tập trung.
Vì vậy, bạn muốn sử dụng chuyển tiếp một cách tiết kiệm
để đảm bảo rằng bạn không lấy đi mọi thứ từ trang của bạn.
Có thể và
rất phổ biến để sử dụng viết tắt khi bạn đang viết ra các chuyển tiếp khác nhau của bạn.
Thay vì viết thời gian chuyển tiếp,
thuộc tính, những thứ khác nhau như thế, bạn có thể đặt tất cả trong một dòng.
Điều này nói rằng tôi muốn thay đổi nền, nó sẽ mất .2 giây, và
tôi muốn giảm bớt hoặc tôi muốn nó là một sự chuyển tiếp tuyến tính.
Ở đây, nó nói rằng tôi muốn đi trước và thay đổi bán kính biên giới, bao lâu nó
nên mất, loại chuyển tiếp, và bao lâu bạn muốn trì hoãn.
Vì vậy, khi bạn nhìn vào mã của người khác,
đừng nhầm lẫn nếu nó không giống như ví dụ đầu tiên của tôi.
Có lẽ họ đã sử dụng các phím tắt.
Được rồi.
Vì vậy, hy vọng rằng đó là một chút mát mẻ và bạn đang vui mừng để đi và
thực hiện một số loại chuyển tiếp trên trang của bạn.
Chơi với họ cũng sẽ làm nhiều hơn là làm cho trang web của bạn trông giống như
đầy màu sắc và năng động.
Nó sẽ cung cấp cho bạn thực hành về việc hiểu các
lớp giả và trạng thái khác nhau như hoạt động, tập trung, di chuột, vv
Nhưng hãy nhớ rằng khả năng truy cập luôn luôn là một vấn đề
khi bạn đang đối phó với các trạng thái khác nhau trên trang.
Không yêu cầu mọi người sẽ di chuột trên trang của bạn.
Không yêu cầu mọi người đang đi đến tab thông qua.
Bạn muốn đảm bảo rằng tất cả nội dung của bạn luôn có sẵn, và
chỉ cần giữ những chuyển tiếp đó cho một cái gì đó thêm một chút để thêm vào trang web của bạn.
Chúc may mắn.