Question

我要做的是制作一个带有三角形子弹的手风琴，当<dd>向下滑动时，该子弹旋转指向下方。

为了清楚起见，我希望子弹能够制作动画，而不仅仅是在两张图像之间翻转。

我知道如果子弹是他们自己的html元素（<img>或者其他），我可以使用css3和一个小类交换，但是本着保持内容/风格分离的精神，我更愿意留下背景图片。

另一种方法可能是使用javascript将一些<img>注入到dom中，但如果存在，我宁愿使用更优雅的解决方案。

如果可以用我最近学到的那些很酷的css三角形来完成它会更酷。

HTML

<dl id="accordian">
    <dt><a href="#" class="active"> Link to slide down dd </a></dt>
        <dd> Text to drop down </dd>
    <dt><a href="#"> Link to slide down dd </a></dt>
        <dd> Text to drop down </dd>
    <dt><a href="#"> Link to slide down dd </a></dt>
         <dd> Text to drop down </dd>
</dl>

CSS

#accordian dt {
  background: url(../images/triangleBullet.png) left center no-repeat;    
  padding-left: 20px;
}

jquery的

$(document).ready(function() {
  //Thermal Coatings page - Accordian
  $('#accordian dd').hide();
  $('#accordian a.active').parent().next('dd').show();
  $('#accordian a').click(function(){
    $('#accordian a').removeClass('active');
    $(this).addClass('active');
    $('#accordian dd').slideUp();
    $(this).parent().next('dd').slideDown();
  });
});

Answer 1

允许超现代浏览器？不要再说了......看看这个JSFiddle。

其他人已经注意到了这项技术 - 这是一个使用原始HTML和JavaScript的精简的跨浏览器解决方案，只添加了一些CSS。

巧妙地使用::before伪元素将一段内容放在<dt>标签的左侧。此外，“指针”是用线性渐变（黑色0％，黑色50％，透明50％，透明100％）和正确的变换旋转生成的。由于它们是半透明的，因此您应该能够让它们位于<dt>（本示例中为background-color:green）的任何类型背景样式之上。

::before元素也为打开/关闭动画应用了一个过渡。如前所述，动画在所有浏览器中都不起作用 - 这些浏览器会立即调整旋转。

想要获得超级高级的功能吗？您也可以使用image-mask创建指针，或者您甚至可以对只能放在CSS文件中的透明指针png图像进行base64编码，像这样：

-webkit-mask: 0 0 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiNJREFUeNrEWb9LQlEUvj5BcHoQvMnVKXD1D3CLwqBJbHJsazQaWoSCxgbHJiMIAiNok6AhCDdXVycnJ8EQOgeOYaG+d39998KH+HyP753zzjnfd325xfdSgVeV8B6BScuEV0IRSbxHeCMk/AVFXCA8ScQKSXxPqK0fQBBfE5r/D+Y8VzUT9jb94DPimqRYIYkrhGcpKhhxIqTxrpNcExdlQJTTTnRJnCc8ykhUSOIOoZ71ZFfEZ4S2zgUu+rguxZRHEnPbfKRVsOtUl0RtYpOLTYljIS2Z3nVk2DY9SbNCEt8RDm0rUpe4La1jvXSqmtum72raZI24KuNQIYl/nSGSOJb0Jq61M0pxhjwK9304hUjHGSKILzc5Q5drUzttdYY+I97pDH1FzG0zNFUb04gTG4kzJS5kdYauiZtZnaFr4ooKsCIVaDHxKAQxt1NBnGIVHfGCcEQYh3jGU8KBfMKLiyM+lgzAq/qT0ArVTg+Ei1B9fEPoovV4fcfQd2HedScX39GprwGTNjJn0maTELN6IuSzECLB6T5x2eM66jQgnIeSxa60GnS3uL56tr7b1Ai0JPVwYi6yho2U2lgfKym19VxjMRHzEGbvS9K+RBPzetGVUpf29lZHSl2/DMnLvwh1ZMQrKW3Ic4fvJOZS6ZMQW5hpmpT63DvtlFLfm7bBNruM2C2yXb7y3U6ZpRS5P/4jpUjihRTbCJ3q1eL3GMMfAQYAJmB6SBO619IAAAAASUVORK5CYII=') no-repeat;

这可以让您在指针的确切样式（因为它是图像）方面具有更大的灵活性，而无需实际托管图像文件。

Answer 2

我不认为背景动画在旋转和所有方面都是可能的，但是你可以使用css3过渡和background-position属性。但这只会重新定位你的箭头或子弹点图像。

旋转是你可以做的事情，就像你说的那样，它是它自己的元素。

示例：

<div class="element">I'm a block of text</div>

的CSS：

.element{
    background:url('http://lorempixum.com/50/200') no-repeat;
    background-position:-40px;
    border:1px solid black;
    display:block;
    padding-left: 60px;
    height:200px;
    width:240px;
    -webkit-transition:background-position .5s ease;
}

.element:hover{
    background-position:-0px;
}

Answer 3

这些人缺乏想象力，不要让他们让你失望！在CSS3中，您可以使用:before或:after伪元素添加这样的装饰内容，而无需添加额外的标记。

使用您的代码我能够come up with this fiddle。

出于任何原因，在Chrome和Safari中，似乎没有发生缓和，但它可以在Firefox中运行。但我确信有一点，呃，摆弄你可以解决它。这应该至少让你开始。

修改：也适用于背景图片，但same easing issue。

编辑2：仅供参考这是known issue in WebKit。但是，您可以通过生成CSS来处理轮换来伪造它。但如果你走得那么远，你可以使用JS将真实元素放入DOM而不是伪元素。

Answer 4

看起来这显然是不可能的。如果有人有兴趣，我会将其中一个css triangles旋转90度。我可能会使用这个概念的一个变体......当它全部整理好时我会把代码放好。

JSfiddle

如何旋转背景图像（自定义<dt>项目符号）90degrees </dt>

4 个答案: