1、放大效果
a:hover img{ -webkit-transform:scale(1.5,1.5); -moz-transform:scale(1.5,1.5); -transform:scale(1.5,1.5); } <a href="#"><img src="" /></a>
?2、呼吸灯发光
@-webkit-keyframes shineRed { from { -webkit-box-shadow: 0 0 5px #bbb; } 50% { -webkit-box-shadow: 0 0 10px red; } to { -webkit-box-shadow: 0 0 5px #bbb; } } a:hover img{ -webkit-animation-name: shineRed; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite; } <a href="#"><img src="" /></a>
?3、滚动条
::-webkit-scrollbar { width: 30px; height: 30px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb { border-radius: 999px; border: 10px solid transparent; } ::-webkit-scrollbar-track { box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset; } ::-webkit-scrollbar-thumb { min-height: 20px; background-clip: content-box; box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset; -webkit-border-radius: 5px;/*圆角弧度*/ } ::-webkit-scrollbar-corner { background: yellow; }
?