一款利用纯css3实现的360度翻转按钮的实例教程

2020-05-01 09:35:56易采站长站整理

        }   
           
        ul.flatflipbuttons li:nth-of-type(3) a   
        {   
            background: #80C5EC;   
        }   
           
        ul.flatflipbuttons li:nth-of-type(4) a   
        {   
            color: white;   
            background: #635746;   
        }   
           
        ul.flatflipbuttons li:nth-of-type(5) a   
        {   
            background: #F2C96D;   
        }   
           
        ul.flatflipbuttons li a span   
        {   
            -moz-box-sizing: border-box;   
            -webkit-box-sizing: border-box;   
            box-sizing: border-box;   
            display: table-cell;   
            vertical-align: middle;   
            width: 100%;   
            height: 100%;   
            -webkit-transition: all 300ms ease-out; /* CSS3 transition. */  
            -moz-transition: all 300ms ease-out;   
            transition: all 300ms ease-out;   
        }