导航菜单

纯CSS3液态胶合效果环形菜单按钮特效

阿里云


这是一款效果非常有创意的纯 CSS3 液态胶合效果的环形菜单按钮特效。该环行菜单按钮在用户点击主菜单按钮后,两行子菜单会以环状的方式打开,并且子菜单就像液体一样,能够胶合,具有弹性,效果非常炫酷。

HTML 结构

在 HTML 结构中,主菜单按钮使用 input[type='checkbox']的复选框和一个<label>元素来制作。子菜单按钮是一组<button>元素。

也想出现在这里?联系我们
创客主机
  1. <div class='wrap'>
  2.   <input type='checkbox' id='checking' style='display:none;' />
  3.   <button class='blob'></button>
  4.   <button class='blob'>&#x2709;</button>
  5.   <button class='blob'>&#x2699;</button>
  6.   <button class='blob'>&#x2764;</button>
  7.   <button class='blob'>&#x270c;</button>
  8.   <button class='blob'></button>
  9.   <button class='blob'></button>
  10.   <button class='blob'></button>
  11.   <label class='blob' for='checking'>
  12.     <span class='bar'></span>      
  13.     <span class='bar'></span>
  14.     <span class='bar'></span>
  15.   </label>
  16. </div>

该环形菜单的液态融合效果使用 SVG 过滤器来制作。在 SVG 过滤器中,有 3 个滤镜:第一个是高斯模糊滤镜,第二个是颜色矩阵滤镜,第三个是混合滤镜。混合滤镜可以将多个输入滤镜混合为一个。

  1. <svg>
  2.   <defs>
  3.     <filter id="filt">
  4.       <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
  5.       <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="filt" />
  6.       <feBlend in2="filt" in="SourceGraphic" result="mix" />
  7.     </filter>
  8.   </defs>
  9. </svg>

在这个效果中,颜色矩阵滤镜的输入是高斯模糊滤镜,然后混合滤镜将颜色矩阵的输出和源图像进行混合,制作液体融合效果。关于 SVG 滤镜的详细介绍,可以参考:SVG 进阶 | SVG 过滤器(SVG Filters)。

CSS 样式

在 CSS 样式中,需要注意的是引用 SVG 过滤器的方式。在非 webkit 内核的浏览器中,外连的 css 样式表中引用 SVG 过滤器需要写完整的路径,而如果是内联的 CSS 样式可以直接通过 ID 来引用。

  1. filter: url("../index.html/#filt");
  2. -webkit-filter: url("#filt");

主菜单按钮的点击时通过 checkbox hack 来实现的。

  1. .wrap .blob[for="checking"] {
  2.   z-index: 30;
  3.   font-size: 60px;
  4.   text-align: center;
  5.   color: #fff;
  6.   transition: transform 0.5s ease-in-out 0.2s;
  7.   -webkit-transition: -webkit-transform 0.5s ease-in-out 0.2s;
  8.   -moz-transition: transform 0.5s ease-in-out 0.2s;
  9.   -o-transition: transform 0.5s ease-in-out 0.2s;
  10.   -ms-transition: transform 0.5s ease-in-out 0.2s;
  11. }
  12. .wrap .blob:not([for="checking"]) {
  13.   width: 50px;
  14.   height: 50px;
  15.   top: 15px;
  16.   left: 15px;
  17.   font-size: 30px;
  18.   transition: all 0.5s ease-in-out;
  19.   -webkit-transition: all 0.5s ease-in-out;
  20.   -moz-transition: all 0.5s ease-in-out;
  21.   -o-transition: all 0.5s ease-in-out;
  22.   -ms-transition: all 0.5s ease-in-out;
  23. }
  24. .wrap .blob:not([for="checking"]):hover {
  25.   color: #F44336;
  26.   animation: harlem 0.5s linear forwards;
  27.   -webkit-animation: harlem 0.5s linear forwards;
  28.   -moz-animation: harlem 0.5s linear forwards;
  29.   -o-animation: harlem 0.5s linear forwards;
  30.   -ms-animation: harlem 0.5s linear forwards;
  31. }
  32. .wrap > #checking:checked ~ .blob:nth-child(2) {
  33.   margin-left: 85px;
  34.   margin-top: 10px;
  35.   background-color: #fff;
  36. }
  37. .wrap > #checking:checked ~ .blob:nth-child(3) {
  38.   margin-top: 145px;
  39.   margin-left: 65px;
  40.   background-color: #fff;
  41. }
  42. .wrap > #checking:checked ~ .blob:nth-child(4) {
  43.   margin-top: 160px;
  44.   margin-left: 10px;
  45.   background-color: #fff;
  46. }
  47. .wrap > #checking:checked ~ .blob:nth-child(5) {
  48.   margin-top: 85px;
  49.   margin-left: 10px;
  50.   background-color: #fff;
  51. }
  52. .wrap > #checking:checked ~ .blob:nth-child(6) {
  53.   margin-top: 63px;
  54.   margin-left: 63px;
  55.   background-color: #fff;
  56. }
  57. .wrap > #checking:checked ~ .blob:nth-child(7) {
  58.   margin-top: 65px;
  59.   margin-left: 145px;
  60.   background-color: #fff;
  61. }
  62. .wrap > #checking:checked ~ .blob:nth-child(8) {
  63.   margin-top: 112px;
  64.   margin-left: 112px;
  65.   background-color: #fff;
  66. }
  67. .wrap > #checking:checked ~ .blob:nth-child(9) {
  68.   margin-top: 10px;
  69.   margin-left: 160px;
  70.   background-color: #fff;
  71. }
  72. .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(1) {
  73.   transform: rotate(45deg);
  74.   -webkit-transform: rotate(45deg);
  75.   -moz-transform: rotate(45deg);
  76.   -o-transform: rotate(45deg);
  77.   -ms-transform: rotate(45deg);
  78.   margin-top: 37px;
  79. }
  80. .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(2) {
  81.   transform: rotate(-45deg);
  82.   -webkit-transform: rotate(-45deg);
  83.   -moz-transform: rotate(-45deg);
  84.   -o-transform: rotate(-45deg);
  85.   -ms-transform: rotate(-45deg);
  86.   margin-top: -10px;
  87. }
  88. .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(3) {
  89.   opacity: 0;
  90. }

harlem 帧动画是鼠标滑过子菜单时的 CSS 动画效果。完整的代码请参考下载文件。

纯 CSS3 液态胶合效果环形菜单按钮特效

已有 423 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!