带有边框和背景图片的自定义 CSS 形状
Custom CSS shape with borders and background image
大家好,我只想在 css/sass 中做到这一点!边框必须在翻转时改变,背景可以是图像!我尝试了 SVG 和 clipPath,transform3d 都没有成功!示例在这里
创建容器 div 并在 CSS 中使用变换为整个元素赋予 3d 效果。您可以查找并根据自己的喜好使用这些值。
将背景图像设为容器的背景div以保持简单。
使用 SVG 绘制控制器图标。有一些关于如何使用 GIMP 导出 SVG 路径的教程,至少我是这样处理复杂形状的。
好的,最好这样,首先是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 定位,图像 absolute.This 只有在绝对定位时才有效。
现在声明一个剪辑路径,有不同形状的生成器和预览等,检查 codepen 是否正确声明。
过渡到剪辑路径,确保使用前缀。
现在由您决定是否要在悬停时触发动画,这可以通过 css 完成。如果你想在点击时触发动画,你可以在 JS 中实现,并用 JS 更改剪辑路径。
我认为边框动画不需要解释,这是最简单的部分,如果您需要帮助,请告诉我。
这是link,将鼠标悬停在图片上查看:-)
我们找到了解决方法。它需要一些调整,但看起来很适合我们的需要!
<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" />
-->
大家好,我只想在 css/sass 中做到这一点!边框必须在翻转时改变,背景可以是图像!我尝试了 SVG 和 clipPath,transform3d 都没有成功!示例在这里
创建容器 div 并在 CSS 中使用变换为整个元素赋予 3d 效果。您可以查找并根据自己的喜好使用这些值。
将背景图像设为容器的背景div以保持简单。
使用 SVG 绘制控制器图标。有一些关于如何使用 GIMP 导出 SVG 路径的教程,至少我是这样处理复杂形状的。
好的,最好这样,首先是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 定位,图像 absolute.This 只有在绝对定位时才有效。
现在声明一个剪辑路径,有不同形状的生成器和预览等,检查 codepen 是否正确声明。
过渡到剪辑路径,确保使用前缀。
现在由您决定是否要在悬停时触发动画,这可以通过 css 完成。如果你想在点击时触发动画,你可以在 JS 中实现,并用 JS 更改剪辑路径。
我认为边框动画不需要解释,这是最简单的部分,如果您需要帮助,请告诉我。
这是link,将鼠标悬停在图片上查看:-)
我们找到了解决方法。它需要一些调整,但看起来很适合我们的需要!
<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" />
-->