下面展示一些
内联代码片
。
.container .menu-item .detail .item{border-radius: 10px;width: 555px;padding: 20px;box-sizing: border-box;float: left;margin-left:30px;margin-bottom:30px;box-shadow:2px 3px 10px 2px rgba(0,0,0,0.1);transition-duration:0.1s;transition-timing-function:linear;transition-delay:0s;transition-property:all;}.container .menu-item .detail .item:hover{transform: scale(1.02);box-shadow:5px 5px 20px 5px rgba(0,0,0,0.15);}
transition-duration:变化的时间;
transition-timing-function:linear; 变化的效果
ease:(逐渐变慢)
linear:(匀速)
ease-in:(加速)
ease-out:(减速)
ease-in-out:(先加速后减速)
cubic-bezier 贝塞尔曲线:( x1, y1, x2, y2 )
transition-delay:0s; 变化的延迟执行的时间;
transition-property:要运动的样式(默认值为all,可以有三种定义:all、attr和none);
效果:
鼠标移上去效果: