Question

我有一个带有大边框的div，我想设置它的动画，以便在你点击边框时旋转，但不是实际的东西。这是html：<div id="sidebar"></div>和CSS

#sidebar {
    position:fixed;
    top:0px;
    left:0px;
    width: 10px;
    height: 10px;
    border-radius:180px;
    background-color: white  #85edb5 white white  ;
    border-style: solid;
    border-width: 150px;
    border-color: white  #85edb5 white white  ;
}

当＃85edb5＆＃39;＃85;部分被点击，但我不知道如何动画边框。 div的边界是否有某个选择器？

Answer 1

如果您想在用户单击内部时仅旋转边框并在用户单击边框时旋转所有内容，则可以使用css实现此目的。

示例：http://jsfiddle.net/7Lrscto8/

HTML：

<div class="border">
    <div class="innerBorder">

    </div>
</div>

CSS

.border{
    width: 200px;
    height: 200px;
    background-color: #000;
    cursor: pointer;

    /* Firefox */
    -moz-transition: all 1s ease;
    /* WebKit */
    -webkit-transition: all 1s ease;
    /* Opera */
    -o-transition: all 1s ease;
    /* Standard */
    transition: all 1s ease;
}

.border:active{ /* When the border is clicked */
     /* Firefox */
    -moz-transform: rotate(90deg);
    /* WebKit */
    -webkit-transform: rotate(90deg);
    /* Opera */
    -o-transform: rotate(90deg);
    /* Standard */
    transform: rotate(90deg);
}

.innerBorder{
    position: absolute;
    margin-left: 5px;
    margin-top: 5px;
    width: 190px;
    height: 190px;
    background-color: #fff;
    cursor: crosshair;
    z-index: 2;

    /* Firefox */
    -moz-transition: all 1s ease;
    /* WebKit */
    -webkit-transition: all 1s ease;
    /* Opera */
    -o-transition: all 1s ease;
    /* Standard */
    transition: all 1s ease;
}

.innerBorder:active{ /* When the inner part is clicked */
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* WebKit */
    -webkit-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Standard */
    transform: rotate(-90deg);
}

边框选择器？

1 个答案: