Question

我创造了一个星夜动画但是想知道是否有人有更好的方式来放置divs＆＃34;随机＆＃34;只有CSS ???另外，我也很难回应。感谢您的时间！只是想学习。

检查http://codepen.io/anon/pen/MeeYWO?editors=1100

处的完整代码

#star-bl:nth-of-type(5) {
    left: -350px;
    top: 225px;
}

#star-bl:nth-of-type(6) {
    left: 750px;
    top: 250px;
}

#star-bl:nth-of-type(7) {
    left: -450px;
}

#star-sm:nth-of-type(8) {
    left: -225px;
}

#star-sm:nth-of-type(9) {
    left: 500px;
}

#star-sm:nth-of-type(10) {
    left: -100px;
}

Answer 1

目前在Pure CSS中是不可能的（我希望calc（rand）成为一种东西）。您正在使用的解决方案与任何解决方案一样好，如果您希望星星在较小的屏幕类型上聚类，您可能需要考虑使用百分比。

Answer 2

不幸的是，目前在CSS中不可能。

但是，如果你愿意从CSS改为LESS，你可以给你的星星随机值。通过用this post所示的反向标记包装JavaScript表达式，可以将JavaScript插入LESS。

这是一个为div＃star-bl提供从1到100的随机左值的示例。

#star-bl {
    @random-margin: `Math.random() * 100`;
    left: @random-margin * 1px;
}

您仍然需要在LESS文件中为每个星形提供一个单独的块，但每次访问该页面时，它都会为您的星星提供不同的位置。

Here's a link to a guide for using LESS.

Answer 3

不是使用vanila CSS，但您可以使用CSS预处理器（如Less或Sass）在编译时为您生成随机数。

以下是使用random instance method在Sass中执行此操作的方法。

<asp:ScriptManager ID="AdministracionPerfilesIdxScriptMgr" runat="server"></asp:ScriptManager>
  <asp:UpdatePanel ID="AdministracionPerfilesIdxUpdatePanel" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
    <ContentTemplate>
      <asp:GridView ID="grdVwAdministracionPerfilesIdx" runat="server" AllowPaging="true" AllowSorting="true" AutoGenerateColumns="false" PagerSettings-Mode="NextPreviousFirstLast" PageSize="6" ShowHeaderWhenEmpty="true" CssClass="tbl-data" OnSorting="grdVwAdministracionPerfilesIdx_Sorting" OnPageIndexChanging="grdVwAdministracionPerfilesIdx_PageIndexChanging"     OnRowDeleting="grdVwAdministracionPerfilesIdx_RowDeleting">
   <PagerTemplate>
       <ul class="jqGrid-pagination floatRight">
                                <li>
                                    <asp:ImageButton ID="imgBtnFirstPage" runat="server" ToolTip="Primera"
                                        CommandName="Page" CommandArgument="First"/>
                                </li>
                                <li>
                                    <asp:ImageButton ID="imgBtnPrevPage" runat="server" ToolTip="Anterior"
                                        CommandName="Page" CommandArgument="Prev"/>
                                </li>
                                <li>
                                    <asp:Label ID="lblPageCounter" runat="server" CssClass="referencia">
                                        PÁGINA <%=grdVwAdministracionPerfilesIdx.PageIndex + 1%> DE <%=grdVwAdministracionPerfilesIdx.PageCount%>
                                    </asp:Label>
                                </li>
                                <li>
                                    <asp:ImageButton ID="imgBtnNextPage" runat="server" ToolTip="Siguiente"
                                        CommandName="Page" CommandArgument="Next" />
                                </li>
                                <li>
                                    <asp:ImageButton ID="imgBtnLastPage" runat="server" ToolTip="Última"
                                        CommandName="Page" CommandArgument="Last" />
                                </li>
                            </ul>
                        </PagerTemplate>
                        <Columns>
                            <asp:TemplateField ItemStyle-CssClass="alignCenter">
                                <ItemTemplate>
                                    <asp:RadioButton ID="rdButton" runat="server" OnClick="javascript:SelectSingleRadiobutton(this.id)" />
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:BoundField DataField="IDPerfil" HeaderText="PERFIL ID" SortExpression="IDPerfil" ItemStyle-CssClass="hiddencol" HeaderStyle-CssClass="hiddencol"/>
                            <asp:BoundField DataField="Nombre" HeaderText="NOMBRE" SortExpression="Nombre" />
                            <asp:BoundField DataField="Descripcion" HeaderText="DESCRIPCIÓN" SortExpression="Descripcion" />
                            <asp:BoundField DataField="Tipo" HeaderText="TIPO" SortExpression="Tipo" />
                            <asp:TemplateField ItemStyle-CssClass="btn-icon">
                                <ItemTemplate>
                                    <asp:ImageButton ID="imgBtnDeleteGridRow" runat="server" CssClass="naranjo eliminar" 
                                         OnClientClick="return isRadioBtnSelected(this)" CommandName="Delete"/>
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                         <EmptyDataTemplate>No Record Available</EmptyDataTemplate>
                    </asp:GridView>
                </ContentTemplate>
            </asp:UpdatePanel>

DEMO：http://codepen.io/moob/pen/dXXGdy

CSS随机div放置＆amp;响应

3 个答案: