一些css笔记

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;
}
/*水平滚动 - 父元素*/
.css{
	overflow-y: scroll;
	white-space: nowrap;
}
/* 子元素 */
.c{
	display: inline-block;
}
/* 滚动条消失 */
::-webkit-scrollbar{
	display: none;
}

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

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