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%.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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