前端的几个静态网页的代码和效果

最新推荐文章于 2024-06-15 12:12:02 发布
最新推荐文章于 2024-06-15 12:12:02 发布
阅读量5.1k 收藏 38
点赞数 6
分类专栏： 前端 文章标签： 前端案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZXCNIUBI/article/details/100112990
版权

文章目录

前端的案例

1.html的form表单的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js的操作符</title>

</head>
<body>
    <form action ="" method="get" enctype="multipart/form-data">
        <p><label for = "1">用户名:<input type="text" name="user" id = "1"></p>
        <p>密&emsp;码:<input type="password" name="psw"></p>

        <p>
            性&emsp;别:
            <input type="radio" name="lalal1" value="male"> 男
            <input type="radio" name="lalal2" value="female"> 女
            <input type="radio" name="lalal3" value="secret"> 保密
        </p>
        <p>
            爱&emsp;好:
            <input type="checkbox" name="hobby" value="singing"> 唱歌
            <input type="checkbox" name="hobby" value="dance"> 跳舞
            <input type="checkbox" name = "hobby" value="rap"> rap

        </p>
        <p>
            上传文件：<input type="file">
        </p>
        <p>
            地&emsp;址:
            <select name="attr" id="">
                <optgroup label="黑龙江省">
                    <option value="jms" selected>佳木斯</option>
                    <option value="hr">哈尔滨</option>
                </optgroup>
                <optgroup label="吉林省">
                    <option value="cc">长春</option>
                    <option value="sy">松原</option>
                </optgroup>
            </select>
        </p>
        <p>
            个人简介：
            <textarea name="profile" rows = "10" cols = "20"></textarea>
        <p>
             <input type="submit" value="提交">
            <input type="reset" value="重置">
        </p>
    </form>
</body>
</html>

在这里插入图片描述

