您现在的位置是:门户> 编程语言> HTML/CSS

让人不得不佩服的CSS效果
2020-03-04 44人围观 0条评论
简介让人不得不佩服的CSS效果
    作者:eoe
    1.寻寻觅觅
    先要找个到好效果~才能抄
    http://www.cssplay.co.uk/
    http://www.cssbeauty.com
    等都能常常看到

    今天不小心路过cssplay
    http://www.cssplay.co.uk/ menus/magnifier2.html
    好像好好玩滴样子

    自己开起topstyle来试一下
    建议大家看到好玩的样式~不要急着看他的CSS~没意义

    2.自己动手~丰衣足食
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    http://www.w3.org/1999/xhtml">

        a
        
            ul#hovershow{
                list-style-type: none;
                margin: 50px;
                float: left;
                display: inline;
                clear: both;
            }
            ul#hovershow li{
                float: left;
                display: inline;
                width:64px;
                height: 64px;
                margin: 2px;
            }
            ul#hovershow li a {
                display: block;width:64px;
                height: 64px;

            }
            ul#hovershow li a img{
            border:1px #666 solid;    
            width:100%;
                height:100%;

            }
            ul#hovershow li a:hover{
            position: absolute;
            z-index:100;
            margin: -32px 0 0 -32px;

            }
            ul#hovershow li a:hover img{
            width:128px;
            height:128px;
            border:1px red solid;

            }

        




        
  • http://www.rotui.net/lab/a/zoom/images/1.jpg"  width="128" height="128" alt="test" />

  •     
  • http://www.rotui.net/lab/a/zoom/images/2.jpg"  width="128" height="128" alt="test" />

  •     
  • http://www.rotui.net/lab/a/zoom/images/3.jpg"  width="128" height="128" alt="test" />

  •     
  • http://www.rotui.net/lab/a/zoom/images/4.jpg"  width="128" height="128" alt="test" />

  •     
  • http://www.rotui.net/lab/a/zoom/images/5.jpg"  width="128" height="128" alt="test" />

  •     
  • http://www.rotui.net/lab/a/zoom/images/6.jpg"  width="128" height="128" alt="test" />

  •     
  • http://www.rotui.net/lab/a/zoom/images/7.jpg"  width="128" height="128" alt="test" />






   提示:你可以先修改部分代码再运行

做完自我感觉还不错~~~

主要就是a:hover position: absolute; margin 三个~
不过做后才发现~IE5的A失效了

3.取找补短
是时候看人家的CSS的~`虽然同样也是IE5的A失效
#enlarge {padding:0; margin:2em auto; list-style-type:none; width:240px; height:40px;}
#enlarge li {display:block; float:left; width:40px; height:40px; position:relative;}
#enlarge li a {display:block; width:40px; height:40px; background:transparent; overflow:hidden; position:relative;}
#enlarge li a img {width:100%; height:100%; border:0;}
#enlarge li a:hover {position:absolute; left:-20px; top:-20px; width:80px; height:80px; z-index:100;}
   提示:你可以先修改部分代码再运行

FT ~写得比人家多了一个定义~~
他的方法是用position:relative 配合left top 都是一样用负值来搞的~

4.举一反三
突然想到最近要写的擦车论坛~帖子下面的分页可以用这样来玩~
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

http://www.w3.org/1999/xhtml">

    a
    

        ul#hovershow2{
            list-style-type: none;
            margin: 50px;
            width:200px;
            float: left;
            display: inline;
            clear: both;
        }
        ul#hovershow2 li{
            float: left;
            display: inline;
            width:20px;
            height: 20px;
            margin: 2px;

        }
        ul#hovershow2 li a {
            text-decoration: none;
            display: block;
            width:20px;
            height:20px;
            border:1px red solid;
            background-color: White;
            line-height: 20px;
            font-size: 12px;
            text-align: center;
        }

        ul#hovershow2 li a:hover{
        position: absolute;
        width:40px;
        height: 40px;
        line-height: 40px;
        font-size: 32px;
        z-index:100;
        margin: -10px 0 0 -10px;
        }

    





    
  • 1

  •     
  • 2

  •     
  • 3

  •     
  • 4

  •     
  • 5

  •     
  • 6

  •     
  • 7





  •    提示:你可以先修改部分代码再运行

    好了更好玩~放弃IE了~
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    http://www.w3.org/1999/xhtml">

        a
        

            ul#hovershow2{
                list-style-type: none;
                margin: 50px;
                width:200px;
                float: left;
                display: inline;
                clear: both;
            }
            ul#hovershow2 li{
                float: left;
                display: inline;
                width:20px;
                height: 20px;
                margin: 2px;

            }
            ul#hovershow2 li a {
                text-decoration: none;
                display: block;
                width:20px;
                height:20px;
                border:1px red solid;
                background-color: White;
                line-height: 20px;
                font-size: 12px;
                text-align: center;
            }

            ul#hovershow2 li a:hover{
            position: absolute;
            width:40px;
            height: 40px;
            line-height: 40px;
            font-size: 32px;
            z-index:100;
            margin: -10px 0 0 -10px;
            }
    ul#hovershow2 li:hover + li a{
            position: absolute;
            width:30px;
            height: 30px;
            line-height: 30px;
            font-size: 24px;
            z-index:99;
            margin: -5px 0 0 -5px;
            }

        





        
  • 1

  •     
  • 2

  •     
  • 3

  •     
  • 4

  •     
  • 5

  •     
  • 6

  •     
  • 7





  •    提示:你可以先修改部分代码再运行

    效果不是很是很理想
    试过把后面的A宽改成到刚好挡到左边的~可是看不到数字~不好看
    也试过一边用原来的方法
    一边用:after加了图片在左边~可是~一边有数字一边没有~更不好看~~又不可能做N张有数字的图片~扩展性不好 

    也许这就是css本身所限
    或许~用JS可以更简单的解决~````
    分享:

    文章评论