Question

嗨，大家好我只想在css / sass中这样做！边框必须在翻滚时改变，背景可能是图像！我试过SVG和clipPath，transform3d没有任何成功！这里的例子

Answer 1

创建容器div并使用CSS中的变换为整个元素提供3d效果。你可以查看它并根据自己的喜好玩这些值。

使背景图像成为容器div的背景，以保持简单。

使用SVG绘制控制器图标。有一些关于如何使用GIMP导出SVG路径的教程，至少这是我对复杂形状这样做的。

Answer 2

好的，这样做最好，首先是html结构：

<div id="imageContainer" class="center">
<h2>Lets go and see how it goes</h2>
<img class="pic" src="https://moltopiccolo.files.wordpress.com/2012/01/cool-      drinks.jpg"> 
</div>

这意味着，你有一个容器div并将你的img放在那个容器中，重要的是在这个例子中没有img作为div背景。

其次，将div相对位置，图像绝对。这只有在图像位于绝对位置时才有效。

现在声明一个剪辑路径，有不同形状的生成器和预览等，检查codepen是否有正确的声明。

转换到剪辑路径，请务必使用前缀。

现在你需要在悬停时触发动画，这可以通过css来完成。如果你想在点击时触发动画，你可以在JS中这样做并用JS改变剪辑路径。

我认为边框动画无需解释，这是最简单的部分，如果你需要帮助，请告诉我。

这是链接，将鼠标悬停在图片上并查看： - ）

http://codepen.io/damianocel/pen/KdobyK

Answer 3

There is the workaround that we found. It will need some adjustement but look good for our need!

<a href="">
        <svg class="stroke-path" height="100%" width="100%">
            <defs>
                <pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%">
                    <image xlink:href="http://cdn.collider.com/wp-content/uploads/super-mario-bros.jpg" x="0" y="0" width="100%" height="100%" />
                </pattern>
            </defs>
            <path id="mlp2" d="M206.5,173.1L33.3,162.5c-6.3,0-11.4-5.1-11.3-11.4c0,0,0,0,0,0L10.5,39.8c0-6.3,5.1-11.4,11.3-11.4 c0,0,0,0,0,0l208.2-17.9c6.3,0,11.4,5.1,11.3,11.4c0,0,0,0,0,0l-23.6,139.8C217.8,168,212.8,173.1,206.5,173.1 C206.5,173.1,206.5,173.1,206.5,173.1z" fill="url(#img1)" fill-opacity="1" />
        </svg>  
        <svg class="" height="100%" width="100%">
            <defs>
                <filter id="f1" x="0" y="0" width="200%" height="200%">
                    <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
                    <feGaussianBlur result="blurOut" in="offOut" stdDeviation="8" />

-->

http://codepen.io/anon/pen/vXBPOz

自定义CSS形状与边框和背景图像

3 个答案: