- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在尝试制作一个 div 来覆盖 svg 图像。我想让 div 具有船的警报器的形状并使用动画使其闪烁,我尝试使用变换:倾斜和旋转但它不适合我想要实现的形状,有没有人有有什么建议么?div处的绿色背景只是为了看它的形状,我会设置成透明的。这是我的代码。谢谢。
#animacao-policia {
position: static;
width: 80%;
animation: none;
margin-left: 10%;
margin-top: 50px;
}
#navio-policia {
position: relative;
}
#luz_azul{
position: absolute;
width: 10.4%;
height: 21%;
z-index: 7;
left: 33.6%;
transform: skew(-10deg);
background: green;
box-shadow: inset 0 0 20px 30px rgba(0, 102, 255, 0.28),
0 0 10px 10px rgba(0, 102, 255, 0.5);
animation: brilho .5s infinite linear;
}
#luz_vermelha{
position: absolute;
width: 10.3%;
height: 21%;
z-index: 7;
right: 33.8%;
transform: skew(8deg);
background: green;
box-shadow: inset 0 0 20px 30px rgba(255, 0, 0, 0.28),
0 0 10px 10px rgba(255, 0, 0, 0.5);
animation: brilho .5s .25s infinite linear;
}
@keyframes brilho {
0% {
}
96% {
opacity: 0;
}
98% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div id="animacao-policia">
<div id="navio-policia">
<div id="luz_azul"></div>
<div id="luz_vermelha"></div>
<a @click="dialogPrisao = true">
<div id="img-policia">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 264.7"><defs><style>.cls-1{fill:#039;}.cls-2{fill:#903;}.cls-3{fill:#ccc;}.cls-4{fill:#603;}.cls-5{fill:#c03;}.cls-6{fill:#009;}.cls-7{fill:#036;}.cls-8{fill:#06c;}</style></defs><title>Ativo 1</title><g id="Camada_2" data-name="Camada 2"><g id="Layer_1" data-name="Layer 1"><polygon class="cls-1" points="229.5 0 256 91 150.8 56.9 176.5 0 229.5 0"/><polygon class="cls-2" points="335.5 0 282.5 0 256 91 361.2 56.9 335.5 0"/><polygon class="cls-3" points="282.5 0 291.1 56.9 256 91 220.9 56.9 229.5 0 282.5 0"/><path class="cls-4" d="M361.2,56.9H333.1L256,125.1,395.4,91A34.23,34.23,0,0,0,361.2,56.9Z"/><path class="cls-5" d="M333.2,56.9H150.8A34.21,34.21,0,0,0,116.7,91L256,125.1,358.2,91C358.2,72.2,346.9,56.9,333.2,56.9Z"/><path class="cls-6" d="M256,196.4l77.2,68.3h28.1a34.21,34.21,0,0,0,34.1-34.1Z"/><path class="cls-1" d="M116.6,230.5,256,196.4l102.2,34.1c0,18.8-11.3,34.1-25,34.1H150.8A34.23,34.23,0,0,1,116.6,230.5Z"/><path class="cls-7" d="M395.4,91H358.2L256,194.9l256-34.1C479.7,132.6,441.6,106.3,395.4,91Z"/><path class="cls-8" d="M443.7,160.7,256,194.9,0,160.7c32.3-28.2,70.4-54.5,116.6-69.8H358.2C392.1,106.3,420,132.6,443.7,160.7Z"/><path class="cls-7" d="M443.7,160.7l-85.5,69.8h37.2c46.2-15.3,84.3-41.6,116.6-69.8Z"/><path class="cls-8" d="M0,160.7H443.7c-23.7,28.2-51.6,54.5-85.5,69.8H116.6C70.4,215.2,32.3,188.9,0,160.7Z"/></g></g>
</svg>
</div>
</a>
</div>
</div>
最佳答案
只需创建另一个具有相同大小的多边形,并为您的样式指定一个“z-index”。示例:
#animacao-policia {
position: static;
width: 80%;
animation: none;
margin-left: 10%;
margin-top: 50px;
}
#navio-policia {
position: relative;
}
#luz_azul{
z-index: 7;
background: green;
box-shadow: inset 0 0 20px 30px rgba(0, 102, 255, 0.28),
0 0 10px 10px rgba(0, 102, 255, 0.5);
animation: brilho .5s infinite linear;
}
#luz_vermelha{
z-index: 7;
background: green;
box-shadow: inset 0 0 20px 30px rgba(255, 0, 0, 0.28),
0 0 10px 10px rgba(255, 0, 0, 0.5);
animation: brilho .5s .25s infinite linear;
}
@keyframes brilho {
0% {
}
96% {
opacity: 0;
}
98% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div id="animacao-policia">
<div id="navio-policia">
<a @click="dialogPrisao = true">
<div id="img-policia">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 264.7"><defs><style>.cls-1{fill:#039;}.cls-2{fill:#903;}.cls-3{fill:#ccc;}.cls-4{fill:#603;}.cls-5{fill:#c03;}.cls-6{fill:#009;}.cls-7{fill:#036;}.cls-8{fill:#06c;}</style></defs><title>Ativo 1</title><g id="Camada_2" data-name="Camada 2"><g id="Layer_1" data-name="Layer 1"><polygon class="cls-1" points="229.5 0 256 91 150.8 56.9 176.5 0 229.5 0"/><polygon id="luz_azul" points="229.5 0 256 91 150.8 56.9 176.5 0 229.5 0"/><polygon class="cls-2" points="335.5 0 282.5 0 256 91 361.2 56.9 335.5 0"/><polygon id="luz_vermelha" points="335.5 0 282.5 0 256 91 361.2 56.9 335.5 0"/><polygon class="cls-3" points="282.5 0 291.1 56.9 256 91 220.9 56.9 229.5 0 282.5 0"/><path class="cls-4" d="M361.2,56.9H333.1L256,125.1,395.4,91A34.23,34.23,0,0,0,361.2,56.9Z"/><path class="cls-5" d="M333.2,56.9H150.8A34.21,34.21,0,0,0,116.7,91L256,125.1,358.2,91C358.2,72.2,346.9,56.9,333.2,56.9Z"/><path class="cls-6" d="M256,196.4l77.2,68.3h28.1a34.21,34.21,0,0,0,34.1-34.1Z"/><path class="cls-1" d="M116.6,230.5,256,196.4l102.2,34.1c0,18.8-11.3,34.1-25,34.1H150.8A34.23,34.23,0,0,1,116.6,230.5Z"/><path class="cls-7" d="M395.4,91H358.2L256,194.9l256-34.1C479.7,132.6,441.6,106.3,395.4,91Z"/><path class="cls-8" d="M443.7,160.7,256,194.9,0,160.7c32.3-28.2,70.4-54.5,116.6-69.8H358.2C392.1,106.3,420,132.6,443.7,160.7Z"/><path class="cls-7" d="M443.7,160.7l-85.5,69.8h37.2c46.2-15.3,84.3-41.6,116.6-69.8Z"/><path class="cls-8" d="M0,160.7H443.7c-23.7,28.2-51.6,54.5-85.5,69.8H116.6C70.4,215.2,32.3,188.9,0,160.7Z"/></g></g>
</svg>
</div>
</a>
</div>
</div>
关于html - 试图制作一个 div 格式以适应 svg 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59200203/
我是 C++ 的新手,我在使用这段代码时遇到了问题: string output_date(int day, int month, int year){ string date; if
所以我这样做了 tar cvzf test.zip FP 为了创建目录 FP 的 zip 但是,它会列出 zip 中的目录 FP/ FP/php/ FP/php/pdf/ FP/php/docs/ F
我正在尝试在 Swift、Xcode 7.3(所以是 Swift 2.2)中创建一个通用类,但我似乎无法让它通过编译器: protocol Struct1Protocol { } struct Str
我的测试用例是这样的: class FooTest extends PHPUnit_Framework_TestCase { /** @covers MyClass::bar */ f
我正在尝试将brew install wine作为使electron-builder工作的一步。但是我所能得到的只是以下响应: ==> Installing dependencies for wine
我这样做: string[,] string1 = {{"one", "0"},{"Two", "5"},{"Three","1"}}; int b = 0; for(int i = 0; i <=
我正在尝试使用 SetWindowsHookEx 键盘 Hook Notepad.exe。 如您所见,工作线程正在将其 ASCII 代码(即 wParam)发送到指定的服务器。 UINT WINAPI
我正在尝试将 ListView 实现到我的 Fragment 中,但无论我尝试什么,我都会得到一个 NullPointerException。我检查对象是否为 null 并记录是否为 null,看起来
我尝试在一行中对齐两个 div。使用 float left 属性,一切顺利。但是当我在 div 中使用图像时,它开始产生问题。 所以这是我的示例代码:- Some headi
我目前正在使用此代码来获取图像的灰度图像表示并以 (512, 370, 1) 的格式表示它大批。 img_instance = cv2.imread(df.iloc[i][x_col]) / 255.
总结 我正在创建一个简单的应用程序,它允许用户选择一个包含顶级窗口的进程。用户首先键入 native DLL(而非托管 DLL)的路径。然后用户键入将在 Hook 过程中调用的方法的名称。该方法不得返
我是一名优秀的程序员,十分优秀!