2.背景样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景样式</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        } /*使你的页面能全部的契合浏览器*/
        .top{
            width: 100%;
            height: 64px;
            background: black;
        }
        .top .menu{
            width: 1200px;
            height: 100%;
            background: #6fa026;
            margin: 0 auto;
        } /*这里的top后面记得加空格因为这是后代选择器,有个特别需要记得的点就是margin：0 auto是使子标签居中*/
        .middle{
            width: 100%;
            height: 500px;
            background: wheat;
        }
        .middle .content{
            width:1200px;
            height:100%;
            background: #3d3c75;
            margin:0 auto;
        }
        .bottom1{
            width: 100%;
            height: 100px;
            background: #775522;
        }
        .bottom1 .bot-top1{
            width: 1200px;
            height: 100%;
            background: gold;
            margin:0 auto;
        }
        .bottom2{
            width: 100%;
            height: 60px;
            background: black;
        }
        .bottom2 .bot-top2{
            width: 1200px;
            height:100%;
            background: coral;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="menu"></div>
    </div>
    <div class="middle">
        <div class="content"></div>
    </div>
    <div class="bottom1">
        <div class="bot-top1"></div>
    </div>
    <div class="bottom2">
        <div class="bot-top2"></div>
    </div>

</body>
</html>

在这里插入图片描述
这里为了截图方便而且能解全面所以我用的500px，如果调成800px会更好看一些。

3.静态轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            /*text-align: center;*/
        }
        .top{
            width: 100%;
            height: 64px;
            background: black;
        }
        .top .menu{
            width: 1200px;
            height: 100%;
            background: #6fa026;
            margin: 0 auto;
        } /*这里的top后面记得加空格因为这是后代选择器,有个特别需要记得的点就是margin：0 auto是使子标签居中*/
        .middle{
            width: 100%;
            height: 800px;
            background: wheat;
        }
        .middle .content{
            width:1200px;
            height:100%;
            background:white;
            margin:0 auto;
        }
        .middle .content .con-left{
            height:100%;
            width: 850px;
            background: darkviolet;
            float: left;
        }
        .middle .content .con-left .banner{
            height: 200px;
            width:850px;
            background: cyan;
            position: relative;
        }
        .middle .content .con-left .banner .cir{
            /*height: 17px;*/
            /*width: 118px;*/
            /*background: #754e22;*/
            bottom: 20px;
            position: absolute;
            left: 50%;
            margin-left: -59px;

        }
        .middle .content .con-left .banner .cir li{
            height: 15px;
            width: 15px;
            float: left;
            border: 1px solid red;
            margin-left: 10px;
            border-radius: 50%;
            /*position: absolute;*/
        }
        .middle .content .con-left .banner .btn{
            font-size: 50px;
            color: white;
            height:200px;
            line-height: 200px;
        }
        .middle .content .con-left .banner .btn #left{
            position: absolute;
            left: 20px;
        }
        .middle .content .con-left .banner .btn #right{
            position: absolute;
            right: 20px;
        }
        .middle .content .con-left .banner img{
            height: 200px;
            width: 850px;
            position: absolute;
        }
        .middle .content .con-right{
            height:100%;
            width: 300px;
            background: #754e22;
            float: right;
        }
        .bottom1{
            width: 100%;
            height: 100px;
            background: #775522;
        }
        .bottom1 .bot-top1{
            width: 1200px;
            height: 100%;
            background: gold;
            margin:0 auto;
        }
        .bottom2{
            width: 100%;
            height: 60px;
            background: black;
        }
        .bottom2 .bot-top2{
            width: 1200px;
            height:100%;
            background: coral;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="menu"></div>
    </div>
    <div class="middle">
        <div class="content">
            <div class="con-left">
                <div class="banner">
                    <ul class="pic">
                        <li><img src="D:\pathfinder\untitled1\8.jpeg" alt=""></li>
                        <li><img src="D:\pathfinder\untitled1\7.png" alt=""></li>
                        <li><img src="D:\pathfinder\untitled1\9.png" alt=""></li>
                        <li><img src="D:\pathfinder\untitled1\4.jpeg" alt=""></li>
                    </ul>
                    <ul class="btn">
                        <li id="left">&lt;</li>
                        <li id="right">&gt;</li>
                    </ul>
                    <ul class="cir">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <div class="con-right"></div>
        </div>
    </div>
    <div class="bottom1">
        <div class="bot-top1"></div>
    </div>
    <div class="bottom2">
        <div class="bot-top2"></div>
    </div>
</body>
</html>

在这里插入图片描述
这个暂时还不能导入功能，动态的轮播图可以实现点击的事件。

4.点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js事件操作</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background: cyan;
            text-align: center;
            line-height: 300px;
        }
        .wo{
            font-size: 30px;
            font-family: 华文楷体;
        }
        .set{
            width: 80px;
            height: 30px;
            background: gold;
            margin-left: 20px;
        }
    </style>

</head>
<body>
    <p>
        <label for="attr">样&emsp;式:</label>
        <input type="text" id="attr" placeholder="请输入css样式">
    </p>
    <p>
        <label for="attv">样式值:</label>
        <input type="text" id="attv" placeholder="请输入样式值">
    </p>
    <p>
        <input class="set" type="button" value="设置">
    </p>
    <div class="wo">我就是我</div>
<script>
    var obj = document.querySelector("div");
    obj.onmouseenter = function () {
        obj.innerText ="我其实不是我"
    };
    obj.onmouseleave = function () {
        obj.innerText = "我就是我"
    };
    var input = document.querySelectorAll("input");
    input[2].onclick = function () {
      var attr = input[0].value;
      var attv = input[1].value;
      obj.style[attr] = attv;
      obj[attr] = attv;
    }
</script>
</body>
</html>

在这里插入图片描述
这个还是很好玩的，你可以直接通过在上面填充指令，下面就可以直接出现。

