zoukankan      html  css  js  c++  java
  • css3 圆点淡出

    <!DOCTYPE html>
    <html><head>
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="always" name="referrer"><meta name="theme-color" content="#2932e1">
    <meta name="description" content="。">
    
    
    
    
    <title>点淡出</title>
    <style index="newi" type="text/css">
    .shopee-popover, .shopee-popover__ref {
        display: inline-block;
        top:15px;
    }
    :not(input):not(textarea) {
        -webkit-tap-highlight-color: transparent;
    }
    
    
    .sidebar-menu-item-dot[data-v-5fe982fb] {
        position:relative;
        display:inline-block;
        width:16px;
        height:16px
    }
    .sidebar-menu-item-dot[data-v-5fe982fb]:after,.sidebar-menu-item-dot[data-v-5fe982fb]:before {
        content:"";
        display:inline-block;
        position:absolute;
        top:5px;
        left:5px;
        width:6px;
        height:6px;
        border-radius:50%;
        background-color:#ee4d2d
    }
    .sidebar-menu-item-dot[data-v-5fe982fb]:after {
        -webkit-animation:1s ease-in-out 0s infinite pulsateDotShadow-data-v-5fe982fb;
        animation:1s ease-in-out 0s infinite pulsateDotShadow-data-v-5fe982fb
    }
    .sidebar-menu-item-collapse[data-v-5fe982fb] {
        width:16px;
        height:16px;
        -webkit-transition:-webkit-transform .2s ease;
        transition:-webkit-transform .2s ease;
        transition:transform .2s ease;
        transition:transform .2s ease,-webkit-transform .2s ease
    }
    .sidebar-menu-collapse .sidebar-menu-item-collapse[data-v-5fe982fb] {
        -webkit-transform:rotate(-180deg);
        transform:rotate(-180deg)
    }
    .sidebar-menu-item:hover .sidebar-menu-item-collapse[data-v-5fe982fb] {
        color:#ee4d2d
    }
    @-webkit-keyframes pulsateDotShadow-data-v-5fe982fb {
        0% {
        -webkit-transform:scale(1);
        transform:scale(1);
        opacity:1
    }
    to {
        -webkit-transform:scale(2.6);
        transform:scale(2.6);
        opacity:.1
    }
    }@keyframes pulsateDotShadow-data-v-5fe982fb {
        0% {
        -webkit-transform:scale(1);
        transform:scale(1);
        opacity:1
    }
    to {
        -webkit-transform:scale(2.6);
        transform:scale(2.6);
        opacity:.1
    }
    }
    
    </style>
    <body>
    sssssssssssssssss
    <div class="shopee-popover__ref">
    <span data-v-5fe982fb="" class="sidebar-menu-item-dot"></span> 
    </div>
    </body>
    </html>
  • 相关阅读:
    kettle7.0数据库迁移(MySQL迁移到Postgresql,迁移过程中自动创建表结构)
    正向代理与反向代理区别
    MySQL存储引擎相关知识点
    设计模式-装饰器模式
    设计模式-策略模式
    算法—数据结构学习笔记(二)栈
    Spring Boot2.0学习笔记(一)
    关联容器——map
    迭代器
    C风格字符串
  • 原文地址:https://www.cnblogs.com/Fooo/p/15559920.html
Copyright © 2011-2022 走看看