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