html标题动态修改滚动效果

代码语言:html

所属分类:其他

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>  Document Title Ticker</title>
  
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            background: #eff5f5;
            width: 100%;
            height: 100%;
        }

        h1 {
            color: #80b3b3;
            position: absolute;
            font: 34px sans-serif;
            font-weight: bold;
            margin: -100px 0 0 -250px;
            text-align: center;
            width: 500px;
            top: 50%;
            left: 50%;
        }

        a {
            color: #80b3b3;
            text-decoration: underline;
            position: absolute;
            font: 13px sans-serif;
            margin: 55px 0 0 -150px;
            text-align: center;
            width: 300px;
            top: 50%;
            left: 50%;
        }

        input {
            background: #eff5f5;
            width: 500px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font: 18px sans-serif;
            position: absolute;
            border-radius: 100px;
            border: 1px solid #80b3b3;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%) scale(0.85);
            transform: translate(-50%, -50%) scale(0.85);
            color: #80b3b3;
            letter-spacing: 0.05em;
            transition: all 0.25s ease-in-out;
        }
        input:focus {
            outline: none;
            transition: all 0.15s ease-in-out;
            -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scal.........完整代码请登录后点击上方下载按钮下载查看

网友评论0