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 3.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0