伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:导航-其他导航
 1631  25  查看评论 (1)
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容9

使用方法 

HTML结构在HTML结构中,主菜单按钮使用input[type='checkbox']的复选框和一个<label>元素来制作。子菜单按钮是一组<button>元素。<div class='wrap'>   <input type='checkbox' id='checking' style='display:none;' />   <button class='blob'>★</button>   <button class='blob'>?</button>   <button class='blob'>?</button>   <button class='blob'>?</button>   <button class='blob'>?</button>   <button class='blob'>?</button>   <button class='blob'>?</button>   <button class='blob'>?</button>   <label class='blob' for='checking'>     <span class='bar'></span>           <span class='bar'></span>     <span class='bar'></span>   </label> </div>该环形菜单的液态融合效果使用SVG过滤器来制作。在SVG过滤器中,有3个滤镜:第一个是高斯模糊滤镜,第二个是颜色矩阵滤镜,第三个是混合滤镜。混合滤镜可以将多个韦德1946手机版客户端滤镜混合为一个。<svg>   <defs>     <filter id="filt">       <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />       <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" />       <feBlend in2="filt" in="SourceGraphic" result="mix" />     </filter>   </defs> </svg>在这个效果中,颜色矩阵滤镜的韦德1946手机版客户端是高斯模糊滤镜,然后混合滤镜将颜色矩阵的输出和源图像进行混合,制作液体融合效果。       CSS样式在CSS样式中,需要注意的是引用SVG过滤器的方式。在非webkit内核的浏览器中,外连的css样式表中引用SVG过滤器需要写完整的路径,而如果是内联的CSS样式可以直接通过ID来引用。filter: url("../index.html/#filt"); -webkit-filter: url("#filt");主菜单按钮的点击时通过checkbox hack来实现的。.wrap .blob[for="checking"] {   z-index: 30;   font-size: 60px;   text-align: center;   color: #fff;   transition: transform 0.5s ease-in-out 0.2s;   -webkit-transition: -webkit-transform 0.5s ease-in-out 0.2s;   -moz-transition: transform 0.5s ease-in-out 0.2s;   -o-transition: transform 0.5s ease-in-out 0.2s;   -ms-transition: transform 0.5s ease-in-out 0.2s; } .wrap .blob:not([for="checking"]) {   width: 50px;   height: 50px;   top: 15px;   left: 15px;   font-size: 30px;   transition: all 0.5s ease-in-out;   -webkit-transition: all 0.5s ease-in-out;   -moz-transition: all 0.5s ease-in-out;   -o-transition: all 0.5s ease-in-out;   -ms-transition: all 0.5s ease-in-out; } .wrap .blob:not([for="checking"]):hover {   color: #F44336;   animation: harlem 0.5s linear forwards;   -webkit-animation: harlem 0.5s linear forwards;   -moz-animation: harlem 0.5s linear forwards;   -o-animation: harlem 0.5s linear forwards;   -ms-animation: harlem 0.5s linear forwards; } .wrap > #checking:checked ~ .blob:nth-child(2) {   margin-left: 85px;   margin-top: 10px;   background-color: #fff; } .wrap > #checking:checked ~ .blob:nth-child(3) {   margin-top: 145px;   margin-left: 65px;   background-color: #fff; } .wrap > #checking:checked ~ .blob:nth-child(4) {   margin-top: 160px;   margin-left: 10px;   background-color: #fff; } .wrap > #checking:checked ~ .blob:nth-child(5) {   margin-top: 85px;   margin-left: 10px;   background-color: #fff; } .wrap > #checking:checked ~ .blob:nth-child(6) {   margin-top: 63px;   margin-left: 63px;   background-color: #fff; } .wrap > #checking:checked ~ .blob:nth-child(7) {   margin-top: 65px;   margin-left: 145px;   background-color: #fff; } .wrap > #checking:checked ~ .blob:nth-child(8) {   margin-top: 112px;   margin-left: 112px;   background-color: #fff; } .wrap > #checking:checked ~ .blob:nth-child(9) {   margin-top: 10px;   margin-left: 160px;   background-color: #fff; } .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(1) {   transform: rotate(45deg);   -webkit-transform: rotate(45deg);   -moz-transform: rotate(45deg);   -o-transform: rotate(45deg);   -ms-transform: rotate(45deg);   margin-top: 37px; } .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(2) {   transform: rotate(-45deg);   -webkit-transform: rotate(-45deg);   -moz-transform: rotate(-45deg);   -o-transform: rotate(-45deg);   -ms-transform: rotate(-45deg);   margin-top: -10px; } .wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(3) {   opacity: 0; }harlem帧动画是鼠标滑过子菜单时的CSS动画效果。完整的代码请参考下载文件。
相关伟德BETVICTOR-其他导航

CSS3侧边响应卡片式导航

CSS3侧边响应卡片式导航
  其他导航
 11833  116

纯CSS3多级环形导航菜单(原创)

使用纯css3开发的多级环绕导航菜单,扩展方便。
  其他导航
 12206  112

jQuery仿微信自定义菜单

jQuery仿微信自定义菜单全屏自适应手机底部弹出菜单
  其他导航
 4217  44

jQuery顶部导航固定

jQuery向下滚动页面顶部导航固定手机1946韦德最新网站,多种展示效果。
  其他导航
 10423  99

讨论这个项目(1)回答他人问题或分享伟德BETVICTOR使用方法奖励jQ币

    流淌在心上的河流 0
    2018/1/20 14:38:27
    function () { var he = 'he'; } 回复
取消回复