04/10/2018, 20:11

Circle social share : Hiệu ứng vòng tròn với CSS3

Khi chúng ta chia sẻ bài viết hoặc sản phẩm trên mạng xã hội thì lượt truy cập sẽ tăng đáng kể, và đó cũng là lí do mà mình sẽ thường xuyên cung cấp cho các bạn những mẫu social share mà các bạn có thể áp dụng cho website hay blog mà các bạn đang quản lý. Bài viết ngày hôm nay sẽ là một hiệu ứng ...

Khi chúng ta chia sẻ bài viết hoặc sản phẩm trên mạng xã hội thì lượt truy cập sẽ tăng đáng kể, và đó cũng là lí do mà mình sẽ thường xuyên cung cấp cho các bạn những mẫu social share mà các bạn có thể áp dụng cho website hay blog mà các bạn đang quản lý. Bài viết ngày hôm nay sẽ là một hiệu ứng vòng tròn không những gọn mà còn có thể đặt ở bất kì vị trí nào trên trang web, rất tiên lợi cho người dùng chia sẻ ngay nội dung hoặc sản phẩm mà họ muốn.

Circle social share : Hiệu ứng vòng tròn với CSS3

Xem Demo | Download

HTML

Các icons mà chúng ta sử dụng trong bài viết này là từ font Awesome, vì vậy các bạn nên chèn font này ngay bên trong thẻ head.

<link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

Sau đó các bạn tạo các biểu tượng mạng xã hội theo cấu trúc html như sau :

<div id="circle">
  <i class="icon1 fa fa-share-alt fa-lg"></i>
  <i class="icon2 fa fa-share-alt fa-lg"></i>
</div>
<div id="sub">
  <div id="circle">
    <i class="icon1 fa fa-facebook fa-lg"></i>
    <i class="icon2 fa fa-plus fa-lg"></i>
    <span><a href="#">Facebook</a></span>
  </div>
  <div id="circle">
    <i class="icon1 fa fa-twitter fa-lg"></i>
    <i class="icon2 fa fa-plus fa-lg"></i>
    <span><a href="#">Twitter</a></span>
  </div>
  <div id="circle">
    <i class="icon1 fa fa-google-plus fa-lg"></i>
    <i class="icon2 fa fa-plus fa-lg"></i>
    <span><a href="#">Google +</a></span>
  </div>
  </div>

CSS

Tiếp đến là chúng ta định dạng và tạo hiệu ứng cho các mạng xã hội theo đoạn css bên dưới.

/* ///// MAIN CIRCLE ///// */
#circle {
    awidth: 80px;
    height: 80px;
    border-radius: 50%;
    background: #747392;
    position: absolute;
    z-index:2;
    top: 25px;
    left: 25px;
    box-shadow: 0 0 4px rgba(0, 0, 0, .11), 0 4px 8px rgba(0, 0, 0, .22);
    cursor: pointer;
}
#circle:after {
    content:';
    awidth: 10px;
    height: 10px;
    position: absolute;
    border-radius: 50%;
    background: rgba(81, 80, 122, 0.6);
    left: 35px;
    top: 35px;
}
#circle i {
    font-size: 40px;
    color: #fff;
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 1;
}
#circle i.icon1 {
    opacity: 1;
}
#circle i.icon2 {
    opacity: 0;
    top: 25px;
    left: 22px;
}
/* ANIMATION */
#circle, #circle i, #circle:after {
    -webkit-transition: all .2s cubic-bezier(.4, 0, .2, 1);
    transition: all .2s cubic-bezier(.4, 0, .2, 1);
}
/* HOVER */
#circle:hover {
    background: #626186;
    box-shadow: 0 0 4px rgba(0, 0, 0, .15), 0 4px 8px rgba(0, 0, 0, .30);
}
#circle:hover:after {
    awidth: 80px;
    height: 80px;
    left: 0;
    top: 0;
}
#circle:hover > i {
    -webkit-transform: rotate(720deg);
    transform: rotate(720deg);
}
#circle:hover > i.icon1 {
    opacity: 0;
}
#circle:hover > i.icon2 {
    opacity: 1;
}

