zoukankan      html  css  js  c++  java
  • CSS揭秘(四)视觉效果

    Chapter 4

    1. 单侧投影

    为元素设置投影可以使用 box-shadow 属性,指定三个长度值(X轴偏移量、Y轴偏移、模糊半径)与一个颜色值

    要想只在底部设置投影,需要用到第四个参数:投影的扩张半径,如果该值为负,就代表缩小投影尺寸

    box-shadow: 0 2px 4px black;  //即使设置X轴偏移量为0,两侧还会有轻微的投影

    box-shadow: 0 5px 5px -5px black,
            0 -5px 5px -5px blue; //通过逗号分隔,单独设置各边投影

    此外,还可以通过 filter:drop-shadow();为不规则图形添加投影

    2. 染色效果

    鼠标聚焦到图像上可以是图片颜色更改或者复原,是现在网页很常见的一种操作,看起来也很炫

    可以把多个滤镜组合起来实现

     <img src="342.png">
    ------------------------------
    img {
        width: 400px;
        height: 300px;
        transition: 0.5s filter; //过渡动画效果
        filter: sepia(1);  //降低色相值
              :saturate,  //提升像素饱和度
              :hue-rotate
    }
    img:hover,
    img:focus{
        filter:none;
    }

         

    3. 毛玻璃效果

    这种效果现在在手机系统下拉菜单经常看到,或者 iPhone 的 siri 界面,都是毛玻璃效果

    通常可以通过调整div背景透明度做效果,但这样并不是毛玻璃效果,真正的毛玻璃效果需要用伪元素来实现,在要加背景的元素底部放一个伪元素,然后对这个伪元素进行模糊处理即可

    <body>
    <
    main> <blockquote>“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”</em> <footer><cite>Oscar Wilde, The Picture of Dorian Gray</cite></footer> </blockquote> </main>
    <body>
    
    
    body, main::before {
    	background: url("http://csssecrets.io/images/tiger.jpg") 0 / cover fixed;
    }
    main {
        position: relative;
        margin: 0 auto;
        padding: 1em;
        max- 23em;
        background: hsla(0,0%,100%,.25) border-box;
        overflow: hidden;   //裁去多余的模糊效果
        border-radius: .3em;
        box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
                    0 .5em 1em rgba(0, 0, 0, 0.6);
        text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
    }
    
    main::before {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
    margin: -30px; z-index: -1; //放到main的下层 filter: blur(20px); }

  • 相关阅读:
    [国家集训队]数颜色 / 维护队列
    【模板】二逼平衡树(线段树+平衡树)
    jenkins实现接口自动化持续集成(python+pytest+ Allure+git)
    Locust快速上手指南
    缓解多分类的样本不均衡问题
    PlayStation@4功能介绍及测试应用
    APP专项测试-弱网测试
    游戏自动化测试-局内战斗
    Windows下JMeter分布式压测环境搭建
    基于simhash的文本去重原理
  • 原文地址:https://www.cnblogs.com/sleeping-dog/p/8723750.html
Copyright © 2011-2022 走看看