【前端】实际开发案例

码字小萌新♡

已于 2023-11-22 16:47:58 修改

阅读量1.9w

点赞数 127

分类专栏：前端文章标签：前端 css css3 javascript html5

于 2022-12-08 21:38:23 首次发布

本文链接：https://blog.youkuaiyun.com/qq_51712954/article/details/128218357

版权

1. 奔跑的熊

在这里插入图片描述

<!DOCTYPE html>
<html lang="Cn_zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=divdiv, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ss {
     
            width: 100%;
            height: 450px;
            background-image: url(/Picture/静态合集/山峰.jpg);
        }
        
        .ss .ss1 {
     
            position: absolute;
            width: 185px;
            height: 100px;
            top: 64%;
            background: url(/Picture/静态合集/熊.png) no-repeat;
            animation: xiong 1s steps(8) infinite, zhongxin 3s forwards; 
        }
        @keyframes xiong {
     
            0% {
     
                background-position: 0 0;
            }
            100% {
     
                background-position: -1500px 0;
            }
        }
        @keyframes zhongxin {
     
            0% {
     
                left:0;
            }
            100% {
     
                left:45%;
                transform: translateX(-50%);
            }
        }
    </style>
</head>
<body>
    <div class="ss">
        <div class="ss1"></div>
    </div>
</body>
</html>

2. 旋转木马

在这里插入图片描述

<!DOCTYPE html>
<html lang="Cn_zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
     
            perspective: 1000px;
            background-color: pink;
        }
        section {
     
            position: relative;
            transform-style: preserve-3d;
            width: 300px;
            height: 200px;
            margin: 300px auto;
            animation: xzmm 10s linear infinite;
        }

        section:hover {
     
            animation-play-state: paused;
        }

        @keyframes xzmm {
     
            0% {
     
                transform: rotateY(0);
            }
            100% {
     
                transform: rotateY(360deg);
            }
        }
        section div {
     
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(/Picture/动图合集/雨滴.gif) no-repeat;
        }
        section div:nth-child(1) {
     
            transform: translateZ(300px);
        }
        section div:nth-child(2) {
     
            transform: rotateY(60deg) translateZ(300px);
        }
        section div:nth-child(3) {
     
            transform: rotateY(120deg) translateZ(300px);
        }
        section div:nth-child(4) {
     
            transform: rotateY(180deg) translateZ(300px);
        }
        section div:nth-child(5) {
     
            transform: rotateY(240deg) translateZ(300px);
        }
        section div:nth-child(6) {
     
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>
</html>

3. 背景换肤

在这里插入图片描述
点击图片，更换背景

<!DOCTYPE html>
<html lang="Cn_zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="my.js"></script> -->
    <title>Document</title>
    
</head>
<body>
    <style>
        img {
     
            position: relative;
            width: 100px;
            height: 100px;
            margin: auto;
            left: 20%;
            margin-top: 50px;
        }
    </style>
    <img src="/Picture/静态合集/大背景.gif" alt="">
    <img src="/Picture/静态合集/黑背景.gif" alt="">
    <img src="/Picture/动图合集/雨滴.gif" alt="">
    <img src="/Picture/动图合集/1.gif" alt="">
    <script>
        // 1. 获取元素
        var imgs = document.getElementsByTagName('img');
        var body = document.body;
        // 2. 循环注册事件
        for(var i = 0; i < imgs.length; i++) {
     
            imgs[i].onclick = function() {
     
                // 1) 先把所有的背景去掉  干掉所有人
                for(var i = 0; i < imgs.length; i++) {
     
                    body.style.backgroundImage = '';
                }
                // 2) 然后让当前点击元素的url为body的url  留下我自己
                body.style.background = 'url('+this.src+')';
            }
        }
    </script>
</body>
</html>

4. tab栏切换

在这里插入图片描述
跟着tab栏切换，内容也跟着变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab栏切换</title>
    <style>
        * {
     
            margin: 0;
            padding: 0;
        }
        .tab {
     
            padding: 10px 20px;
        }
        .tab .tab_list {
     
            background-color: #eef1ee;
            height: 39px;
            border: 1.5px solid #d8dad8;
        }
        .tab_list li {
     
            float: left;
            line-height: 38px;
            padding: 0 20px;
            list-style: none;
            text-align: center;
            cursor: pointer;
        }
        .tab_list .current {
     
            position: relative;
            top: -1px;
            background-color: #c81623;
            color: #fff;
            border: 1.5px solid #b95c53;
        }
        .tab_con .item {
     
            display: none;
        }
    </style>
</head>
<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>销后保障</li>
                <li>商品评价</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item" >
                规格与包装模块内容
            </div>
            <div class="item">
                销后保障模块内容
            </div>
            <div class="item">
                商品评价模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>
        </div>
    </div>
    <script>
        var lis = document.getElementsByTagName('li');
        var item = document.getElementsByClassName('item');
        console.log(lis);
        for(var i = 0; i < lis.length; i++) {
     
            lis[i].setAttribute('index', i);
            lis[i].onclick = function() {
     
                for(var i = 0; i < lis.length; i++ ) {
     
                    lis[i].className = '';
                    item[i].style = 'display: none;';
                }
                this.className = 'current';
                var index = this.getAttribute('index');
                item[index].style = 'display: block;';
            }
        }
    </script>
</body>
</html>

5. 下拉菜单

在这里插入图片描述
鼠标经过，显示下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单</title>
    <style>
        li {
      list-style: none; }
        a {
     text-decoration: none;}

        .nav>li {
     
            float: left;
            margin: 0 10px;
        }
        .nav li a {
     
            /* background-color: pink; */
            padding-left: 10px;
        }
        .nav>li>a:hover {
     
            background-color: #eee;
        }
        .nav ul {
     
            display: none;
            position: absolute;
            padding: 0px;
            margin: 0;
            /* width: 100%; */
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        .nav ul li {
     
            border-bottom: 1px solid #FECC5B;
        }
        .nav ul li a {
     
            padding: 0 10px;
        }
        .nav ul li a:hover {
     
            background-color: #FFF5DA;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <!-- ∧∨ -->
            <a href="#">微博<span id="l">∨</span></a>
            <ul>
                <li><a href="">私信</a></li>
                <li><a href="">评论</a></li>
                <li><a href="">@我</a></li>
            </ul>
        </li>
        <li>
            <a href="#">微信<span id="l">∨</span></a>
            <ul>
                <li><a href="">私信</a></li>
                <li><a href="">评论</a></li>
                <li><a href="">@我</a></li