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

纯CSS3液态胶合效果的环形菜单按钮特效明月H5课程　　这是一款效果非常有创意的纯CSS3液态胶合效果的环形菜单按钮特效。该环行菜单按钮在用户点击主菜单按钮后，两行子菜单会以环状的方式打开，并且子菜单就像液体一样，能够胶合，具有弹性，效果非常炫酷使用方法　　HTML结构　　在HTML结构中，主菜单按钮使用input[type=checkbox]的复选框和一个元素来制作。子菜单按钮是一组元素。1div?class=wrap2??input id=checking?style=DISPLAY: nonetype=checkbox3??/div　　该环形菜单的液态融合效果使用SVG过滤器来制作。在SVG过滤器中，有3个滤镜：第一个是高斯模糊滤镜，第二个是颜色矩阵滤镜，第三个是混合滤镜。混合滤镜可以将多个输入滤镜混合为一个。1svg2??defs3????filter id=filt4??????feGaussianBlur stdDeviation=10?result=blur?in=SourceGraphic/feGaussianBlur5??????feColorMatrix result=filt?in=blur?values=1 0 0 0 0? 0 1 0 0 0? 0 0 1 0 0? 0 0 0 18 -7?mode=matrix/feColorMatrix6??????feBlend result=mix?in=SourceGraphic?in2=filt/feBlend7????/filter8??/defs9/svg　　在这个效果中，颜色矩阵滤镜的输入是高斯模糊滤镜，然后混合滤镜将颜色矩阵的输出和源图像进行混合，制作液体融合效果。?　　关于SVG滤镜的详细介绍，可以参考：SVG进阶 | SVG过滤器(SVG Filters)?　　CSS样式　　在CSS样式中，需要注意的是引用SVG过滤器的方式。在非webkit内核的浏览器中，外连的css样式表中引用SVG过滤器需要写完整的路径，而如果是内联的CSS样式可以直接通过ID来引用。1filter: url(../index.html/#filt);2-webkit-filter: url(#filt);　　主菜单按钮的点击时通过checkbox hack来实现的。01.wrap .blob[for=checking] {02??z-index: 30;03??font-size: 60px;04??text-align: center;05??color: #fff;06??transition: transform 0.5s ease-in-out 0.2s;07??-webkit-transition: -webkit-transform 0.5s ease-in-out 0.2s;08??-moz-transition: transform 0.5s ease-in-out 0.2s;09??-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:check