样式过渡transition
/*
transition : css属性 过渡时间 速率 何时开始;
*/
height: 200px;
transition : height 2s linear 1s; /* 会将高度从零开始,在2秒内慢慢变成200, linear匀速, 1s后开始过渡, 从而形成动画效果 */
/*属性 transition-property:
all
css属性(可用逗号分隔)
none
过渡时间 transition-duration:
以秒为单位 1s
速率 transition-timing-function:
linear 匀速;
默认为ease 低速开始,然后加快,结束前慢;
ease-in 低速开始;
ease-out 低速结束;
ease-in-out 低速开始和结束
cubic-bezier(n,n,n,n) 自定义
何时开始 transition-delay :
以秒为单位 1s
*/
.content .right-banner .rbanner:hover{
box-shadow: 0px 0px 40px #181818;
background-color: rgba(255,255,255,0.7);
transform: translateY(-5px);
transform: translateX(5px);
transition: all 1s; /* all 是指该选择器中所有的css属性 */
}