zoukankan      html  css  js  c++  java
  • 使用css3 filter 实现移入背景变色效果

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    *{
    padding: 0;
    margin: 0;
    }
    ul{
    1100px;
    margin: 20px auto;
    letter-spacing: -4px;
    word-spacing: -4px;
    font-size: 0;
    }
    li{
    margin: 5px;
    }
    ul li img{
    200px;
    height: 150px;

    }
    ul li{
    list-style: none;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px #000;
    }
    .gallery li:nth-child(2){
    -webkit-filter:grayscale(1);/*灰度*/
    }
    .gallery li:nth-child(3){
    -webkit-filter:sepia(1);/*褐色*/
    }
    .gallery li:nth-child(4){
    -webkit-filter:saturate(0.5);/*用乌贼墨颜料*/
    }
    .gallery li:nth-child(5){
    -webkit-filter:hue-rotate(90deg);/*色彩-旋转*/
    }
    .gallery li:nth-child(6){
    -webkit-filter:invert(1);/*颠倒-反转*/
    }
    .gallery li:nth-child(7){
    -webkit-filter:opacity(0.2);/*透明度*/
    }
    .gallery li:nth-child(8){
    -webkit-filter:blur(3px);/*模糊度*/
    }
    .gallery li:nth-child(9){
    -webkit-filter:drop-shadow(5px 5px 5px #ccc);/*降下-阴影*/
    }
    .gallery li:nth-child(10){
    -webkit-filter:saturate(6) hue-rotate(361deg) brightness(.6);/*用乌贼墨颜料 色彩-旋转 */
    }
    .gallery li:not(:hover){
    -webkit-filter:blur(2px) grayscale(1);/*模糊度 */
    }
    /*filter 10种特效*/
    /*grayscale灰度*/
    /*sepia褐色(求专业指点翻译)*/
    /*saturate饱和度*/
    /*hue-rotate色相旋转*/
    /*invert反色*/
    /*opacity透明度*/
    /*brightness亮度*/
    /*contrast对比度*/
    /*blur模糊*/
    /*drop-shadow阴影*/

    </style>
    </head>
    <body>
    <ul class="gallery">
    <li><img src="img/tutu.png"></li>
    <li><img src="img/tutu.png"></li>
    <li><img src="img/tutu.png"></li>
    <li><img src="img/tutu.png"></li>
    <li><img src="img/tutu.png"></li>
    <li><img src="img/tutu.png"></li>
    <li><img src="img/tutu.png"></li>
    <li><img src="img/tutu.png"></li>
    <li><img src="img/tutu.png"></li>
    <li><img src="img/tutu.png"></li>
    </ul>

    </body>
    </html>

  • 相关阅读:
    ubuntu下安装gcc,g++
    React Native核心组件View的介绍
    React Native组件生命周期
    React Native的props和state的介绍
    android出现anr(application not response)的分析
    HDU 2050:折线分割平面
    Codeforces 989A:A Blend of Springtime
    Codeforces 990B :Micro-World
    51Nod 1089:最长回文子串 V2(Manacher算法)
    51Nod 1088:最长回文子串(暴力)
  • 原文地址:https://www.cnblogs.com/ZH1132672711/p/5606249.html
Copyright © 2011-2022 走看看