Last active
February 18, 2019 14:44
-
-
Save winrey/52e9bb0f435a402ae252ca5e1d2f2f41 to your computer and use it in GitHub Desktop.
A SVG flag
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>旗帜SVG演示</title> | |
| <meta charset="UTF-8"> | |
| <style> | |
| body{ | |
| background-color: #334b6c; | |
| } | |
| .notice{ | |
| margin: 50px; | |
| color: rgb(214, 214, 214); | |
| } | |
| .flag-demo { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| height: 100%; | |
| } | |
| .flag-demo svg{ | |
| transform: scale(0.9); | |
| opacity: 0.5; | |
| transition: transform 0.8s, opacity 0.8s, filter 0.4s; | |
| filter: grayscale(80%); | |
| } | |
| .flag-demo svg:hover{ | |
| transform: scale(1); | |
| opacity: 1; | |
| filter: grayscale(0%); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="flag-demo"> | |
| <!-- 从这里开始是真正的SVG旗帜代码 --> | |
| <svg xmlns="http://www.w3.org/2000/svg" height="200px" width="160px"> | |
| <polygon | |
| points="0,0 160,0 160,200 80,120 0,200" | |
| style=" | |
| fill:#dc5762; | |
| stroke:#680101; | |
| stroke-width:1; | |
| "/> | |
| </svg> | |
| <!-- SVG旗帜代码 结束 --> | |
| <h1 class="notice">↑↑↑ 把鼠标移上去试试 ↑↑↑</h1> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment