css+js实现带波纹的选项卡效果代码-html代码-BFW代码库

css+js实现带波纹的选项卡效果代码

代码语言：html

所属分类：选项卡

代码描述：css+js实现带波纹的选项卡效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <style type="text/css" media="screen">
        ul {
            font-size: 0;
            position: relative;
            padding: 0;
            width: 480px;
            margin: 40px auto;
            user-select: none;
        }

        li {
            display: inline-block;
            width: 160px;
            height: 60px;
            background: #E95546;
            font-size: 16px;
            text-align: center;
            line-height: 60px;
            color: #fff;
            text-transform: uppercase;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .slider {
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 4px;
            background: #4FC2E5;
            transition: all 0.5s;
        }

        .ripple {
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.4);
            -webkit-transform: scale(0);
            -ms-transform: scale(0);
            transform: scale(0);
            position: absolute;
            opacity: 1;
        }

        .rippleEffect {
            -webkit-animation: rippleDrop .4s linear;
            animation: rippleDrop .4s linear;
        }

@-webkit-keyframes rippleDrop {
            100% {
               .........完整代码请登录后点击上方下载按钮下载查看