/* ///// SUB CIRCLES ///// */
 #sub {
  awidth: 150px;
  height: 50%;
  z-index: 1;
  position: absolute;
  visibility:hidden;
}
#sub #circle {
    awidth: 50px;
    height: 50px;
    top: 0;
    left: 40px;
    opacity: 0;
    transition: 0.2s opacity;
}
#sub #circle:nth-child(1) {
    top: 120px;
    background: #95507f;
}
#sub #circle:nth-child(2) {
    top: 180px;
    background: #4e935c;
}
#sub #circle:nth-child(3) {
    top: 240px;
    background: #9f4b49;
}
#sub #circle:nth-child(1):after {
    background: rgba(126, 53, 108, 0.6);
}
#sub #circle:nth-child(2):after {
    background: rgba(49, 124, 61, 0.6);
}
#sub #circle:nth-child(3):after {
    background: rgba(135, 43, 45, 0.6);
}
#sub #circle:after {
    left: 20px;
    top: 20px;
}
#sub #circle i {
    font-size: 20px;
    top: 18px;
    left: 16px;
}
#sub #circle i.icon1 {
    opacity: 1;
}
#sub #circle i.icon2 {
    opacity: 0;
}
/* HOVER */
#sub #circle:hover:after {
    awidth: 50px;
    height: 50px;
    left: 0;
    top: 0;
}
#circle:hover + #sub #circle:nth-child(1) {
    opacity:1;
    transition-delay:0.05s;
}
#circle:hover + #sub #circle:nth-child(2) {
    opacity:1;
    transition-delay:0.1s;
}
#circle:hover + #sub #circle:nth-child(3) {
    opacity:1;
    transition-delay:0.15s;
}
#sub #circle:hover > i {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
#sub #circle:hover > i.icon1 {
    opacity: 0;
}
#sub #circle:hover > i.icon2 {
    opacity: 1;
}
#circle:hover + #sub {
visibility:visible;
}
#sub:hover {
visibility:visible;
}
#sub:hover > #circle {
    opacity:1;
}
/* ///// SUB TITLES ///// */
#circle span a{
  display: block;
  margin-right: -150px;
  margin-top: 16px;
  color: rgba(0, 0, 0,0.7);
  font-family: 'Comfortaa', sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  text-align: left;
  padding-left: 60px;
  font-size: 1.1em;
  letter-spacing: 0.25em;
  opacity: 0;
  -webkit-transition: all .4s cubic-bezier(.4, 0, .2, 2);
  transition: all .4s cubic-bezier(.4, 0, .2, 2);
  text-decoration-line: none;
}
/* HOVER */
#sub #circle:hover > span a{
    opacity: 1;
    padding-left: 65px;
}

Với hiệu ứng này, các bạn còn có thể dùng cho việc hiển thị menu hoặc bất kì điều gì nhằm thu hút người dùng click vào. Mình mong là các bạn sẽ tìm được nhiều điều hữu ích từ bài viết này. Giúp mình share bài viết cho bạn bè của các bạn nhé.

Tags: circle effects css3 Social Share

Chuyên Mục: Css

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

Bài liên quan

Tạo menu với hiệu ứng vòng tròn chỉ với CSS3

Trong bài viết này, chúng ta sẽ cùng nhau tạo một menu với hiệu ứng mở rộng vòng tròn xung quanh menu chính. Qua bài viết này, các bạn sẽ nắm rõ về cách tạo hiệu ứng động bằng thuộc tính transition và transform có trong CSS3. Xem Demo | Download HTML Như thường lệ, chúng ta sẽ ...

Trần Trung Dũng viết 3 tuần trước

Tạo hiệu ứng quảng cáo với CSS3

Việc tạo những mẫu giảm giá hoặc các thông tin khuyến mại nhằm thu hút người dùng ngay từ các nhìn đầu tiên sẽ giúp cho doanh số bán hàng của khách hàng các bạn sẽ tăng lên rõ rệt. Hôm nay mình sẽ chia sẻ cho các bạn hiệu ứng chạy quảng cáo mà chúng ta thường thấy trên các trang web bán hàng. ...

Vũ Văn Thanh viết 3 tuần trước

Click Effect : Tạo hiệu ứng click chuột với CSS3

Có đôi lúc chúng ta cũng cần phải tạo một vài hiệu ứng click chuột để tạo cảm giác “Pro” cho người dùng. Nếu các bạn không thích sử dụng flash hoặc các đoạn script tạo hiệu ứng, thì thử dùng hiệu ứng click mà mình chia sẻ cho các bạn trong bài viết này. Với hiệu ứng này, các bạn chỉ ...

Tạ Quốc Bảo viết 3 tuần trước

Circle social share : Hiệu ứng vòng tròn với CSS3

Khi chúng ta chia sẻ bài viết hoặc sản phẩm trên mạng xã hội thì lượt truy cập sẽ tăng đáng kể, và đó cũng là lí do mà mình sẽ thường xuyên cung cấp cho các bạn những mẫu social share mà các bạn có thể áp dụng cho website hay blog mà các bạn đang quản lý. Bài viết ngày hôm nay sẽ là một hiệu ứng ...

Bùi Văn Nam viết 3 tuần trước

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 ...

Trần Trung Dũng viết 3 tuần trước
0