css实现一个滚动的横幅鼠标悬浮放大镜效果代码

代码语言:html

所属分类:布局界面

代码描述:css实现一个滚动的横幅鼠标悬浮放大镜效果代码

代码标签: css 横幅 放大镜

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>



    <style>
        ::-moz-selection {
          background-color: transparent;
        }
        
        ::selection {
          background-color: transparent;
        }
        
        body {
          width: 100%;
          background-color: #ffdf32;
          margin: 0;
          overflow: hidden;
        }
        
        h1 {
          -webkit-animation: banner 10s linear infinite;
                  animation: banner 10s linear infinite;
          box-sizing: border-box;
          height: 60px;
          -webkit-backface-visibility: hidden;
                  backface-visibility: hidden;
          background-color: ghostwhite;
          color: mediumseagreen;
          cursor: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNNDk3LjkzOCw0MzAuMDYybC02Mi4yOC02Mi4yOGMtMTguMTU2LDI2LjY1NS00MS4yMiw0OS43MTktNjcuODc1LDY3Ljg3NWw2Mi4yOCw2Mi4yOGMxOC43NSwxOC43NSw0OS4xNTYsMTguNzUsNjcuODc1LDAgICAgQzUxNi42ODgsNDc5LjE4OCw1MTYuNjg4LDQ0OC44MTIsNDk3LjkzOCw0MzAuMDYyeiIgZmls.........完整代码请登录后点击上方下载按钮下载查看

网友评论0