CSS常用总结

最新推荐文章于 2024-10-07 21:26:16 发布

口咸耳关

最新推荐文章于 2024-10-07 21:26:16 发布

阅读量60

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/qq_36401256/article/details/118577454

版权

本文介绍了CSS3中的过渡和动画效果，展示了如何利用scroll-behavior属性实现平滑的锚点跳转过渡。此外，还探讨了在移动端解决1px边框过粗的问题，提供了一种利用相对定位和伪元素缩放的方法，并针对不同设备像素比进行了适配。同时，提到了Animate动画库在前端开发中的应用。

摘要由CSDN通过智能技术生成

1,CSS3的过渡和动画

点击查看

2,纯css锚点跳转过渡效果 - 神奇的scroll-behavior属性

点击查看

3,解决边框1px太粗的效果

用来解决border: 1px; 在移动端太粗的bug

.border-1px {
    position: relative;
}
.border-1px:after,.options:after {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid #E4E7ED;
    content: '';
}
@media  (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio:1.5) {
    .border-1px:after,.options:after {
        -webkit-transform:scaleY(0.7);
        transform:scaleY(0.7);  
    }
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio:2) {
    .border-1px:after,.options:after {
        -webkit-transform:scaleY(0.5);
        transform:scaleY(0.5);  
    }
}