首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    记录下改滚动条样式的css

    @media (min-width: 768px) {     ::-webkit-scrollbar {         width:10px;         height: 10px;     }     ::-webkit-scrollbar-button {         width: 0;         height: 0     }     ::-webkit-scrollbar-button:end:increment,::-webkit-scrollbar-button:start:decrement {         display: block     }     ::-webkit-scrollbar-button:vertical:end:decrement,::-webkit-scrollbar-button:vertical:start:increment {         display: none     }     ::-webkit-scrollbar-thumb:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-track:vertical {         border-color: transparent;         border-style: solid     }     ::-webkit-scrollbar-track:vertical::-webkit-scrollbar-track:horizontal {         background-color: #fff;         -webkit-background-clip: padding-box;         background-clip: padding-box     }     ::-webkit-scrollbar-thumb {         min-height: 28px;         padding-top: 100;         background-color: rgba(0,0,0,.2);         -webkit-background-clip: padding-box;         background-clip: padding-box;         border-radius: 5px;         -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);     }     ::-webkit-scrollbar-thumb:hover {         background-color: rgba(0,0,0,.4);         -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,.25)     }     ::-webkit-scrollbar-thumb:active {         background-color: rgba(0,0,0,.5);         -webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,.35)     }     ::-webkit-scrollbar-thumb:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-track:vertical {         border-width: 0     }     ::-webkit-scrollbar-track:hover {         background-color: rgba(0,0,0,.05);         -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1)     }     ::-webkit-scrollbar-track:active {         background-color: rgba(0,0,0,.05);         -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.14),inset -1px -1

    04

    过渡和2d效果

    过渡就是给css单个或者是多个的属性发生的变化过程添加一个过程,时长的规定看项目需求一般使用简写语法transition:all这里的all代表选中所有的属性值 5s s代表秒,也可以用ms,1秒等于1000ms,所以不推荐用ms一般写上transition:all 5s;就可以有一个简单的过渡了,根据需求写过渡应该在哪里,如果是鼠标指向的话就加在hover的下面,如果过渡后需要回来也有过渡动画就需要加在需要过渡动画的元素里例:div{width: 100px;height: 100px;border:1px solid red;transition:all 3s;}div:hover{left:300px;}这样就是鼠标指向后有一个过渡,也有一个回来的过渡动画。div{width: 100px;height: 100px;border:1px solid red;}div:hover{left:300px;transition:all 3s;}像这样添加就是一旦鼠标移开该div,div会立马回到原点。过渡动画的加速过程是可以自己定义的,一共是七种。例:css部分: ul{

    01
    领券