zoukankan      html  css  js  c++  java
  • css实现特殊效果

    二级导航翻转效果:
    /*html*/
    <ul>
    <li>111</li>
    <li>222</li>
    <li>333
    <ol>
    <li>444</li>
    <li>555</li>
    <li>666</li>
    </ol>
    </li>
    </ul>
    /*css*/

    li{
    list-style: none;
    margin-right: 30px;
    }
    ul>li{
    float: left;
    }
    ul>li:hover{
    color:orange;
    }
    ul,ol{
    padding: 0;
    margin: 0;
    }
    ol>li{
    opacity: 0;
    transition: all 2s;
    transform: rotatey(180deg);
    color: blue;
    background: gainsboro;
    }
    ul>li:last-child:hover ol>li:first-child{
    opacity: 1;
    transform: none;
    transition-delay: 0s;
    }
    ul>li:last-child:hover ol>li:nth-child(2){
    opacity: 1;
    transform: none;
    transition-delay:200ms;
    }
    ul>li:last-child:hover ol>li:last-child{
    opacity: 1;
    transform: none;
    transition-delay: 400ms;
    }

    从文字下方中间添加下划线:
    /*html*/
    <ul class="box">
    <li>ddd</li>
    <li>ff</li>
    <li>ggg</li>
    </ul>
    /*css*/
    .box li{
    list-style: none;
    float: left;
    text-align: center;
    margin-left: 10px;
    position: relative;
    padding-bottom: 20px;
    }
    从文字下方左边添加下划线:
    /*html*/
    <ul class="box1">
    <li>ddd</li>
    <li>ff</li>
    <li>ggg</li>
    </ul>
    /*css*/
    .box1 li{
    list-style: none;
    float: left;
    80px;
    text-align: center;
    margin-left: 100px;
    position: relative;
    padding-bottom: 20px;
    /*background: red;*/
    }
    .box1 li:before{
    content:"";
    position:absolute ;
    /*border: 2px solid red;*/
    0;
    left:-100%;
    bottom: 0;
    transition: all linear 2s;
    /*display: none;*/
    }
    .box1 li:hover:before{
    border: 2px solid red;
    100%;
    left:0;

  • 相关阅读:
    Linux makefile 教程 很具体,且易懂
    工作流技术学习
    23种设计模式(5):原型模式
    NETSH WINSOCK RESET这条命令的含义和作用?
    OpenGL中shader使用
    【我所認知的BIOS】—&gt;ADU.exe
    socket通信简单介绍
    Android开发之合并文件的几种方式
    Python 单词字母顺序不变且所有倒排
    VC2010 Working Directory
  • 原文地址:https://www.cnblogs.com/huan123/p/8098719.html
Copyright © 2011-2022 走看看