forked from lizzz0523/limni
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
lizmlzhou
committed
Oct 20, 2019
1 parent
22fa05b
commit c33ae48
Showing
7 changed files
with
304 additions
and
2 deletions.
There are no files selected for viewing
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| <template> | ||
| <div class="badge">Hi</div> | ||
| </template> | ||
|
|
||
| <style> | ||
| @keyframes shake { | ||
| 0% { | ||
| transform: rotate(0deg); | ||
| } | ||
| 4% { | ||
| transform: rotate(-5deg); | ||
| } | ||
| 8% { | ||
| transform: rotate(5deg); | ||
| } | ||
| 12% { | ||
| transform: rotate(-5deg); | ||
| } | ||
| 16% { | ||
| transform: rotate(5deg); | ||
| } | ||
| 20% { | ||
| transform: rotate(-5deg); | ||
| } | ||
| 24% { | ||
| transform: rotate(5deg); | ||
| } | ||
| 28% { | ||
| transform: rotate(0deg); | ||
| } | ||
| } | ||
| .badge { | ||
| position: relative; | ||
| display: flex; | ||
| justify-content: center; | ||
| border-radius: 4px 4px 0 0; | ||
| margin: 2px; | ||
| width: 36px; | ||
| height: 36px; | ||
| overflow: hidden; | ||
| filter: drop-shadow(0 1px 1px #973340a3); | ||
| color: white; | ||
| font-weight: bold; | ||
| line-height: 32px; | ||
| text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); | ||
| animation: shake infinite 2s ease; | ||
| } | ||
| .badge::before, | ||
| .badge::after { | ||
| content: ''; | ||
| position: absolute; | ||
| left: 0; | ||
| top: 0; | ||
| z-index: -1; | ||
| display: block; | ||
| border-radius: 4px; | ||
| width: 100%; | ||
| height: 100%; | ||
| background-image: linear-gradient(0deg, red, #ff8484); | ||
| } | ||
| .badge::before { | ||
| transform-origin: left top; | ||
| transform: skewY(-20deg); | ||
| } | ||
| .badge::after { | ||
| transform-origin: right top; | ||
| transform: skewY(20deg); | ||
| } | ||
| </style> |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| <template> | ||
| <div class="calendar">31</div> | ||
| </template> | ||
|
|
||
| <style> | ||
| .calendar { | ||
| position: relative; | ||
| margin: 2px 5px 30px; | ||
| border-radius: 2px 2px 0 0; | ||
| width: 36px; | ||
| height: 5px; | ||
| transform-style: preserve-3d; | ||
| background-color: #ccc; | ||
| color: rgb(233, 233, 233); | ||
| font-size: 20px; | ||
| font-weight: 200; | ||
| text-align: center; | ||
| line-height: 40px; | ||
| transform: translateZ(0); | ||
| } | ||
| .calendar::before, | ||
| .calendar::after { | ||
| content: ''; | ||
| position: absolute; | ||
| left: 50%; | ||
| top: 5px; | ||
| z-index: -1; | ||
| display: block; | ||
| margin-left: -20px; | ||
| border-radius: 3px; | ||
| width: 40px; | ||
| height: 30px; | ||
| } | ||
| .calendar::before { | ||
| background-color: rgb(35, 109, 193); | ||
| transform: translateZ(-2px) rotateX(-10deg); | ||
| } | ||
| .calendar::after { | ||
| background-color: rgb(45, 118, 228); | ||
| transform: translateZ(-2px) rotateX(10deg); | ||
| box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); | ||
| } | ||
| </style> |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| <template> | ||
| <div class="heart" /> | ||
| </template> | ||
|
|
||
| <style> | ||
| @keyframes breath { | ||
| 0% { | ||
| transform: scale(1); | ||
| } | ||
| 50% { | ||
| transform: scale(1.1); | ||
| } | ||
| 100% { | ||
| transform: scale(1); | ||
| } | ||
| } | ||
| .heart { | ||
| display: flex; | ||
| margin: 5px 0; | ||
| width: 40px; | ||
| height: 30px; | ||
| filter: drop-shadow(0 1px 1px #973340a3); | ||
| animation: breath infinite 2s ease; | ||
| } | ||
| .heart::before, | ||
| .heart::after { | ||
| content: ''; | ||
| flex: 1; | ||
| height: 30px; | ||
| border-radius: 20px 20px 4px 4px; | ||
| transform-origin: 50% 6px; | ||
| } | ||
| .heart::before { | ||
| transform: rotate(-45deg); | ||
| background-image: linear-gradient(90deg, red, #ff6666); | ||
| } | ||
| .heart::after { | ||
| transform: rotate(45deg); | ||
| background-image: linear-gradient(-0deg, red, #ff8484); | ||
| } | ||
| </style> |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| <template> | ||
| <div class="landmark" /> | ||
| </template> | ||
|
|
||
| <style> | ||
| @keyframes jump { | ||
| 0% { | ||
| transform: translateY(0px); | ||
| } | ||
| 50% { | ||
| transform: translateY(-10px); | ||
| } | ||
| 100% { | ||
| transform: translateY(0px); | ||
| } | ||
| } | ||
| .landmark { | ||
| position: relative; | ||
| display: block; | ||
| border-radius: 100%; | ||
| width: 30px; | ||
| height: 30px; | ||
| filter: drop-shadow(0 1px 1px #973340a3); | ||
| background-image: linear-gradient(0deg, red, #ff8484); | ||
| animation: jump infinite 2s ease; | ||
| } | ||
| .landmark::before { | ||
| content: ''; | ||
| position: absolute; | ||
| bottom: 0; | ||
| left: 50%; | ||
| z-index: -2; | ||
| display: block; | ||
| margin-left: -5px; | ||
| width: 10px; | ||
| height: 10px; | ||
| background-color: red; | ||
| transform: scaleX(1.3) translateY(2px) rotate(45deg); | ||
| } | ||
| .landmark::after { | ||
| content: ''; | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| display: block; | ||
| margin-top: -5px; | ||
| margin-left: -5px; | ||
| border-radius: 100%; | ||
| width: 10px; | ||
| height: 10px; | ||
| background-color: white; | ||
| box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.4); | ||
| } | ||
| </style> |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| <template> | ||
| <div class="mail" /> | ||
| </template> | ||
|
|
||
| <style> | ||
| .mail { | ||
| position: relative; | ||
| margin: 5px 0; | ||
| border-radius: 4px; | ||
| width: 40px; | ||
| height: 30px; | ||
| background-image: linear-gradient(90deg, rgb(228, 69, 69), rgb(129, 0, 0)); | ||
| overflow: hidden; | ||
| box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); | ||
| } | ||
| .mail::before { | ||
| content: ''; | ||
| position: absolute; | ||
| top: -29px; | ||
| left: 50%; | ||
| z-index: 1; | ||
| display: block; | ||
| margin-left: -20px; | ||
| border: 4px solid rgb(228, 69, 69); | ||
| border-radius: 2px; | ||
| width: 32px; | ||
| height: 32px; | ||
| background-color: #eee; | ||
| transform: scaleX(1.3) rotate(45deg); | ||
| box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2); | ||
| } | ||
| .mail::after { | ||
| content: ''; | ||
| display: block; | ||
| margin: 7px 4px 0; | ||
| width: 0; | ||
| height: 0; | ||
| border-top: 14px solid #999; | ||
| border-bottom: 12px solid #eee; | ||
| border-left: 14px solid #e0e0e0; | ||
| border-right: 18px solid #e0e0e0; | ||
| background-color: white; | ||
| } | ||
| </style> |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| <template> | ||
| <div class="vue" /> | ||
| </template> | ||
|
|
||
| <style> | ||
| .vue { | ||
| position: relative; | ||
| width: 40px; | ||
| height: 40px; | ||
| overflow: hidden; | ||
| filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2)); | ||
| } | ||
| .vue::before, | ||
| .vue::after { | ||
| content: ''; | ||
| position: absolute; | ||
| left: 50%; | ||
| top: 50%; | ||
| transform: scaleY(1.8) translate(-50%, -30px) rotate(45deg); | ||
| } | ||
| .vue::before { | ||
| width: 40px; | ||
| height: 40px; | ||
| background: #41b883; | ||
| } | ||
| .vue::after { | ||
| width: 20px; | ||
| height: 20px; | ||
| border: 6px solid #35495e; | ||
| background-color: white; | ||
| } | ||
| </style> |
This file contains 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