第九章CSS3制作网页动画课后习题

1.制作QQ彩贝高级搜索页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ彩贝高级搜索</title>
    <style>
        #wong{
            width: 200px;
            border: 1px solid;
            margin: 0px auto;
            text-align: center;
        }
        h2{
            margin-left: -70px;
        }
        .dii{
            padding: 6px;
        }
        .dow{
            width: 80px;
            height: 30px;
            background: rgba(3, 3, 9, 0.14);
            margin-top: 10px;

        }
        #wong2{
            width: 200px;
            text-align: center;
            margin-top: 10px;
            display: none;
            animation: niubi 3s linear;
        }
        select{
            margin: 8px;
        }
        #wong:hover #wong2{
            display: block;
        }
        @keyframes niubi {
            0%{
            opacity: 0;
            height: 20px;
        }
            25%{
                height: 40px;
                opacity: 0.1;
            }
            50%{
                height: 60px;
                opacity: 0.2;
            }
            75%{
                height: 80px;
                opacity: 0.3;
            }
            100%{
                height: 100px;
                opacity: 0.4;
            }
        }
    </style>
</head>
<body>
    <div id="wong">
        <h2>高级搜索</h2>
        <hr style="width: 160px;height: 3px;background: red"/>
        <form method="post" action="#">
            <input type="text" value="请输入关键字" class="dii"/>
            <input type="submit" class="dow" value="搜索"/>
        </form>
        <div id="wong2">
            <select><option>场合</option></select>
            <select><option>性别</option></select>
            <select><option>风格</option></select>
            <select><option>色系</option></select>
            <select><option>价格</option></select>
            <select><option>年龄</option></select>
            <select><option>季节</option></select>
        </div>
    </div>
</body>
</html>

2,制作百度糯米购物导航页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1500px;
            border: 1px solid;
        }
        img:nth-of-type(1){
            width: 1500px;
        }
        img:nth-of-type(2){
            position: fixed;
            right: 0px;
            top: 400px;
            background: #a5002b;
        }
        img:nth-of-type(3){
            position: fixed;
            right: 0px;
            top: 420px;
            background: #a5002b;
        }
        img:nth-of-type(4){
            position: fixed;
            right: 0px;
            top: 440px;
            background: #a5002b;
        }
        img:nth-of-type(5){
            position: fixed;
            right: 0px;
            top: 460px;
            background: #a5002b;
        }
    </style>
</head>
<body>
    <div>
    <img src="imgs3/img.bmp"/>
    <img src="imgs3/toolbar_05.png"/>
    <img src="imgs3/toolbar_10.png"/>
    <img src="imgs3/toolbar_15.png"/>
    <img src="imgs3/toolbar_19.png"/>
    </div>
</body>
</html>

3,制作城市街景动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市街景动画</title>
    <style>
        body{
            background: gray;
            z-index: 99;
        }

        .div{

            width: 1181px;
            height: 780px;

            margin: auto;
            background: #212636;
            animation: name 15s ease-in-out infinite alternate;
        }
        @keyframes name {
            0%{
                background: #212636;
            }
            20%{
                background: #A68575;
            }
            40%{
                background: #F7CCB5;
            }
            60%{
                background: #DCECEC;
            }
            80%{
                background: #B4C0CE;
            }
            100%{background: #6D5E80;
            }
        }
        .d1{
            position: absolute;
            top: 500px;
            z-index: 10;


        }
        .d2{
            position: absolute;
            top: 500px;
            left: 350px;
            z-index: 13;
        }
        .d3{
            position: absolute;
            top: 500px;
            right: -400px;
            z-index: 13;
        }
        .d4{
            position: absolute;
            top: 500px;
            left: -400px;
            z-index: 13;
        }
        .d5{
            position: absolute;
            top: 490px;
            left: 100px;
            z-index: 12;
        }
        .d6{
            position: absolute;
            top: 490px;
            right: -300px;
            z-index: 12;
        }
        .d7{
            position: absolute;
            top: 420px;
            left: 750px;
            z-index: 1;
        }
        .d8{
            position: absolute;
            top: 430px;
            left: 160px;
            z-index: 11;
        }
        .d9{
            position: absolute;
            top: 330px;
            left: 360px;
            z-index: 12;
        }
        .d10{
            position: absolute;
            top: 360px;
            left: 610px;
            z-index: 10;
        }
        .d11{
            position: absolute;
            top: 480px;
            left: 160px;
            z-index: 9;
        }
        .d12{
            position: absolute;
            top: 480px;
            left: 380px;
            z-index: 9;
        }
        .d13{
            position: absolute;
            top: 480px;
            right: 0px;
            z-index: 9;
        }
        .d14{
            position: absolute;
            top: 400px;
            left: 800px;
            z-index: 11;
        }
        .d15{
            position: absolute;
            top: 100px;
            left: 160px;
            z-index: 11;
        }
        .d16{
            position: absolute;
            top: 100px;
            left: 460px;
            z-index: 11;
        }
        .d17{
            position: absolute;
            top: 100px;
            left: 860px;
            z-index: 11;
        }
        .d18{
            position: absolute;
            top: 150px;
            right: 130px;
            z-index: 11;
            transform: rotate(10deg);
            animation: name1 15s ease-in-out infinite alternate;
        }
        @keyframes name1 {
            0%{
                transform: translate(0px) rotate(10deg);
            }
            20%{
                transform: translate(-240px) rotate(10deg);
            }
            40%{
                transform: translate(-480px) rotate(40deg);
            }
            60%{
                transform: translate(-720px) rotate(70deg);
            }
            80%{
                transform: translate(-960px) rotate(50deg);
            }
            100%{
                transform: translate(-1181px) rotate(10deg);
            }
        }
    </style>
</head>
<body>
<div class="div">
    <div class="d1"><img src="image/groundBack.png"/></div>
    <div class="d2"><img src="image/groundFront.png"/></div>
    <div class="d3"><img src="image/groundFront.png"/></div>
    <div class="d4"><img src="image/groundFront.png"/></div>
    <div class="d5"><img src="image/groundMid.png"/></div>
    <div class="d6"><img src="image/groundMid.png"/></div>
    <div class="d7"><img src="image/beans.png"/></div>
    <div class="d8"><img src="image/dowEventCenter.png"/></div>
    <div class="d9"><img src="image/friendshipShell.png"/></div>
    <div class="d10"><img src="image/Glockenspiel.png"/></div>
    <div class="d11"><img src="image/skyline.png"/></div>
    <div class="d12"><img src="image/skyline.png"/></div>
    <div class="d13"><img src="image/skyline.png"/></div>
    <div class="d14"><img src="image/Planetarium.png"/></div>
    <div class="d15"><img src="image/cloudSmall.png"/></div>
    <div class="d16"><img src="image/cloudMedium.png"/></div>
    <div class="d17"><img src="image/cloudLarge.png"/></div>
    <div class="d18"><img src="image/balloon.png"/></div>
</div>
</body>
</html>

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页