Tổng hợp hiệu ứng vòng tròn với CSS3 Transitions

Ngày hôm nay mình sẽ chia sẻ cho các bạn những hiệu ứng vòng tròn (Circle Hover Effects) với CSS transitions và 3D rotations. Bảo đảm là với những hiệu ứng này, các bạn có thể áp dụng vào chính trang web hay blog của mình, và nếu các bạn muốn nâng cao hơn về khả năng sử dụng CSS3 thì bài viết này không nên bỏ qua.

Xem Demo | Download

HTML

Bao giờ cũng thế, đầu tiên là chúng ta phải có định dạng html chuẩn cho tất cả các hiệu ứng :

<ul class="ch-grid">
    <li>
        <div class="ch-item ch-img-1">
            <div class="ch-info">
                <h3>Use what you have</h3>
                <p>by Angela Duncan <a href="http://drbl.in/eOPF">View on Dribbble</a></p>
            </div>
        </div>
    </li>
    <li>
        <div class="ch-item ch-img-2">
            <div class="ch-info">
                <h3>Common Causes of Stains</h3>
                <p>by Antonio F. Mondragon <a href="http://drbl.in/eKMi">View on Dribbble</a></p>
            </div>
        </div>
    </li>
    <li>
        <div class="ch-item ch-img-3">
            <div class="ch-info">
                <h3>Pink Lightning</h3>
                <p>by Charlie Wagers <a href="http://drbl.in/ekhp">View on Dribbble</a></p>
            </div>
        </div>
    </li>
</ul>

CSS

Trước hết, chúng ta sẽ định dạng css đơn giản cho danh sách :

.ch-grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    awidth: 100%;
}

.ch-grid:after,
.ch-item:before {
    content: ';
    display: table;
}

.ch-grid:after {
    clear: both;
}

.ch-grid li {
    awidth: 220px;
    height: 220px;
    display: inline-block;
    margin: 20px;
}

Vì giới hạn trong bài viết này nên mình sẽ chỉ ghi ra đoạn code cho mẫu demo 1 , các bạn có thể xem toàn bộ code cho các demo khi download toàn bộ mã nguồn về máy của mình. Chúng ta sẽ bắt đầu sắp xếp vị trí các items và chèn thêm hiệu ứng bóng đỏ và chuyển cảnh.

.ch-item {
    awidth: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    cursor: default;
    box-shadow:
        inset 0 0 0 16px rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.4s ease-in-out;
}

Sau đó là ấn định hình nền :

.ch-img-1 {
    background-image: url(../images/1.jpg);
}

.ch-img-2 {
    background-image: url(../images/2.jpg);
}

.ch-img-3 {
    background-image: url(../images/3.jpg);
}

phần mô tả sẽ được định vị trí absolutely và làm nó ẩn với thuộc tính opacity sẽ là 0.

.ch-info {
    position: absolute;
    background: rgba(63,147,147, 0.8);
    awidth: inherit;
    height: inherit;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
}

Và định dạng cho phần tiêu đề :

.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 22px;
    margin: 0 30px;
    padding: 45px 0 0 0;
    height: 140px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}

Kế tiếp chúng ta sẽ tạo hiệu ứng fade in khi rê chuột vào với 1 độ trễ nhất định.

.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
    opacity: 0;
    transition: all 1s ease-in-out 0.4s;
}

Phần liên kết (link) sẽ được chuyển sang chữ hoa và đổi sang màu vàng :

.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}

Và bây giờ là phần hấp dẫn nhất của việc tạo hiệu ứng. Chúng ta sẽ tạo chuyển động cho phần bóng đổ từ 16px đến 1px.

.ch-item:hover {
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.1),
        0 1px 2px rgba(0,0,0,0.1);
}

Phần mô tả sẽ có hiệu ứng fade in và scale up

.ch-item:hover .ch-info {
    transform: scale(1);
    opacity: 1;
}
.ch-item:hover .ch-info p {
    opacity: 1;
}

Đó là tất cả những gì cần có để tạo hiệu ứng theo demo 1, mình mong là với bộ sưu tập mà mình giới thiệu trong bài viết này, các bạn sẽ có nhiều lựa chọn hơn cho website hay blog của mình.

Chuyên Mục: Css

Bài viết được đăng bởi webmaster