百度空间里的大风车之类的装饰品如何设置出来

html-css024

百度空间里的大风车之类的装饰品如何设置出来,第1张

百度空间里有大风车吗?

如果是挂件之类的,一般有说明,或者你搜索一下百度譬如“百度空间挂件”。

看是什么样的装饰挂件,想放在哪个位置。按照安装说明做。

都是在【设置】中的【自定义模板】项,有个开始创建模板会打开CSS窗口,在里边对照你找来的资料修改,预览效果后,保存就行了。

多试几遍,弄不坏的。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>动态风车</title>

    <style>

        body {

    background: purple

    overflow: hidden

}

* {

    margin: 0

    padding: 0

}

ul {

    position: relative

    width: 100px

    height: 100px

    top: 100px

    left: 50%

    margin-left: -50px

    transform-style: preserve-3d

    animation: sport 15s linear 0s infinite normal

}

ul:hover {

    animation: sport 1.5s linear 0s infinite normal

}

@keyframes sport {

    form {

        transform: rotateZ(0deg)

    }

    to {

        transform: rotateZ(360deg)

    }

}

ul li {

    position: absolute

    top: 0

    left: 0

    border: 50px solid transparent

    list-style: none

}

li.li_1st {

    border-bottom: 50px solid #5697FD

    transform: translateY(-70px) rotateZ(45deg)

}

li.a {

    border: 35px solid transparent

    border-bottom: 35px solid #5687E7

    transform: translate(50px,-20px) rotateZ(90deg)

}

li.li_2nd {

    border-bottom: 50px solid #A1BD76

    transform: translateX(70px) rotateZ(135deg)

}

li.b {

    border: 35px solid transparent

    border-bottom: 35px solid #3AA37A

    transform: translate(50px,50px) rotateZ(180deg)

}

li.li_3th {

    border-bottom: 50px solid #FFB12C

    transform: translateY(70px) rotateZ(225deg)

}

li.c {

    border: 50px solid transparent

    border-bottom: 50px solid #FFCD34

    transform: translate(0px,0px) rotateZ(45deg)

    z-index: 1

}

li.li_4th {

    border-bottom: 50px solid #EF7A64

    transform: translateX(-70px) rotateZ(315deg)

}

li.d {

    border: 35px solid transparent

    border-bottom: 35px solid #C1523E

    transform: translate(-20px,-20px) rotateZ(0deg)

}

div.e {

    position: relative

    width: 10px

    height: 200px

    background-color: gray

    top: 50px

    left: 257px

    z-index: -1

}

    </style>

</head>

<body>

    <div class="box">

        <ul>

            <li class="li_1st"></li>

            <li class="a"></li>

            <li class="li_2nd"></li>

            <li class="b"></li>

            <li class="li_3th"></li>

            <li class="c"></li>

            <li class="li_4th"></li>

            <li class="d"></li>

        </ul>

        <div class="e"></div>

    </div>

</body>

</html>