复仇者联盟旋转立方体----------HTML+CSS这波你学费了吗

由于上几周在自学HTML+CSS,所以博客也好久没更新,对此深感抱歉。本次附上自学HTML和CSS的经验总结和立方体代码,希望多多支持。

学习经验:

首先需要知道为啥学HTML+CSS:
HTML( HyperText Markup Language )超文本标记语言,是一种告诉浏览器每个网页组成是什么的程式语言。你可以利用它来定义网站中的文章内容、标题、连结、图片等,让浏览器知道网站整个架构的呈现。
CSS (Cascading Style Sheets)层叠样式表,是一种能为网页增添样式的电脑语言。换句话说,它就是能为你的网站修改字体样式、颜色、网页背景、甚至是华丽的动画与 3D 效果、让你增添设计感的工具。

看完上面的介绍,你也应该知道了他们的作用和意义,可能这也不足以让你有动力去学习他们,不急,继续往下看。
对于计算机专业的伙伴来说,这可能是专业所必需的。但我觉得他对在各种行业的人也同等重要。你可能因为一时兴趣而去坚持几天半天,但是很可能在这段时间,你就会深深爱上他们;你也可能因为想学习的更多,这也是一种好的想法。
但我还是想说出我的个人意见纯属个人意见

不管你的初衷如何,你都必须坚持下去,因为既然是你决定的开始;你也应该给自己一个完美的交代和给它一个收尾。坚持很难,放弃很易,你选择哪种可能就决定了你的命运。在学习的过程中你会因为一点成果而开心还会增加成就感,这样你就会越来越想学习,慢慢的你就和别人拉开了差距。但是,你需要抉择以后的职业,前端后端or全栈,如果是前两者,还需要你尽快决定,主修一门,当然另外一门也需要掌握,熟透主修,掌握辅修,这就是我的基本见解,如果还有什么疑问,敬请咨询。

立方体代码及成果展示:


<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>Documenttitle>
    <style>
        html{
      
            perspective: 800px;
        }

        .cube{
      
            width:200px ;
            height: 200px;
            margin: 0 auto;
            margin-top: 250px;
            animation: run  20s infinite linear;
            transform-style: preserve-3d;
        }

        .cube> div{
      
            width: 200px;
            height: 200px;
            opacity: .7;
            position:absolute;
            
        }
      
        img{
      
            vertical-align: top;
            width: 200px;
            height: 200px;
        }
        .box1{
      
            transform: rotateY(90deg) translateZ(100px);
        }
        .box2{
      
            transform: rotateY(-90deg) translateZ(100px);
        }
        .box3{
      
            transform: rotateX(90deg) translateZ(100px);
        }
        .box4{
      
            transform:rotateX(-90deg) translateZ(100px)
        }
        .box5{
      
            transform: rotateY(180deg) translateZ(100px);
        }
        .box6{
      
            transform: rotateY(0deg) translateZ(100px);
        }
        @keyframes run{
      
            from{
      
                transform: rotateX(0) rotateZ(0);
            }

            to{
      
                transform: rotateX(1turn) rotateZ(1turn);
            }
        }
    style>
head>
<body>
    <div class="cube">
        <div class="box1">
            <img src="./1.jpg" alt="">
        div>
        <div class="box2">
            <img src="./2.jpg" alt="">
        div>
        <div class="box3">
            <img src="./3.jpg" alt="">
        div>
        <div class="box4">
            <img src="./4.jpg" alt="">
        div>
        <div class="box5">
            <img src="./5.jpg" alt="">
        div>
        <div class="box6">
            <img src="./6.jpg" alt="">
        div>
    div>
body>
html>

以上代码可能对初学者不太友好,建议先学习下代码中的相关知识,往后我也会更新基础知识,希望伙伴们不要急,多多支持哈,下面附上成果,当然你也可以把其中的图片换成你和对象的(狗头保命)。

复仇者联盟

你可能感兴趣的:(html,css)