css基础

最新推荐文章于 2024-05-25 15:46:46 发布

···空···

最新推荐文章于 2024-05-25 15:46:46 发布

阅读量258

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_59424057/article/details/123337267

版权

工作中常用的css样式；

1、弹窗的背景模糊：backdrop-filter: blur(20px);

2、隐藏滚动条：.index::-webkit-scrollbar { display: none; }

3、优化滚的效果：scroll-snap-type；

通俗的讲一下：scroll-snap-type: y mandatory;这个属性加在滚动内容的父级，

然后：scroll-snap-align: start;这个属性加载滚动的内容上。代码例子：

<div class="divFather">
    <div class="divSon">
        这个div里边有很长很长的内容，可以放你想放的任何东西；假如这个内容长出天际！                        
    </div>
    <div class="divSon">
        这个div里边有很长很长的内容，可以放你想放的任何东西；假如这个内容长出天际！                        
    </div>
    <div class="divSon">
        这个div里边有很长很长的内容，可以放你想放的任何东西；假如这个内容长出天际！                        
    </div>
</div>
<style>
    .divFather{
      width:100vw;
      height:100vh;
      scroll-snap-type: y mandatory;
    }
    .divSon{
      width:100vw;
      height:100vh;
      scroll-snap-align: start;
    }
</style>

以上代码可以实现的功能是：滚动一下鼠标滚轮下一个整屏的元素就可以自动吸顶。

scroll-snap-type: y mandatory;这个属性中的y换成x的话就是横向滚动

scroll-snap-tye: x mandatory;像这样；其中还有好多属性可以自行搜索。

4、动画效果：animation：all 0.3s；这个是个缓动效果，意思是所有的属性变化在0.3秒内完成；我感觉这个还是挺常用的。