一款利用css3的鼠标经过动画显示详情特效的实例教程

2020-05-07 06:05:10易采站长站整理

  css3代码:

CSS Code复制内容到剪贴板

html   
        {   
            font-family: ‘Noto Sans’ , serif;   
        }   
           
        .blocks   
        {   
            margin: auto;   
            max-width: 1070px;   
            padding: 0;   
        }   
           
        .blocks li   
        {   
            color: #fff;   
            background-color: #2196F3;   
            cursor: default;   
            float: left;   
            list-style: none;   
            margin: 1%;   
            padding: 60px 0;   
            position: relative;   
            text-align: center;   
            -webkit-transition: .3s cubic-bezier(.3,0,0,1.3);   
            transition: .3s cubic-bezier(.3,0,0,1.3);   
            width: 31%;   
            border-radius: 4px;   
            font-weight: bold;   
        }   
           
        .blocks li:hover