svg瞄准器鼠标效果
代码语言：html
所属分类：布局界面
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/*
VVVV Below is code from my own stylesheet: ^^^^
*/
/*
Last Modified on the 20th February 2020
*/
/*____________________*/
/* VVVV Body Styles Below VVVV */
body{
font-family: 'Times New Roman', Times, serif;
font-size: 1em;
color:#000000;
}
/* ^^^^ Body Styles Above ^^^^ */
/*____________________*/
/* VVVV Heading Styles below: VVVV */
h1{
font-size:2.4em;
font-weight: bold;
text-align: center;
color: #000000;
text-decoration: underline;
}
h2{
font-size:2.2em;
font-weight: bold;
text-align: center;
color: #000000;
text-decoration: underline;
}
h3{
font-size:2em;
font-weight: bold;
text-align: center;
color: #000000;
text-decoration: underline;
}
h4{
font-size:1.8em;
font-weight: bold;
text-align: center;
color:#000000;
text-decoration:underline;
}
h5{
font-size:1.6em;
font-weight: bold;
text-align: center;
color:#000000;
text-decoration:underline;
}
h6{
font-size:1.4em;
font-weight: bold;
text-align: center;
color:#000000;
text-decoration:underline;
}
/* ^^^^ Heading Styles above: ^^^^ */
/*____________________*/
/* VVVV Figure Styles Below: VVVV */
figure{
text-align:center;
}
img#tironian_et_symbol_image_svg{
width:20%;
height:20%;
}
img#raster_pencil_drawing_of_marcus_tulius_cicero{
width:40%;
height:40%;
}
figcaption{
text-align:left;
text-indent: 1rem;
}
/* ^^^^ Figure Styles Above: ^^^^ */
/*____________________*/
/* VVVV Blockquote Styles Below: VVVV */
blockquote{
text-align: center;
font-style: normal;
color:#000000;
font-size:1.2em;
background-color: #E0E0E0;
}
/* ^^^^ Blockquote Styles Above: ^^^^ */
/*____________________*/
/* VVVV q styles below VVVV */
q{
display:inline}
q:before{
content:none}
q:after{
content:none}
/* ^^^^ q styles above ^^^^ */
/*____________________*/
/* VVVV Math Styles Below VVVV */
.cambria_math_italic{
font-size: inherit;
color:#000000;
font-family:"Cambria Math", serif;
font-style:italic;
}
.cambria_math_normal{
font-size: inherit;
color:#000000;
font-family:"Cambria Math", serif;
font-style:normal;
}
.cambria_math_normal_center{
font-size:inherit;
color:#000000;
font-family:"Cambria Math", serif;
font-style:normal;
text-align:center;
}
.cambria_math_italic_center{
font-size:inherit;
color:#000000;
font-family:"Cambria Math", serif;
font-style:normal;
text-align:center;
}
/* ^^^^ Math Styles Above ^^^^ */
/*____________________*/
/* VVVV Drop Cap Styles VVVV */
.my_drop_cap{
font-size: 3.125rem;
line-height:1.4rem;
font-weight:bold;
vertical-align:middle;
padding: 1 1rem;
}
/* ^^^^ Drop Cap Styles Above */
/*____________________*/
/* VVVV Table Styles VVVV */
table{
border:0.0625em solid #000000;
border-collapse:collapse;
margin:auto;
}
td, th{
border: 0.0625em solid #000000;
border-collapse:collapse;
margin: auto;
padding: 1em;}
td{
text-align: center;
}
caption{
caption-side:bottom;
}
/* ^^^^ Table Styles Above ^^^^ */
/* ____________________ */
/* VVVV Paragraph Styles Below VVVV */
.centered{
text-align: center;
}
/* ^^^^ Paragraph Styles Above ^^^^ */
/* ____________________ */
/* VVVV Code (SNIPPET) Styles Below VVVV */
code{
color:black;
font-size: 1em;
font-family: 'Courier New', Courier, monospace;
}
.code_tag_name{
color:#446FBD;
}
.code_attribute_name{
color: #6D8600;
}
.code_attribute_value{
color:#E88501;
}
.code_ide_line_number{
background-color:#00000018;
}
/* ^^^^ Code (SNIPPET) Styles Below ^^^^ */
/* ____________________ */
/*
^^^^ Above is code from my own stylesheet: ^^^^
*/
/* VVVV The Following is CSS for the Custom Cursor VVVV */
.container {
width: 50vw;
height: 50vh;
background: #E0E0E0;
cursor: url("data:image/svg+xml,%3Csvg id='svg10600' width='128' height='128' version='1.1' viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle id='title11386'%3ERifle Scope my crosshair Optimised 128 px%3C/title%3E%3Cg id='layer1'%3E%3Cg id='g11380' transform='matrix(.11538462 0 0 .11538462 4 4)' clip-rule='evenodd' fill-rule='evenodd'%3E%3Cg id='cartesian_plane_image'%3E%3Cpath id='x_axis' d='m520 20v1e3' fill='none' stroke='%23000000' stroke-width='4.33333316'/%3E%3Cpath id='y_axis' d='m20 520h1e3' fill='none' stroke='%23000000' stroke-width='4.33333316'/%3E%3Cg id='measurement_triangles_group_g' fill-rule='nonzero' stroke-width='1.91651177'%3E%3Cpath id='point_down_triangle' d='m506.44835 1004.5509 13.55165 19.1652 13.55165-19.1652h-27.1033'/%3E%3Cpath id='point_down_triangle-4' d='m506.44835 35.415199 13.55165-19.1652 13.55165 19.1652h-27.1033' clip-rule='evenodd'/%3E%3Cpath id='point_down_triangle-1' d='m1004.6186 533.55165 19.1652-13.55165-19.1652-13.55165v27.1033' clip-rule='evenodd'/%3E%3Cpath id='point_down_triangle-7' d='m35.056667 506.44835-19.1652 13.55165 19.1652 13.55165v-27.1033' clip-rule='evenodd'/%3E%3C/g%3E%3Cg id='g11282' stroke-width='2.16666658'%3E%3Cg id='g11656' transform='rotate(90,490.53419,701.69188)' clip-rule='evenodd' fill='none' stroke='%23000000'%3E%3Cpath id='path11284-9' d='m759.82913 682.22607v-20' stroke-width='3.06799984'/%3E%3Cpath id='path11288-6' d='m659.82913 682.22607v-20' stroke-width='3.06412935'/%3E%3Cpath id='path11290-46' d='m609.82913 692.22876v-40.00538' stroke-width='3.06433487'/%3E%3Cpath id='path11294-3-1-4' d='m560.10271 702.23009v-60.00804' stroke-width='3.06799984'/%3E%3Cpath id='path11290-4-28' d='m709.82913 692.22872v-40.00538' stroke-width='3.06433487'/%3E%3Cpath id='path11284-0-6' d='m360.3763 682.22607v-20' stroke-width='3.06799984'/%3E%3Cpath id='path11288-4-7' d='m460.3763 682.22607v-20' stroke-width='3.06412935'/%3E%3Cpath id='path11290-42-4' d='m510.37629 692.22876v-40.00538' stroke-width='3.06433487'/%3E%3Cpath id='path11290-4-3-2' d='m410.3763 692.22872v-40.00538' stroke-width='3.06433487'/%3E%3C/g%3E%3C/g%3E%3Cg id='g11320' fill='none' stroke='%23000000' stroke-width='17.33333264'%3E%3Cpath id='path11284' d='m470 530v-20' stroke-width='3.06799988'/%3E%3Cpath id='path11288' d='m370 530v-20' stroke-width='3.06412935'/%3E%3Cpath id='path11290' d='m320 540.00269v-40.00538' stroke-width='3.06433487'/%3E%3Cpath id='path11294-3-1' d='m270.27358 550.00402v-60.00804' clip-rule='evenodd' stroke-width='3.06799988'/%3E%3Cpath id='path11290-4' d='m420 540.00265v-40.00538' clip-rule='evenodd' stroke-width='3.06433487'/%3E%3Cpath id='path11284-0' d='m70.547159 530v-20' clip-rule='evenodd' stroke-width='3.06799984'/%3E%3Cpath id='path11288-4' d='m170.54716 530v-20' clip-rule='evenodd' stroke-width='3.06412935'/%3E%3Cpath id='path11290-42' d='m220.54716 540.00269v-40.00538' clip-rule='evenodd' stroke-width='3.06433487'/%3E%3Cpath id='path11290-4-3' d='m120.54716 540.00265v-40.00538' clip-rule='evenodd' stroke-width='3.06433487'/%3E%3Cg id='g11595' transform='rotate(90,297.08548,695.6986)' clip-rule='evenodd'%3E%3Cpath id='path11284-1' d='m69.852878 482.78409v-20' stroke-width='3.06799984'/%3E%3Cpath id='path11288-9' d='m-30.147122 482.78409v-20' stroke-width='3.06412935'/%3E%3Cpath id='path11290-49' d='m-80.147122 492.78678v-40.00538' stroke-width='3.06433487'/%3E%3Cpath id='path11294-3-1-1' d='m-129.87354 502.78811v-60.00804' stroke-width='3.06799984'/%3E%3Cpath id='path11290-4-2' d='m19.852878 492.78674v-40.00538' stroke-width='3.06433487'/%3E%3Cpath id='path11284-0-3' d='m-329.59996 482.78409v-20' stroke-width='3.06799984'/%3E%3Cpath id='path11288-4-1' d='m-229.59996 482.78409v-20' stroke-width='3.06412935'/%3E%3Cpath id='path11290-42-6' d='m-179.59996 492.78678v-40.00538' stroke-width='3.06433487'/%3E%3Cpath id='path11290-4-3-6' d='m-279.59996 492.78674v-40.00538' stroke-width='3.06433487'/%3E%3C/g%3E%3Cpath id='path11284-8' d='m969.45285 530v-20' clip-rule='evenodd' stroke-width='3.06799984'/%3E%3Cpath id='path11288-8' d='m869.45283 530v-20' clip-rule='evenodd' stroke-width='3.06412935'/%3E%3Cpath id='path11290-2' d='m819.45283 540.00269v-40.00538' clip-rule='evenodd' stroke-width='3.06433487'/%3E%3Cpath id='path11294-3-1-6' d='m769.72641 550.00402v-60.00804' clip-rule='evenodd' stroke-width='3.06799984'/%3E%3Cpath id='path11290-4-31' d='m919.45285 540.00265v-40.00538' clip-rule='evenodd' stroke-width='3.06433487'/%3E%3Cpath id='path11284-0-2' d='m570 530v-20' clip-rule='evenodd' stroke-width='3.06799984'/%3E%3Cpath id='path11288-4-0' d='m670 530v-20' clip-rule='evenodd' stroke-width='3.06412935'/%3E%3Cpath id='path11290-42-0' d='m719.99999 540.00269v-40.00538' clip-rule='evenodd' stroke-width='3.06433487'/%3E%3Cpath id='path11290-4-3-8' d='m620 540.00265v-40.00538' clip-rule='evenodd' stroke-width='3.06433487'/%3E%3C/g%3E%3Ccircle id='circle11322' cx='520' cy='520' r='508.5' fill='none' stroke='%23000000' stroke-width='9.5px'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"), pointer;}
.container_2 {
width: 50vw;
height: 50vh;
background: #E0E0E0;
cursor: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Ccircle cx='63.5' cy='63.5' r='60.5' stroke='%23000' stroke-width='3' fill='none'/%3E%3Cg stroke='%23FF000000'%3E%3Cpath d='M6 63.5h115'/%3E%3Cpath d='M63.5 6v115'/%3E%3C/g%3E%3Ccircle cx='63.5' cy='63.5' r='1.5' fill='red' fill-opacity='.5'/%3E%3Cg stroke='%23000'%3E%3Cpath d='M68.5 60.5v6'/%3E%3Cpath d='M72.5 57.5v12'/%3E%3Cpath d='M77.5 60.5v6'/%3E%3Cpath d='M82.5 57.5v12'/%3E%3Cpath d='M87.5 54.5v18'/%3E%3Cpath d='M92.5 57.5v12'/%3E%3Cpath d='M97.5 60.5v6'/%3E%3Cpath d='M102.5 57.5v12'/%3E%3Cpath d='M107.5 60.5v6'/%3E%3Cg%3E%3Cpath d='M58.5 60.5v6'/%3E%3Cpath d='M53.5 57.5v12'/%3E%3Cpath d='M48.5 60.5v6'/%3E%3Cpath d='M43.5 57.5v12'/%3E%3Cpath d='M38.5 54.5v18'/%3E%3Cpath d='M33.5 57.5v12'/%3E%3Cpath d='M28.5 60.5v6'/%3E%3Cpath d='M23.5 57.5v12'/%3E%3Cpath d='M18.5 60.5v6'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M60.5 68.5h6'/%3E%3Cpath d='M57.5 72.5h12'/%3E%3Cpath d='M60.5 77.5h6'/%3E%3Cpath d='M57.5 82.5h12'/%3E%3Cpath d='M54.5 87.5h18'/%3E%3Cpath d='M57.5 92.5h12'/%3E%3Cpath d='M60.5 97.5h6'/%3E%3Cpath d='M57.5 102.5h12'/%3E%3Cpath d='M60.5 107.5h6'/%3E%3Cg%3E%3Cpath d='M60.5 58.5h6'/%3E%3Cpath d='M57.5 53.5h12'/%3E%3Cpath d='M60.5 48.5h6'/%3E%3Cpath d='M57.5 43.5h12'/%3E%3Cpath d='M54.5 38.5h18'/%3E%3Cpath d='M57.5 33.5h12'/%3E%3Cpath d='M60.5 28.5h6'/%3E%3Cpath d='M57.5 23.5h12'/%3E%3Cpath d='M60.5 18.5h6'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cpath d='M63.5 4.33974596L58.5 13h10z'/%3E%3Cpath d='M63.5 122.66025404L58.5 114h10z'/%3E%3Cpath d='M122.66025404 63.5L114 58.5v10z'/%3E%3Cpath d='M4.33974596 63.5L13 68.5v-10z'/%3E%3C/svg%3E%0A"),pointer;
/* ^^^^ The Following is CSS for the Custom Cursor ^^^^ */
</style>
</head>
<body translate="no">
<article>
<h1>Custom Cursors in SVG:</h1>
<p>Please use your mouse's cursor to howver over the gray element below: The mouse's cursor shall change to a rifle scope:</p>
<div class="container"></div>
<p>Please use your mouse's cursor to howver over the gray element below: The mouse's cursor shall change to another rifle scope:</p>
<div class="container_2" style="display:block;"></div>
<p>The two rifle scopes employed in this demonstration, are below:</p>
<figure>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 128 128" version="1.1" id="svg10600" inkscape:version="0.92.3 (2405546, 2018-03-11)" sodipodi:docname="rifle_scope_svg_my_crosshair_128_px_optimised.svg">
<title id="title11386">Rifle Scope my crosshair Optimised 128 px</title>
<defs id="defs10594" />
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="8" inkscape:cx="94.737495" inkscape:cy="36.640779" inkscape:document-units="px" inkscape:current-layer="cartesian_plane_image" showgrid="false" showguides="false" inkscape:guide-bbox="true" inkscape:snap-page="false" inkscape:snap-intersection-paths="true" inkscape:snap-bbox="true" inkscape:bbox-paths="true" inkscape:bbox-nodes="true" inkscape:snap-bbox-edge-midpoints="true" inkscape:snap-bbox-midpoints="true" inkscape:window-width="3840" inkscape:window-height="2066" inkscape:window-x="-11" inkscape:window-y="-11" inkscape:window-maximized="1" inkscape:object-paths="true">
<sodipodi:guide position="0,128" orientation="0.70710678,0.70710678" id="guide11382" inkscape:locked="false" />
<sodipodi:guide position="0,0" orientation="-0.70710678,0.70710678" id="guide11384" inkscape:locked="false" />
<sodipodi:guide position="29.384616,65.153844" orientation="0,1" id="guide11388" inkscape:locked="false" />
<sodipodi:guide position="29.259616,62.846151" orientation="0,1" id="guide11390" inkscape:locked="false" />
<sodipodi:guide position="52.284764,66.308" orientation="0,1" id="guide11477" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(255,0,0)" />
<sodipodi:guide position="52.638317,61.692" orientation="0,1" id="guide11479" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(255,0,0)" />
<sodipodi:guide position="35.153847,67.462" orientation="0,1" id="guide11481" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(255,0,255)" />
<sodipodi:guide position="35.278847,60.538" orientation="0,1" id="guide11483" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(255,0,255)" />
<sodipodi:guide position="52.46154,66.30769" orientation="1,0" id="guide11485" inkscape:locked="false" />
<sodipodi:guide position="35.185414,67.462" orientation="1,0" id="guide11529" inkscape:locked="false" />
<sodipodi:guide position="63.423079,69.769229" orientation="0,1" id="guide11531" inkscape:locked="false" />
<sodipodi:guide position="64.000002,69.769229" orientation="1,0" id="guide11597" inkscape:locked="false" />
<sodipodi:guide position="69.769233,63.423075" orientation="1,0" id="guide11599" inkscape:locked="false" />
<sodipodi:guide position="64.000002,58.230767" orientation="0,1" id="guide11623" inkscape:locked="false" />
<sodipodi:guide position="64.000002,5.8789062" orientation="0,1" id="guide11658" inkscape:locked="false" />
<sodipodi:guide position="64.000002,122.125" orientation="0,1" id="guide11675" inkscape:locked="false" />
<sodipodi:guide position="122.12891,63.999998" orientation="1,0" id="guide11677" inkscape:locked="false" />
<sodipodi:guide position="121.39844,63.999998" orientation="0,1" id="guide11679" inkscape:locked="false" />
<sodipodi:guide position="5.8336309,63.999998" orientation="1,0" id="guide11702" inkscape:locked="false" />
</sodipodi:namedview>
<metadata id="metadata10597">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>Rifle Scope my crosshair Optimised 128 px</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1">
<g style="clip-rule:evenodd;fill-rule:evenodd" id="g11380" transform="matrix(0.11538462,0,0,0.11538462,4,4)">
<g id="cartesian_plane_image">
<path style="fill:none;fill-rule:nonzero;stroke:#000000;stroke-width:4.33333316;stroke-miterlimit:4;stroke-dasharray:none" d="M 520,20 V 1020" id="x_axis" inkscape:connector-curvature="0" />
<path style="fill:none;fill-rule:nonzero;stroke:#000000;stroke-width:4.33333316;stroke-miterlimit:4;stroke-dasharray:none" d="M 20,520 H 1020" id="y_axis" inkscape:connector-curvature="0" />
<g id="measurement_triangles_group_g">
<path style="fill-rule:nonzero;stroke-width:1.91651177" d="M 506.44835,1004.5509 520,1023.7161 l 13.55165,-19.1652 h -27.1033" id="point_down_triangle" inkscape:connector-curvature="0" />
<path style="clip-rule:evenodd;fill-rule:nonzero;stroke-width:1.91651177" d="M 506.44835,35.415199 520,16.249999 l 13.55165,19.1652 h -27.1033" id="point_down_triangle-4" inkscape:connector-curvature="0" />
<path style="clip-rule:evenodd;fill-rule:nonzero;stroke-width:1.91651177" d="M 1004.6186,533.55165 1023.7838,520 1004.6186,506.44835 v 27.1033" id="point_down_triangle-1" inkscape:connector-curvature="0" />
<path style="clip-rule:evenodd;fill-rule:nonzero;stroke-width:1.91651177" d="M 35.056667,506.44835 15.891467,520 l 19.1652,13.55165 v -27.1033" id="point_down_triangle-7" inkscape:connector-curvature="0" />
</g>
<g id="g11282" style="strok.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0