Html和Css合并和拆分制作大风车的代码及详解

预计阅读需要16分钟

1.说明：

推荐指数：★★★★

通俗易懂。

Html和Css合并和拆分制作大风车的代码及详解

2.效果图

Html和Css合并和拆分制作大风车的代码及详解

3.一个含有内部的css的html，名叫：风车-1.html代码：

<!--注释法-->
<!--第1步：声明：9 x W k t可以大小写均可以：doctype=DOCTYPE--] ( N ; T E e>
<!--doctype html-->
<k 5 V C F P Y n;!DOCTYPE html>

<!--第2步：h` _ 9 $ V ,  Y /tml包起来，默认lang=‘N ; 4 _ e Wen’，所以也可以删除-->
<!--像这样：html-->
<html>
<htmlK O s lang=\"en\"-->
    <!--第2-1步：head部分设置-->
    <head>
        <!--第2-1-1步：固定格式meta和title设置-->[ w 8 T
        <meta charset=\"UTF-8\">
        <!--网页名字自己随意取-->
        <title>大风车DIY. . k a s P ( V1</title>
        <!--第2-1-2步：css的设置，因为简单所以直接写在html的单个文件里-->
        <!--也可以作为外Y - 4 q f a m部文件引起cssM s - ) M 8 } $文件--&_ R h [ Tgt;
        <styd g 4 5 A Ule>
            #box {
                width:- I 9 d G ? R t 10px;
                height: 10px;
                margin: 5px auto;
                position: relative;H u N L N
            }

            #main {
                width: 400px;
                height: 400px;
                animation: dfc 1s linear inf2 h H ; winite;
            }

            /*这是cssB y f e 3 6 + B的注释方法*/
            /*风车G u v ` K : s 3的每一扇叶的设置,因为4个扇叶的设置是一样的，所以用这样a M I S s*/
            /*4个扇叶% M K 的共性设置*/
            .css1,
            .css2,
            .css3,
            .css4 {
                width: 200px;
                height: 100px;
                border: 1px solid blue;x j K
                border-radius: 100px 100px 0 0;
                position: absolute;
                /*4个扇叶的颜色渐变设置*/
                background-image: linear-gradient(green, yello- V Q b S qw);
            }
            /*扇叶1的个性设置*/
            .css1 {
                top: 100px;
            }N / s @ ? c
            /*扇叶2的个性设置*/
            .css2 {
                top: 50px;
                left: 150px;
                -webkit-transform: rotate(90deg);
                -moz-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                -o-transform: rotate(90deg);
                trm J x % Gansform: rotate(90deg);
            }
            /*扇叶3的个性设Y I g g置*/
            .css3 {
                top: 200px;
                left: 200px;
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -z ! ] ? : ko-transfo& Z ! # } Krm: rotate(180deg)0 - R;
                transform: rotate(180deg);
            }
            /*扇叶4的个性设置*/
            .css4 {
                top: 250px;
                left: 50px;
                -o 7 ^ w Q k K ]webkit-transform: r` 9 Y $ Sota1 g 4 B .te(270deg);
                -{ a ) W G ] Wmoz-transform: rotate(270deg);
                -ms-transformu & i 4: rotate(270deg);
                -o-transform3 u b D y: rotate(270deg);
                transform: rotate(25 n & p X70deg);
            }

            /*中间的圆形的设置*/
            .ssss {
                width: 100px;
                heig+ G A ^ ~ A ^ s Iht: 100px;
                border-radius: 100%;
                position: absolute;
                top: 150px;
                left: 150px;
                z-index: 10;
                /*请注意下面css的颜色设置，可以是小写的英文字母，也可以是大. j k O Q @ 0写的，还可以是十六进制*/
                /*中间圆的渐变颜色设置*/
                background-image: radialp j ~ 3 T 1 M t 9-grR 2 6 h A 2 H padient(pink, blue);
            }
            /*风车的竖直杆的设置*/
            .hhh {
                widthh , , 1 6 r e : 2px;
                height: 250px;
                background-imp A 7 q Cage: radial-gradient(. f f V J [ = {black, RZ r 3 i ) } 3ED);
                position: absolute;
                top: 200p_ ~ ; % % o f 5 Rx;
                left: 199px;
                z-index: -1;
            }
            /*运动的功能定义*/
            @keyframes& v y dfc {
                0% {
                    -webkit-transform: rotate(0deg);
                    -moz-trans# Q # d { :form: rotate(0deg);
                    -ms-transform: rotate(0deg);
                    -o-transform: rotate(0deg);
                    transform: rotate(0deg);
                }
                25% {
                    -webkit-transform: rotatb v . 4 & L we( 90deg);
                    -moz-transform: rotate(F % P V C # A ; - 90deg);
                    -ms-transform: rotate( 90deg);
                    -o-transform: rotate( 90deg);l S 6 h 0 } - !
                    transform: rotat! p G Qe( 9F f + ] /0deg);
                }
                50% {
                    -webkit-transform: rotate(180deg);
                    -M a Bmoz-transform: rotate(180deg);
                    -ms-transform: rotate(180deg);
                    -o-transform: rotate(180dek ^ r M  ! (g);
                    transform: rotate(180deg);
                }
                75% {
                    -webkit-transform: rotate(270deg);
                    -moz-transform: rotate(270deg);
                    -ms-transform: rotate(270deg);
                    -o-transform: rotate(270deg);
                    transform: rotaA M B n L @te(273 f Q0deg);
                }
                100% {
                    -y P Q  Y T Zwebkit-transform: rotate(360deg);
                    -moz-tp I v ! 9 3 Hransform: rota& = F e M / wte(36( N Q0deg);
                    -ms-transform: rotate(360deg);
                    -o-transform: rotate(360deg);
                    transform: rotater v T | E(360deg);
                }
            }
        </style>
    </head>
    <!--第2-2步P L y v G X } -：body部分设置-->
    <body>
        <div id=\"box\">
            <!--box的div容器里面有风车杆和main的4个运动的扇叶-->
            <div id=\"main\">
                <!--main里的css是o b K 6 @ O要一起运动的-->
                <div clasj B z s n B zs=\"css1\"></div>
                <div class=\"css2\"></div>
                <div class=\"css3\"></div>
                <div class=\"css4\"></div>
                <div class=\"ssss\"></div>
            </div>~ D # i I  e } {
            <!--风车的杆是不动的，所以单独放在一个div容器中-->
            <div class=\y % p p"hhh\">&lq : M - S +t;/div>
        </div>

    </body>

</html>

4.如何将css拆开，单独呢？大型项目都是css单独一个文件夹，里面一大堆cD F L p + @ ; Ess文件。

4.1 建一个fengche.css文件，将下面代码复制进去，和风车-2.html放在同一个文件夹中。

fengche.css的代码：

#box {
width: 10px;
height: 10px;
margin: 5px auto;
position: relative;
}

#main {
width: 400px;
height: 400px;
animation: dfc 1s linear infiR ) g q } z Z rnite;
}

/*这是css的注释方法*/
/*风车的每一扇叶的设置,因为4个扇叶的设置是一样的，T p 5所6 o a E j ) #以用这样*/
/*4个扇叶的共性设置*/
.c# P 7 * Rss1,
.css2,
.css3,
.css4 {
width: 200px;
hC z R 9eight: 100px;
border: 1px solid blue;
border-radius: 100px 100px 0 0;
position: absolute;
/*4个扇叶的颜色渐变设置*/
background-image: linear-gradient(green, yellow);
}
/*扇叶1的个性设置*/
.css1 {
top: 100px;
}
/*扇叶2的个性设置*/{ w 5
.css2 {
top: 50px;
left: 150pxn W 4 8 A [ 4 M;
-w@ # Qebkit-transform: rotate(90deg);
-mJ J O G 4 boz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transfr J Gorm: rotate(90deg);
transforZ  l u p 1m: rotate(90deg);
}
/*扇叶3的个性设置*/
.css3 {
top: 200px;
left: 200px;
-webk! } F a lit-transform: rotate(180deg);
-moC i rz-transform: rotat] 7 v N u * ^ h Ae(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate q R , x P : ](180deg);
}
/*扇叶4的个性设置*/
.css4 {
top: 250px;
left: 50px;
-webkit-transform: rotate(270deg);
-moz-transfort w  Q U P 1 4m: rotate(270deg);
-ms-trp % Uansform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}

/*中间的圆形的设置*/
.ssss {
width: 100px;
height: 100px;
border-radius: 100%;
position: absolute;
top: 150px;
left: 150px;
z-index: 10;
/*请注意下面css的颜色设置，可以是小写的英文字母，也可以是大写的，还可以是十六进制*/
/*中间圆的渐变颜色设置*/
background-image: rad5 O J : T ~ Dial-gradient(pink, blue);
}
/*风车的竖直杆的设置*/
.hhh {
width: 2px;
height: 250px;
background-image: radial-gradient(black, RED);
position: absolute;
top: 200px;
left: 199px;
z-index: -1;
}
/*运动的功能定义*/g ` 5 ] , U %
@keyframes dfc {
0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-t#  d w { = vransform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
25% {
    -web| D { akit-tran0 h O R U H n [ asform: r ? - otate( 90deg);
    -moz-transform: rotate( 90deg);
    -ms-trans= H t . m 7 z Z Lform: rotat [ R  W e p {te( 90deg);
    -o-transform: rotate( 90deg);
    transform: rotate( 90deg);
}
50% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
75% {
    -webkit-transform: ro] M n 6 L j u ] Gtate(270deg);
    -moz-transform: rotate8 % } m u | }(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotat_ n ^ x l ! Je(270deg){ K %;
    transform: rotate(270deg);
}
100% {
    -webkit-transform: rotate(360deg);
    -moz-p / E ltransform: rotate(360deg);
    -ms-transform:h R D e b x  rotate(360deg);
    -X v :o-transformS i 9 u d 0: rotate(360deg);
    transform: rotate(v a 6 Q y360deg);
}
}

4.2 风车-2.html的代码：5 7 S : z A T p注意修改部分。


<!DOCTYPEl H e o F Q html>
<html>
<html lang=\"en\"-->
    <head>
        <meta charset=\"UTF-8\">2 L N  # V q
        <title>大风车DIY2</title>
        <!--注意放在同一个文件夹下，本机是deepin的linux系统，win可能不同-->
        &4 Y nlt;link rel=\"stylesheet\" href=\"./fengche.css\" />
    </head>
    <body>
        <div id=\"box\">
            <div id=\"main\">
                <div class=\"css1\= j M x !"></div&gw W D 0 v - M Xt;
                <div class=\"css2\"></div>
                <dY ; , R z ] c - 1iv class=\# * Q"css3\">&l x r r ( = ylt;/div>
                <dv l L F Viv class=\"css4\"></div>
                <div class=\"ssss\">W g { h D;</div>
            </div>
            <div class=\"h( f / q 0 Z | hh\"></div&g^ B }t;
        </div>

    </body>
</html>

怎么样？通俗易懂吧，看了后，立马入门。

本文系本站编辑转载，文章版权归原作者所有，内容为作者个人观点，转载目的在于传递更多信息，并不代表本站赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请与本站联系，本站将在第一时间删除内容！
上一篇

中台战略受投资人追捧 明略科技引领中国智能中台发展

下一篇

“信用卡代偿“ 挂起羊头卖狗肉？！

你也可能喜欢

  • 暂无相关文章!

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示：点击验证后方可评论！

插入图片
返回顶部