css实现一个全屏显示格言与时间的锁屏页面效果代码-html代码-BFW代码库

css实现一个全屏显示格言与时间的锁屏页面效果代码

代码语言：html

代码描述：css实现一个全屏显示格言与时间的锁屏页面效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">

    <style>
        html, body {
            overflow-x: hidden;
            overflow-y: hidden;
            height: 100%;
            width: 100%;
            position: absolute;
            background-color: black;
            background-image: url('//repo.bfw.wiki/bfwrepo/image/5d65eaff5a217.png');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: top;
            z-index: -2;
        }

        #display {
            color: white;
            font-size: 2.9em;
            top: 10px;
            border-bottom: thin solid;
            padding-bottom: 20px;
            opacity: 0.80;
            filter: alpha(opacity=80);
            /* For IE8 and earlier */
        }

        #date {
            color: white;
            font-size: 1.3em;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-weight: normal;
            letter-spacing: 0.2em;
            opacity: 0.6;
            filter: alpha(opacity=60);
            /* For IE8 and earlier */
        }

        #footer {
            width: 100%;
            height: 40px;
            position: fixed;
            bottom: -1px;
            background-color: white;
            text-align: center;
            opacity: 0.5;
            filter: alpha(opacity=50);
            /* For IE8 and earlier */
        }

        #line {
            width: 100%;
            bottom: 4em;
            position: fixed;
            border-bottom: solid white;
            padding: 15px;
            opacity: 0.5;
            filter: alpha(opacity=50);
            /* For IE8 and earlier */
        }

        .navbar {
            position: fixed;
            width: 100%;
            opacity: 0.6;
            filter: alpha(opacity=60);
            /* For IE8 and earlier */
        }

        .wrapper {
            background-color: red;
        }

        span {
            border-radius: 100px;
            opacity: 0.75;
            filter: alpha(opacity=75);
            /* For IE8 and earlier */
        }

        #content {
            height: 45em;
        }

        p {
            max-width: 30em;
            color: white;
            font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
            letter-spacing: 0.1em;
            text-align: center;
            margin: 40px auto;
            text-transform: lowercase;
            line-height: 145%;
            font-size: 2em;
            font-variant: small-caps;
        }

        p :hover {
            text-decoration: none;
        }

        .container {
            padding-top: 6em;
            text-align: center;
        }

        #b-nav {
            padding-bottom: 5em;
            position: fixed;
            width: 100%;
            bottom: 2em;
        }

        #b-nav ul {
            margin: 0;
            padding: 0.5em;
            list-style-type: none;
            text-align: center;
        }

        #b-nav ul li {
            display: inline;
        }

        #b-nav ul li a {
            text-decoration: none;
            padding: .2em 1em;
            background-color: black;
            opacity: 0.4;
            filter: alpha(opacity=40);
            /* For IE8 and earlier */
        }

        .hold {
            width: 100%;
            text-align: left;
        }

        #gen {
            outline: none;
            padding-top: 5px;
            text-decoration: none;
            opacity: 0.6;
            background-color: black;
            color: white;
            border: thin solid white;
            height: 40px;
            width: 100px;
            border-radius: 2px;
            transition: 0.5s;
            padding-bottom: 5px;
        }

        #gen:hover {
            background-color: white;
            color: black;
            border: thin solid black;
            opacity: 0.8;
        }

        #gen a {
            text-decoration: none;
        }

        #date {
            color: white;
        }

@media screen
        and (max-device-width: 800px)
        and (max-device-height: 640px)
        and (-webkit-device-pixel-ratio: 2)
        and (orientation: portrait) {
            p {
                font-size: 1em;
            }
        }

        .fa-twitter {
            font-size: 30px !.........完整代码请登录后点击上方下载按钮下载查看