zoukankan      html  css  js  c++  java
  • 技术代码段

    鼠标经过效果图片或者文字在y轴上下循环移动

     @keyframes dong
     { 
           0% {             
               
    transform: translate(0px, 0px
    );            
            }            
            50% {                
               
    transform: translate(0px, -10px
    );            
            }            
            100% {                
               
    transform: translate(0px, 0px
    );
            }
    }

    .top:hover
    {
        
    animation: dong 1s infinite
    ;
      }


    body
    <div class="top">

        
    <img  src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1585720138&di=9adcd5b68287428091cc8a43a9058585&src=http://a0.att.hudong.com/78/52/01200000123847134434529793168.jpg" alt="w3cschool"  width="200px" height="200px"/>
     
    </div>

    鼠标移进移出(hover) 使背景颜色平滑变换(transition),导航栏

    <!DOCTYPE html>

    <html lang="en">

    <head>

        
    <meta charset="UTF-8">

        
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

        
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

        
    <title>鼠标滑过</title>

        
    <style>

            
    .ul
    {
                
    display: flex
    ;
                
    margin-top: 50px
    ;
                
    margin-left: 100px
    ;
            }
            
    .lis
    {
                
     100px
    ;
                
    height: 50px
    ;
                
    line-height: 50px
    ;
                
    text-align: center
    ;
                
    cursor:pointer
    ;
                
    color: #333333
    ;
                
    border: 1px solid #eeeeee
    ;
                
    position: relative
    ;
                
    transition: 0.6s linear
    ;
            }
            
    .lis:hover
    {
                
    color: #ffffff
    ;
            }
            
    .lis:after
    {
                
     0
    ;
                
    cursor:pointer
    ;
                
    position: absolute
    ;
                
    content: ""
    ;
                
    top: 0
    ;
                
    bottom: 0
    ;
                
    left: 0
    ;
                
    z-index: -1
    ;
                
    background: #2a68cc
    ;
                
    transition: 0.6s linear
    ;
            }
            
    .lis:hover:after
    {
                
     100px
    ;
            }
            
    .ul2
    {
                
    display: flex
    ;
                
    margin-top: 50px
    ;
                
    margin-left: 100px
    ;
            }
            
    .lis2
    {
                
     100px
    ;
                
    height: 50px
    ;
                
    line-height: 50px
    ;
                
    text-align: center
    ;
                
    cursor:pointer
    ;
                
    color: #333333
    ;
                
    border: 1px solid #eeeeee
    ;
                
    position: relative
    ;
                
    transition: 0.6s linear
    ;
            }
            
    .lis2:hover
    {
                
    color: #ffffff
    ;
            }
            
    .lis2:after
    {
                
     0
    ;
                
    cursor:pointer
    ;
                
    position: absolute
    ;
                
    content: ""
    ;
                
    top: 0
    ;
                
    bottom: 0
    ;
                
    right: 0
    ;
                
    z-index: -1
    ;
                
    background: orangered
    ;
                
    transition: 0.6s linear
    ;
            }
            
    .lis2:hover:after
    {
                
     100px
    ;
            }
            
    .ul3
    {
                
    display: flex
    ;
                
    margin-top: 50px
    ;
                
    margin-left: 100px
    ;
            }
            
    .lis3
    {
                
     100px
    ;
                
    height: 50px
    ;
                
    line-height: 50px
    ;
                
    text-align: center
    ;
                
    cursor:pointer
    ;
                
    color: #333333
    ;
                
    border: 1px solid #eeeeee
    ;
                
    position: relative
    ;
                
    transition: 0.6s linear
    ;
            }
            
    .lis3:hover
    {
                
    color: #ffffff
    ;
            }
            
    .lis3:after
    {
                
     100px
    ;
                
    cursor:pointer
    ;
                
    position: absolute
    ;
                
    content: ""
    ;
                
    top: 50%
    ;
                
    bottom: 50%
    ;
                
    right: 0
    ;
                
    left: 0
    ;
                
    z-index: -1
    ;
                
    background: darkcyan
    ;
                
    transition: 0.3s linear
    ;
            }
            
    .lis3:hover:after
    {
                
    top: 0
    ;
                
    bottom: 0
    ;
            }
            
    .ul4
    {
                
    display: flex
    ;
                
    margin-top: 50px
    ;
                
    margin-left: 100px
    ;
            }
            
    .lis4
    {
                
     100px
    ;
                
    height: 50px
    ;
                
    line-height: 50px
    ;
                
    text-align: center
    ;
                
    cursor:pointer
    ;
                
    color: #333333
    ;
                
    border: 1px solid #eeeeee
    ;
                
    position: relative
    ;
                
    transition: 0.6s linear
    ;
            }
            
    .lis4:hover
    {
                
    color: #ffffff
    ;
            }
            
    .lis4:after
    {
                
     100px
    ;
                
    cursor:pointer
    ;
                
    position: absolute
    ;
                
    content: ""
    ;
                
    top: 100%
    ;
                
    bottom: 0
    ;
                
    right: 0
    ;
                
    left: 0
    ;
                
    z-index: -1
    ;
                
    background: brown
    ;
                
    transition: 0.3s linear
    ;
            }
            
    .lis4:hover:after
    {
                
    top: 0
    ;
                
    bottom: 0
    ;
            }
            
            
        
    </style>

    </head>

    <body>

        
    <div class="ul">

            
    <div class="lis">左到右</div>

            
    <div class="lis">左到右</div>

            
    <div class="lis">左到右</div>

            
    <div class="lis">左到右</div>

            
    <div class="lis">左到右</div>

        
    </div>

        
    <div class="ul2">

            
    <div class="lis2">右到左</div>

            
    <div class="lis2">右到左</div>

            
    <div class="lis2">右到左</div>

            
    <div class="lis2">右到左</div>

            
    <div class="lis2">右到左</div>

        
    </div>

        
    <div class="ul3">

            
    <div class="lis3">上下</div>

            
    <div class="lis3">上下</div>

            
    <div class="lis3">上下</div>

            
    <div class="lis3">上下</div>

            
    <div class="lis3">上下</div>

        
    </div>

        
    <div class="ul4">

            
    <div class="lis4">下到上</div>

            
    <div class="lis4">下到上</div>

            
    <div class="lis4">下到上</div>

            
    <div class="lis4">下到上</div>

            
    <div class="lis4">下到上</div>

        
    </div>

    </body>

    </html>

     鼠标经过图片放大

    <!DOCTYPE html>

    <html lang="en">

    <head>

        
    <meta charset="UTF-8">

        
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

        
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

        
    <title>鼠标滑过</title>

        
    <style>

          
    .ul
    {
              
     80%
    ;
              
    margin: 0 auto
    ;
              
    text-align: center
    ;
          }
          
    img
    {
              
    transition: all 0.6s
    ;

          }
          
    img:hover
    {
              
    transform: scale(3
    );
          }
        
    </style>

    </head>

    <body>

        
    <div class="ul">

          
    <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2371811940,4010188740&fm=111&gp=0.jpg" alt="">

        
    </div>

    </body>

    </html>

    鼠标经过动画出现线条

    <!DOCTYPE html>

    <html lang="en">

    <head>

        
    <meta charset="UTF-8">

        
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

        
    <title>鼠标经过动画出现线条</title>

        
    <style>

    .div1
    {
        
    position: relative
    ;
        
    100px
    ;
        
    height:100px
    ;
        
    background-color: black
    ;
        
    left: 500px
    ;
        }
    .div1:before,.div1:after
    {
        
    content:"";display:block
    ;
        
     0;height:0;border:2px solid transparent
    ;
        
    box-sizing: border-box;position: absolute
    ;}
     
    .div1:before{top:0;left:0
    ;
    transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s
    ;
    }
    .div1:after{right:0;bottom:0
    ;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in
     ;}
     
    .div1:hover:before{100%;height:100%
    ;
    transition:width 0.2s ease-in ,height 0.2s ease-in 0.2s

    ;
    border-top-color:rgb(0, 255, 55);border-right-color:rgb(0, 255, 64
    );}
    .div1:hover:after
    {
        
    100%
    ;
        
    height:100%
    ;
       
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.4s,height 0.3s ease-in 0.6s
    ;
       
    border-bottom-color:#ff00f2
    ;
       
    border-left-color:#ff00c8
    ;}
        
    </style>

    </head>

    <body>

        
    <div class="div1"></div>

    </body>

    </html>

    漂浮广告

    <!doctype html>

    <html lang="en">

    <head>

        
    <meta charset="UTF-8">

        
    <title></title>

    </head>

    <body>

        
    <style type="text/css">

            
    #demo
     {
                
     100px
    ;
                
    height: 100px
    ;
                
    position:absolute
    ;
                
    border-radius:50px
    ;
            }
        
    </style>

     
        
    <script type="text/javascript">

            
    window.onload = function
    (){
                
    var demo = document.getElementById('demo'
    );
                
    var sx = sy = 10
    ;
                
    var x = y = 0
    ;
     
                
    function move
    (){
                    
    if(document.documentElement.clientWidth - demo.offsetWidth-10 < x || x < 0
    ){
                        
    sx = -sx
    ;
                    }
     
                    
    if(document.documentElement.clientHeight - demo.offsetHeight-10 < y || y < 0
    ){
                        
    sy = -sy
    ;
                    }
     
                    
    x = demo.offsetLeft + sx
    ;
                    
    y = demo.offsetTop + sy
    ;
     
                    
    demo.style.left = x + 'px'
    ;
                    
    demo.style.top = y + 'px'
    ;
                }
     
                
    var timer = setInterval(move, 100
    );
     
                
    demo.onmouseover = function
    (){
                    
    clearInterval(timer
    );
                }
     
                
    demo.onmouseout = function
    (){
                    
    timer = setInterval(move, 100
    );
                }
            }
        
    </script>

     
        
    <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3173584241,3533290860&fm=26&gp=0.jpg" id="demo" />

        
    </body>

    </html>

     漂浮广告2


    <!DOCTYPE HTML>
      
    <html lang="en">
      
    <head>
      
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      
    <title>Js广告_全屏漂浮广告</title>
      
    <style type="text/css">
      
    div#roll{100px;height:100px; color:#fff; position:absolute
    ;}  
    </style>
      
    </head>
      
       
    <body>
      
    <div id="roll"><img src="http://img0.imgtn.bdimg.com/it/u=529916397,1588508565&fm=26&gp=0.jpg" alt=""></div>
      
    <div><img src="http://img0.imgtn.bdimg.com/it/u=529916397,1588508565&fm=26&gp=0.jpg" alt="" style="height: 2000px;"></div>
      

    <script type="text/javascript">
      
    var ggRoll
     = {  
        
    roll : document.getElementById("roll"
    ),  
        
    speed : 20
    ,  
        
    statusX : 1
    ,  
        
    statusY : 1
    ,  
        
    x : 100
    ,  
        
    y : 300
    ,  
        
    winW : document.documentElement.clientWidth - document.getElementById("roll").offsetWidth
    ,  
        
    winH : document.documentElement.clientHeight - document.getElementById("roll").offsetHeight
    ,  
        
    Go : function
    (){  
            
    this.roll.style.left=this.x+'px'
    ;  
            
    this.roll.style.top=this.y+'px'
    ;  
                
            
    this.x = this.x + (this.statusX? -1: 1
    )  
            
    if(this.x < 0) {this.statusX = 0
    }  
            
    if(this.x > this.winW) {this.statusX = 1
    }  
                
            
    this.y = this.y + (this.statusY? -1: 1
    )  
            
    if(this.y < 0) {this.statusY = 0
    }  
            
    if(this.y > this.winH) {this.statusY = 1
    }  
        }  
    }  
    var interval = setInterval("ggRoll.Go()", ggRoll.speed
    );  
    ggRoll.roll.onmouseover = function(){clearInterval(interval
    )};  
    ggRoll.roll.onmouseout = function(){interval = setInterval("ggRoll.Go()", ggRoll.speed
    )};  
       
    </script>
      
       
       
    </body>

    </html>

  • 相关阅读:
    Unlicensed ARC session – terminating!
    ArcGIS读取dem格式数据
    OCIEnvCreate 失败,返回代码为 -1的解决方法
    PowerDesigner设计的数据库 ORA-0092
    Oracle空间查询 ORA-28595
    PowerDesigner添加表注释
    C# 动态解析表达式
    远程桌面不能交互复制粘贴
    ArcGIS10.4 Runtime Error R6034
    ArcGIS Add-in ValidateAddInXMLTask”任务意外失败
  • 原文地址:https://www.cnblogs.com/lvqiupingboke-2019/p/13042470.html
Copyright © 2011-2022 走看看