17 MẪU HIỆU ỨNG CSS HÀNG ĐẦU HIỆN NAY
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.
Những hình ảnh động này không cần phải bị thổi phồng - thậm chí một chuyển động tinh tế cũng có thể có tác động lớn (hầu hết vẫn có nguồn gốc trong 12 nguyên tắc hiệu ứng cổ điển của Disney ).
Trong bài viết này, chúng tôi đã tập hợp một loạt các ví dụ về hoạt ảnh CSS từ một số trang web lớn nhất xung quanh và tìm hiểu về cách tự mình thực hiện các hiệu ứng này. Trang này có các hướng dẫn chuyên sâu hoặc nhấp qua trang 2 để có các hiệu ứng đầy cảm hứng (và các liên kết đến mã của chúng) để bạn tự tìm hiểu.
Hoạt ảnh CSS là gì?
Hoạt ảnh CSS là một phương thức làm động các phần tử HTML nhất định mà không phải sử dụng JavaScript hoặc Flash 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 ảnh CSS được bắt đầu bằng cách chỉ định khung hình chính cho hoạt ảnh: các khung hình chính này chứa các kiểu mà phần tử sẽ có.
01. Thổi bong bóng
Nhấp để xem hoạt ảnh đang hoạt động
Hiệu ứng bong bóng CSS có trên 7UP là một ví dụ tuyệt đẹp về việc mang chủ đề thương hiệu thông qua hoạt ảnh thiết kế trang web. Một số yếu tố: bản vẽ SVG 'của các bong bóng và sau đó hai hoạt ảnh được áp dụng cho từng bong bóng.
Các hình ảnh động đầu tiên thay đổi độ mờ đục 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 lung lay cho chủ nghĩa hiện thực bổ sung. Việc bù trừ được xử lý bằng cách nhắm mục tiêu mỗi bong bóng và áp dụng thời lượng và thời gian hoạt ảnh khác nhau.
Để tạo ra các bong bóng của chúng tôi, chúng tôi sẽ sử dụng SVG . 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 ở cuối hộp xem.
<g class="bubbles-large" stroke-width="7">
<g transform="translate(10 940)">
<circle cx="35" cy="35" r="35"/>
</g>
...
</g>
<g class="bubbles-small" stroke-width="4">
<g transform="translate(147 984)">
<circle cx="15" cy="15" r="15"/>
</g>
</g>
...
</g>
Để áp dụng hai hoạt ảnh riêng biệt cho SVG của chúng tôi, cả hai đều sử dụng thuộc tính biến đổi, chúng ta cần áp dụng các hoạt ảnh để phân tách các phần tử. Phần tử <g> trong SVG có thể được sử dụng giống như một div trong HTML; chúng ta cần bọc từng bong bóng của chúng ta (đã có trong một nhóm) trong một thẻ nhóm.
<g>
<g transform="translate(10 940)">
<circle cx="35" cy="35" r="35"/>
</g>
</g>
CSS có một công cụ hiệu ứng mạnh mẽ và mã thực sự đơn giản để tạo ra các hình động phức tạp. Chúng tôi sẽ bắt đầu bằng cách 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 trong và ngoài ở đầu và cuối của hoạt ảnh.
@keyframes up {
0% {
opacity: 0;
}
10%, 90% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-1024px);
}
}
Để tạo hiệu ứng lung lay, chúng ta chỉ cần di chuyển (hoặc dịch) bong bóng sang trái và phải, chỉ bằng số lượng vừa phải - quá nhiều sẽ khiến hoạt ảnh trông quá khó khăn và bị ngắt kết nối, trong khi quá ít sẽ không được chú ý nhiều. Thử nghiệm là chìa khóa khi làm việc với hoạt ảnh.
@keyframes wobble {
33% {
transform: translateX(-50px);
}
66% {
transform: translateX(50px);
} }
Để áp dụng hoạt ảnh cho các 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ứ n để 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 các bong bóng và thuộc tính sẽ thay đổi để sử dụng tăng tốc phần cứng.
.bubbles-large > g {
opacity: 0;
will-change: transform, opacity;}
.bubbles-large g:nth-of-type(1) {...}
...
.bubbles-small g:nth-of-type(10) {...}
Chúng tôi muốn giữ tất cả thời gian hiệu ứng và sự chậm trễ trong vòng 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 định thời dễ dàng vào hoạt ảnh của chúng tôi để làm cho nó trông tự nhiên hơn một chút.
.bubbles-large g:nth-of-type(1) {
animation: up 6.5s infinite; }
.bubbles-large g:nth-of-type(1) circle {
animation: wobble 3s infinite ease-in-out; }
...
bubbles-small g:nth-of-type(9) circle {
animation: wobble 3s 275ms infinite ease-in-out; }
.bubbles-small g:nth-of-type(10) {
animation: up 6s 900ms infinite;}
02. Di chuyển chuột
Nhấp để xem hoạt ảnh đang hoạt động
Một hình động chuột di chuyển tinh tế có thể cung cấp hướng cho người dùng khi họ lần đầu tiên truy cập trang web. Mặc dù điều này có thể được thực hiện bằng cách sử dụng các phần tử HTML và các thuộc tính, chúng ta sẽ sử dụng SVG vì điều này phù hợp hơn với việc vẽ.
Bên trong SVG chúng ta cần một hình chữ nhật với các góc tròn và một vòng tròn cho phần tử chúng ta sẽ tạo hiệu ứng động, bằng cách sử dụng SVG, chúng ta có thể mở rộng biểu tượng đến bất kỳ kích thước nào chúng ta cần.
<svg class="mouse" xmlns="..." viewBox="0 0 76 130" preserveAspectRatio="xMidYmid meet">
<g fill="none" fill-rule="evenodd">
<rect width="70" height="118" x="1.5" y="1.5" stroke="#FFF" stroke-width="3" rx="36"/>
<circle cx="36.5" cy="31.5" r="4.5" fill="#FFF"/>
</g>
</svg>
Bây giờ chúng tôi đã tạo SVG, chúng tôi cần áp dụng một số kiểu đơn giản để kiểm soát kích thước và vị trí của biểu tượng trong vùng chứa của chúng tôi. Chúng tôi đã bao bọc một liên kết xung quanh SVG chuột và định vị nó ở cuối màn hình.
.scroll-link {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
}
.mouse {
max-width: 2.5rem;
width: 100%;
height: auto;
}
Tiếp theo chúng ta sẽ tạo ra hình ảnh động. Tại 0 và 20 phần trăm con đường thông qua hiệu ứng của chúng tôi, chúng tôi muốn đặt trạng thái của phần tử của chúng tôi khi nó bắt đầu. Bằng cách thiết lập nó đến 20% của con đường thông qua, nó sẽ vẫn còn cho một phần của thời gian khi lặp đi lặp lại vô hạn.
@keyframes scroll {
0%, 20% {
transform: translateY(0) scaleY(1);
}
}
Chúng ta cần thêm điểm bắt đầu opacity và sau đó chuyển đổi cả vị trí Y và tỷ lệ dọc ở mốc 100%, kết thúc hoạt ảnh của chúng ta. Điều cuối cùng chúng ta cần làm là giảm độ mờ đục để làm mờ dần vòng tròn của chúng ta.
@keyframes scroll {
...
10% {
opacity: 1;
}
100% {
transform: translateY(36px) scaleY(2);
opacity: 0.01;
}
}
Cuối cùng, chúng tôi áp dụng hoạt ảnh cho vòng kết nối, cùng với thuộc tính 'chuyển đổi nguồn gốc' và thuộc tính sẽ thay đổi để cho phép tăng tốc phần cứng. Các đặc tính hiệu ứng khá tự giải thích. Các khối-Bút chì chức năng thời gian được sử dụng để đầu kéo vòng tròn trở lại trước khi thả nó xuống đáy của hình dạng chuột của chúng tôi; điều này cho biết thêm một cảm giác vui tươi cho hiệu ứng.
.scroll {
animation-name: scroll;
animation-duration: 1.5s;
animation-timing-function: cubic-bezier(0.650, -0.550, 0.250, 1.500);
animation-iteration-count: infinite;
transform-origin: 50% 20.5px;
will-change: transform;
}
03. Viết động
Nhấp để xem hoạt ảnh đang hoạt động
Trang web Garden Eight sử dụng một kỹ thuật hiệu ứng chung, nhờ đó 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 SVG. Có hai cách tiếp cận ở đây: chuyển đổi văn bản thành đường dẫn để tạo hiệu ứng động hoặc sử dụng văn bản SVG. Cả hai cách tiếp cận đều có ưu và khuyết điểm của họ.
Bắt đầu bằng cách tạo hoạt ảnh khung hình chính của chúng tôi. Hàm duy nhất mà chúng ta cần nó để thực hiện là thay đổi đột quỵ-dashoffset . Bây giờ chúng tôi đã tạo hoạt ả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 tạo hiệu ứng. Chúng ta thiết lập stroke-dasharray , nó sẽ tạo ra 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 gồm toàn bộ phần tử, cuối cùng bù đắp dấu gạch ngang theo chiều dài của đột quỵ.
Sự kỳ diệu xảy ra khi chúng tôi áp dụng hiệu ứng của mình. Bằng cách tạo hiệu ứng bù đắp, chúng tôi sẽ đưa đột quỵ vào xem - tạo hiệu ứng vẽ. Chúng tôi muốn các phần tử vẽ một lần tại một thời điểm, với một số chồng chéo giữa phần cuối của bản vẽ một phần tử và bắt đầu vẽ phần tử tiếp theo. Để đạt được điều này, chúng ta chuyển sang Sass / SCSS và nth-of-type để trì hoãn mỗi chữ bằng một nửa độ dài của hoạt ảnh, nhân với vị trí của chữ cái cụ thể đó.
04. Chim bay
- Xem mã cho một con chim hoặc toàn bộ đàn
Nhấp để xem hoạt ảnh đang hoạt động
Chúng tôi bắt đầu với các đường vector hoàn toàn thẳng, vẽ từng khung hình hoạt họa của chúng tôi, mô tả chim ở trạng thái khác nhau của chuyến bay. Sau đó chúng tôi thao tác các điểm vectơ và làm tròn các đường thẳng và cạnh. Cuối cùng, chúng tôi đặt mỗi khung vào một hộp có kích thước bằng nhau và đặt chúng cạnh nhau. Xuất tệp dưới dạng SVG.
Thiết lập HTML thực sự đơn giản. Chúng tôi chỉ cần quấn từng con chim vào một thùng chứa để áp dụng nhiều hoạt ảnh - một để làm cho chim bay và con kia di chuyển nó qua màn hình.
<div class="bird-container">
<div class="bird"></div>
</div>
Chúng tôi áp dụng SVG chim của chúng tôi làm nền cho div chim của chúng tôi và chọn kích thước chúng tôi muốn mỗi khung hình được. Chúng tôi sử dụng chiều rộng để tính toán gần vị trí nền mới. SVG có 10 ô, vì vậy chúng ta nhân chiều rộng của chúng ta lên 10 và sau đó thay đổi số lượng một chút cho đến khi nó có vẻ chính xác.
.bird {
background-image: url('bird.svg');
background-size: auto 100%;
width: 88px;
height: 125px;
will-change: background-position;
}
@keyframes fly-cycle {
100% {
background-position: -900px 0;
}
}
Hoạt ảnh CSS có một vài thủ thuật mà bạn có thể không biết. Chúng ta có thể sử dụng chức năng animation-timing-function để hiển thị hình ảnh theo các bước - giống như lướt qua các trang trong sổ ghi chép để ám chỉ đến hoạt ảnh.
animation-name: fly-cycle;
animation-timing-function: steps(10);
animation-iteration-count: infinite;
animation-duration: 1s;
animation-delay: -0.5s;
Bây giờ chúng tôi đã tạo chu kỳ bay của chúng tôi, chim của chúng tôi hiện đang vỗ cánh nhưng không đi đâu cả. Để di chuyển cô ấy trên màn hình, chúng tôi tạo ra một hoạt ảnh khung hình chính khác. Hoạt ảnh này sẽ di chuyển con chim trên màn hình theo chiều ngang trong khi cũng thay đổi vị trí thẳng đứng và tỷ lệ để cho phép con chim uốn lượn trên thực tế hơn.
Khi chúng tôi đã tạo hoạt ảnh của mình, chúng tôi chỉ cần áp dụng chúng. Chúng tôi có thể tạo ra nhiều bản sao của con chim của chúng tôi và áp dụng thời gian hiệu ứng khác nhau và sự chậm trễ.
.bird--one {
animation-duration: 1s;
animation-delay: -0.5s;
}
.bird--two {
animation-duration: 0.9s;
animation-delay: -0.75s;
}
05. Chéo bánh hamburger của tôi
Nhấp để xem hoạt ảnh đang hoạt động
Hoạt ảnh này được sử dụng trên toàn bộ web, chuyển ba dòng thành biểu tượng chéo 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 tế SVG phù hợp hơn với loại hoạt ảnh này - không còn cần phải làm nổi bật mã nút của bạn với nhiều nhịp nữa.
Do tính chất hiệu ứng và SVG và DOM điều hướng của nó, mã để hoàn thành hoạt ảnh hoặc chuyển đổi thay đổi rất ít - kỹ thuật này giống nhau.
Chúng ta bắt đầu bằng việc tạo ra bốn phần tử, nó có thể mở rộng bên trong một div hoặc các đường dẫn bên trong một SVG. Nếu chúng ta đang sử dụng các nhịp, chúng ta cần sử dụng CSS để định vị chúng bên trong div; nếu chúng tôi đang sử dụng SVG, điều này đã được xử lý. Chúng ta muốn định vị các dòng 2 và 3 ở giữa - cái này nằm trên đầu kia - trong khi các dòng khoảng cách 1 và 4 đều ở trên và dưới, hãy đảm bảo căn giữa gốc biến đổi.
Chúng ta sẽ dựa vào việc chuyển đổi hai thuộc tính: opacity và rotation. Trước hết, chúng ta muốn làm mờ các dòng 1 và 4, chúng ta có thể nhắm mục tiêu bằng cách sử dụng bộ chọn : nth-child .
.menu-icon.is-active {element-type}:nth-child(1),
.menu-icon.is-active {element-type}:nth-child(4) {
opacity: 0; }
Điều duy nhất còn lại để làm là nhắm vào hai đường giữa và xoay chúng 45 độ theo hướng ngược lại.
.menu-icon.is-active {element-type}:nth-child(2) {
transform: rotate(45deg); }
.menu-icon.is-active {element-type}:nth-child(3) {
transform: rotate(-45deg); }
06. Chasing circles
Nhấp để xem hoạt ảnh đang hoạt động
Biểu tượng tải động đượ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ó xen kẽ màu sắc đột quỵ.
<svg class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 340">
<circle cx="170" cy="170" r="160" stroke="#E2007C"/>
<circle cx="170" cy="170" r="135" stroke="#404041"/>
<circle cx="170" cy="170" r="110" stroke="#E2007C"/>
<circle cx="170" cy="170" r="85" stroke="#404041"/>
</svg>
Trong CSS của chúng tôi, chúng tôi có thể thiết lập một số thuộc tính cơ bản cho tất cả các vòng kết nối của chúng tôi và sau đó sử dụng bộ chọn : loại thứ n để áp dụng một dấu gạch ngang đột quỵ khác cho mỗi vòng tròn.
circle:nth-of-type(1) {
stroke-dasharray: 550;
}
circle:nth-of-type(2) {
stroke-dasharray: 500;
}
circle:nth-of-type(3) {
stroke-dasharray: 450;}
circle:nth-of-type(4) {
stroke-dasharray: 300;
}
Tiếp theo, chúng ta cần tạo hoạt ảnh keyframe. hiệu ứng của chúng tôi rất đơn giản: tất cả những gì chúng tôi cần làm là xoay vòng tròn 360 độ. Bằng cách đặt chuyển đổi của chúng tôi ở mốc 50% của hoạt ảnh, vòng tròn cũng sẽ quay lại vị trí ban đầu của nó.
@keyframes preloader {
50% {
transform: rotate(360deg);
}
}
Với hoạt ảnh của chúng tôi được tạo, chúng tôi chỉ cần áp dụng nó vào vòng kết nối của mình. Chúng tôi đặt tên hoạt ảnh; thời gian; chức năng đếm thời gian và lặp lại. Các 'dễ dàng-trong-out' sẽ cung cấp cho các hình ảnh động một cảm giác vui tươi hơn.
animation-name: preloader;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
Hiện tại, chúng tôi có bộ nạp của chúng tôi, nhưng tất cả các yếu tố đều quay cùng lúc. Để khắc phục điều này, chúng tôi sẽ áp dụng một 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 vòng lặp Sass.
@for $i from 1 through 4 {
&:nth-of-type(#{$i}) {
animation-delay: #{$i * 0.15}s;
} }
Do sự chậm trễ, vòng tròn của chúng tôi bây giờ hiệu ứng lần lượt, tạo ra ảo ảnh của các vòng tròn theo đuổi nhau. Vấn đề duy nhất với điều này là khi trang tải lần đầu tiên, các vòng tròn là tĩnh, sau đó chúng bắt đầu di chuyển, từng cái một. Chúng ta có thể đạt được hiệu ứng offset tương tự, nhưng dừng tạm dừng không mong muốn trong hoạt ảnh của chúng ta bằng cách đơn giản thiết lập độ trễ cho một giá trị âm.
animation-delay: -#{$i * 0.15}s;
07. accordion Retro có thể click
Nhấp để xem hoạt ảnh đang hoạt động
Nhà thiết kế giao diện người Bỉ và trình thủ thuật CSS Benjamin de Cock cho chúng ta thấy cách sử dụng sức mạnh của CSS3 để tạo ra một accordion có thể nhấp tự động, được làm trung tâm.
Tôi sẽ sử dụng một số mã HTML5 đơn giản chết cho accordion này. Về cơ bản, mỗi phần của accordion là một phần tử phần (có ý nghĩa phải không?) Và chứa một tiêu đề và một đoạn văn.
<div>
<section>
<h1>Introduction</h1>
<p>Lorem ipsum dolor sit amet...</p>
</section>
<section>
<h1>General information</h1>
<p>Lorem ipsum dolor sit amet...</p>
</section>
<section>
<h1>Contact us</h1>
<p>Lorem ipsum dolor sit amet...</p>
</section>
</div>
Ý tưởng là để bọc các tiêu đề phần trong neo liên kết với chính họ. Vì: target cho phép chúng ta chọn phần tử được nhắm mục tiêu, chúng ta cũng sẽ được phép chọn phần tử theo sau nó bằng cách sử dụng bộ chọn anh chị em liền kề. Hãy thử điều đó. Đây là đánh dấu HTML đã sửa đổi:
<div>
<section>
<a href="#intro" id="intro">
<h1>Introduction</h1>
</a>
<p>Lorem ipsum dolor sit amet...</p>
</section>
<section>
<a href="#info" id="info">
<h1>General information</h1>
</a>
<p>Lorem ipsum dolor sit amet...</p>
</section>
<section>
<a href="#contact" id="contact">
<h1>Contact us</h1>
</a>
<p>Lorem ipsum dolor sit amet...</p>
</section>
</div>
Và đây là CSS cực kỳ đơn giản để có được hành vi chuyển đổi đầu tiên:
p {
display:none;
}
:target + p {
display:block;
}
Tôi sẽ bắt đầu bằng cách căn giữa accordion cả theo chiều ngang và chiều dọc. Mô hình flexbox là phương pháp định vị hoàn hảo cho loại hiệu ứng đó vì nó cho phép chúng tôi hiển thị phần tử luôn ở giữa khối (ở đây: trang) mà không chỉ định bất kỳ thứ nguyên nào. Tôi sẽ sử dụng các ký hiệu tiêu chuẩn cho hướng dẫn này nhưng đừng quên sử dụng các tiền tố của nhà cung cấp trong mã cuối cùng của bạn.
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
body {
display:box;
box-orient:vertical;
box-pack:center;
box-align:center;
/* For Firefox */ width:100%;
}
div {
width:250px;
}
Trung tâm, nhưng vẫn khá khủng khiếp trực quan. Thêm nhiều hơn nữa CSS sexiness:
body {
font:.7em/1.5 "lucida grande", arial, sans-serif;
background:#f3faff;
}
div {
background:#fff;
border-radius:5px;
box-shadow:0 1px 3px rgba(0,0,0,.3);
}
h1 {
font-size:1em;
}
a {
display:block;
height:23px;
line-height:23px;
background:linear-gradient(#eee, #ccc);
color:#333;
text-decoration:none;
text-align:center;
text-shadow:0 1px 0 rgba(255,255,255,.5);
border-bottom:1px solid #aaa;
}
#intro {
border-radius:2px 2px 0 0;
}
#contact {
border-radius:0 0 3px 3px;
}
a:hover, a:focus {
opacity:.9;
}
a:active {
background:linear-gradient(#ccc, #ddd);
color:#000;
}
Woot! Nó bây giờ trông có vẻ chức năng và gợi cảm. Về yêu cầu của tôi, tôi gần như ở đó. Chỉ cần thiếu phần hiệu ứng thực sự. Tin xấu: thêm những chuyển đổi đó không phải là dễ dàng.
Vấn đề chính là bạn rõ ràng không thể thực hiện quá trình chuyển đổi trên một thuộc tính như hiển thị, do đó bạn sẽ phải sử dụng các giá trị số. Vì vậy, thay vì ẩn và hiển thị các phần có màn hình, tôi sẽ sử dụng thuộc tính chiều cao để chuyển từ 0 sang chiều cao nội dung.
Tin xấu thứ hai: hiện tại bạn không thể thực hiện chuyển đổi giữa giá trị số và "tự động". Điều đó có nghĩa là tôi sẽ phải chỉ định chiều cao cho từng phần theo cách thủ công. Theo như tôi có thể nói, đây là một cái gì đó W3C là nhận thức được và họ đồng ý rằng nó sẽ là có thể. Tôi hy vọng các nhà cung cấp trình duyệt sẽ thực hiện điều đó: nó sẽ rất hữu ích. Đây là mã cuối cùng:
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
body {
display:box;
box-orient:vertical;
box-pack:center;
box-align:center;
font:.7em/1.5 "lucida grande", arial, sans-serif;
background:#f3faff;
/* For Firefox */ width:100%;
}
div {
width:250px;
background:#fff;
border-radius:5px;
box-shadow:0 1px 3px rgba(0,0,0,.3);
}
p {
height:0;
padding:0 15px;
overflow:hidden;
transition:height .4s ease-out, padding .4s ease-out;
}
h1 {
font-size:1em;
}
a {
display:block;
height:23px;
line-height:23px;
background:linear-gradient(#eee, #ccc);
color:#333;
text-decoration:none;
text-align:center;
text-shadow:0 1px 0 rgba(255,255,255,.5);
border-bottom:1px solid #aaa;
}
#intro {
border-radius:2px 2px 0 0;
}
#contact {
border-radius:0 0 3px 3px;
}
a:hover, a:focus {
opacity:.9;
}
a:active {
background:linear-gradient(#ccc, #ddd);
color:#000;
}
:target + p {
padding:10px 15px;
border-bottom:1px solid #ccc;
}
#intro:target + p {
height:70px;
}
#info:target + p {
height:230px;
}
#contact:target {
border-radius:0;
}
#contact:target + p {
height:180px;
}
08. Tuyết rơi
Nhấp để xem hoạt ảnh đang hoạt động
Tuyết được tạo ra bằng cách sử dụng SVG và kỹ thuật này rất giống với cách chúng ta tạo ra các bong bóng trước đó. Để bắt đầu, chúng ta tạo ra hai lớp vòng tròn bên trong một SVG, sau đó chúng ta tạo hiệu ứng cho hai lớp đó bằng cách dịch giá trị Y với một hoạt ảnh khung hình chính.
Chúng tôi áp dụng hoạt ảnh cho mỗi lớp thay vì các phần tử riêng lẻ và sử dụng lại cùng một hoạt ảnh cho cả hai lớp. Bằng cách đơn giản là cho chúng thời lượng khác nhau, chúng ta có thể thêm độ sâu vào cảnh của chúng ta.
09. Di chuyển nền
Nhấp để xem hoạt ảnh đang hoạt động
Trang web Một hành vi 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 quá trình thiết lập và tạo SVG.
10. Chuyển tiếp đầy màu sắc
Nhấp để xem hoạt ảnh CSS đang hoạt động
Trang web Da-Ink sử dụng một kỹ thuật thực sự hiệu quả để chuyển đổi giữa các trang. Quá trình chuyển đổi rất đơn giản và bao gồm SVG chứa một số hình chữ nhật có kích thước khác nhau với các màu khác nhau được đặt trên đầu trang của nhau.
Hoạt ảnh bao gồm việc chuyển đổi vị trí X theo chiều rộng của SVG. Sau đó, sử dụng nth-of-type , chúng tôi áp dụng sự chậm trễ, bù trừ từng 75ms từ lần cuối để tạo chuyển đổi suôn sẻ.
11. Xung vòng tròn
Nhấp để xem hoạt ảnh CSS đang hoạt động
Các hiệu ứng xung được sử dụng trên trang web Peek-a-Beat đơn giản nhưng hiệu quả và không khó để tái sản xuất - bao gồm ba vòng tròn bên trong SVG, trong đó chúng tôi tạo hiệu ứng cho quy mô và độ mờ của chúng.
12. Mở rộng làm nổi bật
Nhấp để xem hoạt ảnh đang hoạt động
Đây là một kỹ thuật rất đơn giản nhưng thực sự hiệu quả. Quá trình chuyển đổi được thực hiện bằng cách sử dụng :: trước phần tử giả. Để bắt đầu, phần tử giả được đặt ở dưới cùng trong khi kéo dài toàn bộ chiều rộng, nhưng chỉ có chiều cao vài pixel.
Khi phần tử được tương tác với, chiều rộng và chiều cao của phần tử giả đều được chuyển sang 105% kích thước của cha mẹ (thay đổi là kịch tính hơn theo chiều dọc), cũng như chuyển đổi màu của văn bản.
13. Tiêu đề nâng cao
Nhấp để xem hoạt ảnh CSS đang hoạt động
Ensemble Correspondances sử dụng hình ảnh động đơn giản để truyền tải chuyển động trong âm nhạc. Thiết kế này thể hiện một cách lỏng lẻo bản nhạc.
14. Biểu tượng menu quay
Nhấp để xem hoạt ảnh đang hoạt động
Nút menu động được tạo bằng SVG. Các hình ảnh động xảy ra khi người dùng tương tác với nút menu. Hai quá trình chuyển tiếp diễn ra: nhóm tròn xung quanh menu xoay 360 độ và biểu tượng trình đơn ở giữa thay đổi màu sắc.
Phần phức tạp nhất là hàm thời gian. Bằng cách sử dụng khối-bezier để đạt được kiểm soát hoàn toàn, chúng tôi có thể bắt đầu các hiệu ứng từ từ, cuộc đua qua phần giữa và làm chậm nó xuống một lần nữa ở cuối.
15. Gạch dưới từ trung tâm
Nhấp để xem hoạt ảnh đang hoạt động
Hoạt ảnh bao gồm định vị :: sau phần tử giả ở phía dưới và sau đó mở rộng quy mô khi nút được tương tác với.
16. Mở rộng góc
Nhấp để xem hoạt ảnh đang hoạt động
Trang web Princess Alexandra Auditorium có một cách trực quan để hiển thị các thể loại của các chương trình của nó. Mỗi thẻ hiển thị có một góc tam giác được đặt trong một màu đại diện cho thể loại và sau đó, khi di chuột, tên của danh mục được hiển thị.
Hiệu ứng được thực hiện bằng cách sử dụng :: before và :: sau phần tử giả, chuyển đổi kích thước của hình tam giác và làm mờ tên khi phần tử được tương tác với.
17. Mũi tên trượt
Nhấp để xem hoạt ảnh đang hoạt động
Thư viện Greenwich có một sự 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 làm động từ bên phải của nút và quay lại từ bên trái.
Quá trình chuyển đổi màu được thực hiện với thuộc tính chuyển đổi và mũi tên bằng cách sử dụng hoạt ảnh khung hình đơn giản. Cả quá trình chuyển đổi và hoạt ảnh đều sử dụng cùng thời lượng để đồng bộ hóa các chuyển động.
Nguồn: creativebloq
