美文网首页
css小知识

css小知识

作者: GG_lyf | 来源:发表于2020-11-10 13:41 被阅读0次

    前言

      将近一个月没更新过博客了,最近在忙一个项目,这个东西随说是简单,奈何甲方志存高远,硬是想让我们把一个子虚乌有的东西吹成已经存在的真东西。文案之类的都行了,页面这东西咱也能做出来,就是甲方的需求模糊不定,想好看还不给素材,哥几个只能硬着头皮肝了。哥们审美不行,只能做做css,只是后端带哥被硬生生逼成了美工。说实话,人家做的图还真的就比我做的漂亮。我还是写写css吧。


    开搞

    1.想要做一个背景模糊但内容清楚的效果,直接把背景给一个background,用rgba来控制颜色(背景图片)和透明度就行,之后给这个背景的标签一个:hover,里面还可以添加样式,这样背景上的文字或图片不会模糊。

    div {
        background: rgba(255, 255, 255, 1);
        box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);      
    }
    
    div:hover {
        box-shadow: 10px 10px 5px 5px #999999;
    }
    

    2.想要一个鼠标移到图片上,图片等比放大的效果,

    div {
        transition: all 0.8s; //缩放速度
    }
    
    div:hover {
        transform: scale(1.1);//放大比例
    }
    

    3.如果想做一个让谷歌,火狐或IE都适配的东西就要用这些东西

    _和- , ie6可以识别;
    -webkit- ,针对safari,chrome浏览器的内核CSS写法
    -moz-,针对firefox浏览器的内核CSS写法
    -ms-,针对ie内核的CSS写法
    -o-,针对Opera内核的CSS写法

    相关文章

      网友评论

          本文标题:css小知识

          本文链接:https://www.haomeiwen.com/subject/ajjkvktx.html