5.动态轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            /*text-align: center;*/
        }
        .top{
            width: 100%;
            height: 64px;
            background: black;
        }
        .top .menu{
            width: 1200px;
            height: 100%;
            background: #6fa026;
            margin: 0 auto;
        } /*这里的top后面记得加空格因为这是后代选择器,有个特别需要记得的点就是margin：0 auto是使子标签居中*/
        .middle{
            width: 100%;
            height: 800px;
            background: wheat;
        }
        .middle .content{
            width:1200px;
            height:100%;
            background:white;
            margin:0 auto;
        }
        .middle .content .con-left{
            height:100%;
            width: 850px;
            background: darkviolet;
            float: left;
        }
        .middle .content .con-left .banner{
            height: 200px;
            width:850px;
            background: cyan;
            position: relative;
        }
        .middle .content .con-left .banner .cir{
            /*height: 17px;*/
            /*width: 118px;*/
            /*background: #754e22;*/
            bottom: 20px;
            position: absolute;
            left: 50%;
            margin-left: -59px;

        }
        .middle .content .con-left .banner .cir li{
            height: 15px;
            width: 15px;
            float: left;
            border: 1px solid red;
            margin-left: 10px;
            border-radius: 50%;
            cursor: pointer;
            /*position: absolute;*/
        }
        .middle .content .con-left .banner .cir li:hover{
            background: white;
        }
        .middle .content .con-left .banner .btn{
            font-size: 50px;
            color: white;
            height:200px;
            line-height: 200px;
            display: none;
            cursor: pointer;
        }
        .middle .content .con-left .banner:hover .btn{
            display: block;
        }
        .middle .content .con-left .banner .btn #left{
            position: absolute;
            left: 20px;
        }
        .middle .content .con-left .banner .btn #right{
            position: absolute;
            right: 20px;
        }
        .middle .content .con-left .banner img{
            height: 200px;
            width: 850px;
            position: absolute;
            display: none;
        }
        .middle .content .con-left .banner .pic .show
        {
            display: block;
        }
        .middle .content .con-right{
            height:100%;
            width: 300px;
            background: #754e22;
            float: right;
        }
        .bottom1{
            width: 100%;
            height: 100px;
            background: #775522;
        }
        .bottom1 .bot-top1{
            width: 1200px;
            height: 100%;
            background: gold;
            margin:0 auto;
        }
        .bottom2{
            width: 100%;
            height: 60px;
            background: black;
        }
        .bottom2 .bot-top2{
            width: 1200px;
            height:100%;
            background: coral;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="menu"></div>
    </div>
    <div class="middle">
        <div class="content">
            <div class="con-left">
                <div class="banner">
                    <ul class="pic">
                        <li><img class="show" src="D:\pathfinder\untitled1\8.jpeg" alt=""></li>
                        <li><img src="D:\pathfinder\untitled1\7.png" alt=""></li>
                        <li><img src="D:\pathfinder\untitled1\9.png" alt=""></li>
                        <li><img src="D:\pathfinder\untitled1\6.jpeg" alt=""></li>
                    </ul>
                    <ul class="btn">
                        <li id="left">&lt;</li>
                        <li id="right">&gt;</li>
                    </ul>
                    <ul class="cir">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <div class="con-right"></div>
        </div>
    </div>
    <div class="bottom1">
        <div class="bot-top1"></div>
    </div>
    <div class="bottom2">
        <div class="bot-top2"></div>
    </div>
    <script>
        var obj = document.querySelectorAll(".cir li");
        var pic = document.querySelectorAll(".pic img");
        n = 1;
        for(let i=0;i<obj.length;i++)
            obj[i].onclick = function () {
                for(let j=0;j<pic.length;j++)
                    if(i===j){
                    pic[j].className = "show";
                    n = j;
                    }
                    else{
                    pic[j].className = "";
                    }
        }
        var btn = document.querySelectorAll(".btn li");
        btn[0].onclick = function () {
            if(n>0){
                pic[n].className = "";
                n--;
                pic[n].className = "show";
            }
            else {
                pic[n].className = "";
                n = pic.length-1;
                pic[n].className = "show";
            }
        };
        btn[1].onclick = function () {
            pic[n].className = "";
            n = n + 1;
            // pic[n].className = "show";
            if(n > pic.length-1){
                n=0;
            }
            pic[n].className = "show";
        };
        function auto1() {
            pic[n].className = "";
            n = n + 1;
            if(n > pic.length-1){
                n=0;
            }
            pic[n].className = "show";
        }
        var timer = setInterval(auto1, 2000);
        var banner = document.querySelector(".banner");
        banner.onmouseenter = function(){
            clearInterval(timer);
        }
        banner.onmouseleave = function () {
            timer = setInterval(auto1, 2000);
        }

    </script>
</body>
</html>

这个是动态的轮播图。
在这里插入图片描述

6.自己写的巨星不易

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my_html</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .top{
            background: black;
            height: 60px;
            width: 100%;
        }
        .top .menu{
            background: green;
            width: 500px;
            height: 100%;
            line-height: 60px;
            text-align: center;
            margin: 0 auto;
            font-size: 25px;
            font-family: 华文仿宋;
            font-weight: bolder;
        }
        .mid{
            background: aqua;
            height: 600px;
            width: 100%;
        }
        .mid .content{
            background: white;
            width: 500px;
            height: 100%;
            margin: 0 auto;
            position: relative;
            /*float: left;*/
        }
        .mid .content .list{
            position: absolute;
            bottom: 20px;
            left: 50%;
            margin-left: -102px;
        }
        .mid .content .list li{
            background: gold;
            width: 20px;
            height: 20px;
            float: left;
            border: 1px solid red;
            margin-left: 30px;
            border-radius: 50%;
            cursor: pointer;
            text-align: center;
            line-height: 20px;
        }
         .mid .content .arrows{
             font-size: 60px;
             color: black;
             height:200px;
             line-height: 200px;
             font-family: 华文琥珀;
             cursor: pointer;

         }
         .mid .content .arrows #left{
             position: absolute;
             left: 20px;
             bottom: 300px;
         }
         .mid .content .arrows #right{
             position: absolute;
             right: 20px;
             bottom: 300px;
         }
        .mid .content img{
            width: 500px;
            height: 550px;
            position: absolute;
            display: none;
        }
        .mid .content .show{
            display: block;
        }
        .bottom{
            background: black;
            height: 80px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="menu">
            大家好，我叫毛不易
        </div>
    </div>
    <div class="mid">
        <div class="content">
            <ul class="list">
                <li>一</li>
                <li>二</li>
                <li>三</li>
            </ul>
            <img  src="D:\pathfinder\untitled1\1.jpeg" >
            <img class="show" src="D:\pathfinder\untitled1\4.jpeg">
            <img src="D:\pathfinder\untitled1\6.jpeg">
            <!--<img src="D:\pathfinder\untitled1\7.png">-->
            <ul class="arrows">
                <li id="left">&lt;</li>
                <li id="right">&gt;</li>
            </ul>
        </div>
    </div>
    <div class="bottom">
    </div>
    <script>
        var img = document.querySelectorAll(".content img");
        var list = document.querySelectorAll(".list li");
        n = 1;
        for(let i=0;i<list.length;i++){
            list[i].onclick = function () {
                for(let j=0;j<img.length;j++){
                    if(i===j){
                        img[j].className = "show";
                        n = j ;
                    }
                    else {
                        img[j].className = "";
                    }
                }
            }
        }
        var arrow = document.querySelectorAll(".arrows li");
        arrow[0].onclick = function () {
            if (n > 0) {
                img[n].className = "";
                n--;
                img[n].className = "show";
            }
            else {
                img[n].className = "";
                n = img.length - 1;
                img[n].className = "show";
            }
        };
        arrow[1].onclick = function () {
            img[n].className = "";
            n = n + 1;
            // pic[n].className = "show";
            if(n > img.length-1){
                n=0;
            }
            img[n].className = "show";
        };
        function auto1() {
            img[n].className = "";
            n = n + 1;
            if(n > img.length-1){
                n=0;
            }
            img[n].className = "show";
        }
        var timer = setInterval(auto1, 1000);
        var banner = document.querySelector(".content");
        banner.onmouseenter = function(){
            clearInterval(timer);
        }
        banner.onmouseleave = function () {
            timer = setInterval(auto1, 1000);
        }
    </script>
</body>
</html>

在这里插入图片描述

托马斯，成
关注
  • 6
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端运行python代码几种方式_前端和python
weixin_39572794的博客
11-24 2145
广告关闭腾讯云11.11云上盛惠 ，精选热门产品助力上云，云服务器首年88元起，买的越多返的越多，最高返5000元！如果您细心对比过 json python sdk 和 xml python sdk 的文档，您会发现并不是一个简单的增量更新。 xml python sdk 在架构、可用性和安全性上有了非常大的提升，而且在易用性、健壮性和传输性能上也做了非常大的改进。 如果您想要升级到 xml py...
如何在gitee上搭建前端静态网页
寄北测试学习进阶记录
12-10 2024
如何在gitee上搭建静态网页 第一步： 1.使用语法和工具编写代，我这里使用的html，css，js等 工具使用的HBuilder 第二步： 1.使用git命令上传到gitee 2.直接在gitee仓库中文件-点击上传文件，一小时内只能上传20个文件 如有修改代码出在上面修改点击提交 上传完或提交后，在服务选择Gitee Pages 服务 首次使用的需要身份注册，大概审核需要1-2天左右，审核这里就不做介绍啦，很简单。 选择部署分支，选择更新后等在更新几分钟后发布成功后查看自己页面。 .
静态网页模板
07-26
适合新手学习的网页模板适合新手学习的网页模板适合新手学习的网页模板适合新手学习的网页模板
企业网站前端代码
10-15
企业官网前端代码，包括详情也，列表页，首页页面，有需要的伙伴点击下载哦
使用html+css实现一个静态页面（含源码） (2)
最新发布
有问必答，欢迎打扰，项目开发，网页设计
06-15 1213
🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】 🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新
[笔记] 前端静态化和伪静态
BLOCKGOLD.E的博客
06-17 3559
先看看别人对静态化的理解。 网页静态化有很多含义，在WEB开发中，静态网页一般理解为网站中大部分超级链接所引用的页面是单独的HTML静态页面文件（如*.htm、*.html等页面文件）。在ASP.NET中（ASP、PHP或JSP也一样），页面都是通过运行库（其他语言也有相应的解释器或运行环境）动态生成HTML代码，然后发送到浏览器端的，而不是直接将页面文件发送。通过一定的技术手段，将浏览用...
通过前端网页调用python代码并传入参数
faithful1的博客
08-30 2320
需求：有一段python代码“NSG。A-II生成派车方案.py”，需要运行，但是调用这段代码的方式只能通过一个网页index.html，并且代码需要的参数只能通过网页前端的输入框传入。
【前端静态页面HTML】
Zhangyongqi77的博客
09-20 3340
HTML基础教程
一个很简单很简单的静态网页(附源代码）HTML+CSS
brhhh_sehe的博客
02-23 3915
【完整资源包下载】包含图片、音效等 如果想白嫖可以私信或者发邮件fzx2003zhixue@163.com 首先声明：代码中使用的爱心特效和转动的音符这个两个效果是我从网上找到的…具体在哪里找的我也忘了…用的图片是邦乔彦的插画~ 其他部分是自己写的 最后的效果如下 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>沙雕小星星</ti
前端基础项目（一）学成在线网站静态网页，HTML+CSS，简单基础，附完整源码
m0_50971744的博客
03-29 9073
简单前端基础项目，网站页面，附完整源码
纯静态html网页模版
02-18
纯静态HTML网页模板是网页设计中常见的一种方式，它不依赖服务器端的脚本语言（如PHP、ASP、JSP等）进行动态处理，而是直接由HTML、CSS和JavaScript等前端技术构建完成。这种模板主要由HTML文件、样式表文件（CSS）...
智慧商城前端项目总结和源代码
06-08
在这个项目中，我们主要关注以下几个核心知识点： 1. **Vue.js框架**：作为项目的基础，Vue2被广泛用于构建用户界面。Vue2提供了组件化开发方式，使得代码结构清晰，可维护性高。它还支持虚拟DOM，提高了页面渲染...
新年静态网页，html+csss
01-02
在学习这个项目时，你需要了解以下几个关键知识点： 1. **HTML基础**：学习HTML标签的使用，如`<head>`、`<body>`、`<header>`、`<nav>`、`<section>`、`<article>`、`<footer>`等，以及如何插入图片（`<img>`标签...
fanliwang.zip_前端HTML_前端静态页面
09-24
在分析"fanliwang.zip"中的源代码时，我们可以关注以下几个方面： 1. **HTML结构**：检查头部、主体和尾部标签的使用，了解如何组织文档结构。 2. **CSS布局**：研究CSS选择器、盒模型、响应式设计（可能使用媒体...
网页前端高级编程-实验报告-DIV静态页面布局.doc
08-21
【网页前端高级编程-实验报告-DIV静态页面布局】这篇实验报告主要涵盖了网页前端开发中的几个关键知识点，包括HTML和CSS的使用，以及在实际页面布局中遇到的问题和解决方案。 1. **HTML与CSS基础**：实验中使用HTML...
0成本搭建个人博客网站之制作静态网页
PTG_Little_miaj的博客
02-10 2268
本文章旨在于快速0成本搭建个人博客网站，hexo为我们提供了非常好的框架，本教程将使用hexo制作框架制作静态网页，我们只需要学习MD语言，过程快速易懂。
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
热门推荐
HTML网页设计
10-03 24万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
网页布局图（更新版）
巨星不易，努力前行
09-02 825
html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主页</title> <link rel="stylesheet" href="css/css1.css"> <link r...
写一段3d环绕效果的前端代码
05-27
以下是一个简单的3D环绕效果的前端代码示例： ```html <!DOCTYPE html> <html> <head> <title>3D环绕效果</title> <style> .container { width: 400px; height: 400px; position: relative; perspective: 1000px; } .box { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; animation: rotation 10s linear infinite; } .box div { position: absolute; width: 100%; height: 100%; background-color: #ccc; color: #fff; font-size: 30px; text-align: center; line-height: 400px; font-weight: bold; opacity: 0.8; transform-origin: center center -200px; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); } .box div:nth-child(1) { transform: rotateY(0deg) translateZ(200px); background-color: #ff7675; } .box div:nth-child(2) { transform: rotateY(60deg) translateZ(200px); background-color: #74b9ff; } .box div:nth-child(3) { transform: rotateY(120deg) translateZ(200px); background-color: #55efc4; } .box div:nth-child(4) { transform: rotateY(180deg) translateZ(200px); background-color: #fdcb6e; } .box div:nth-child(5) { transform: rotateY(240deg) translateZ(200px); background-color: #a29bfe; } .box div:nth-child(6) { transform: rotateY(300deg) translateZ(200px); background-color: #dfe6e9; } @keyframes rotation { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } </style> </head> <body> <div class="container"> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </div> </body> </html> ``` 这段代码使用了CSS3的3D变换和动画技术，创建了一个立方体的3D环绕效果，每个面上都有不同的内容，可以根据需要进行修改。注释已经添加在代码中，以便更好地理解。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值