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