一些css笔记

「爱情、让人受尽委屈。」 2022-04-24 15:36 195阅读 0赞

css3动画

/*这是一个动画，从上面（top:0）移动到下面（top:364px）*/
    .animTitle{ 
            font-size:62px;
            font-weight:bold;
            color: #fff;
            text-align: center;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            animation:divmove/*(这个是动画名，要与下面的@keyframes对应)*/ 1.5s/*（一共进行的时间）*/ 1/*（执行的次数）*/;
            -webkit-animation:divmove 1.5s 1; /*Safari and Chrome*/
            animation-fill-mode:forwards;/*这个是设定动画完成后的状态,若未设置这个，默认动画完成后回到初始状态*/
        }
        @keyframes divmove	/*进行动画*/
        { 
            0%      { top:0}	/*初始状态*/
            100%    { top:364px}	/*动画完成*/
        }
    
    /*以滑动方式显示隐藏元素*/
    $(".classNema").slideDown();	/*显示*/
    $(".classNema").slideUp();	/*隐藏*/
    
    
    /*css控制一行限制宽度，超出隐藏并显示省略号*/
    .className{ 
    	overflow:hidden;
    	text-overflow:ellipsis;
    	white-space:nowrap;
    }
    /*多行超出省略号*/
    .className{ 
    	display:-webkit-box;
    	-webkit-box-orient:vertical;
    	-webkit-line-clamp:3;	//行数
    	overflow:hidden;
    }
    
    /*iscroll在ios手机上滑动会卡顿，给该滑动的区域元素添加以下css*/
    -webkit-transform:translate3d(0,0,0);
    /*文字渐变色 从上#ffffff到下 #959595*/
    .font{ 
    	background: linear-gradient(0deg, #959595 0%, #ffffff 100%);
    	-webkit-background-clip: text;
    	-webkit-text-fill-color: transparent;
    }

要在页面上做一个鼠标移入上去（元素a），并且隐藏的内容块（元素b）匀速出现，要用到display或者visibility配合transition。（隐藏的内容块要放在鼠标移入上去的元素之下，即元素a为元素b的父元素）  
**1.使用display**  
使用display会使transition得功能失效，让元素b一下子就出现，没有达到匀速出现的效果。  
**2.使用visibility**  
使用visibility就没有上面的那种问题。  
visibility: hidden;隐藏  
visibility: visible;出现

**最后，如果我的笔记对您有帮助，请给我一个赞~ 谢谢！**