commit 8ce8ae46091ee9c2beec581b57a386edd94730e5 Author: soragui Date: Sun Jan 8 15:55:05 2023 +0800 css effect 01 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..161e891 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ + +.vscode \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..691d6ed --- /dev/null +++ b/README.md @@ -0,0 +1,2 @@ + +> for css learning and html javascript \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..dabe260 --- /dev/null +++ b/index.html @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + +

+ +

+ + + + + diff --git a/script/index.js b/script/index.js new file mode 100644 index 0000000..e64d684 --- /dev/null +++ b/script/index.js @@ -0,0 +1,11 @@ + +var hello = "your name"; +let pHone = 23.90; + +nops = () => { + console.log("nops func"); +} + +nops(); + +console.log("hello codeory"); diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..6974993 --- /dev/null +++ b/styles/style.css @@ -0,0 +1,79 @@ + +body { + display: grid; + height: 100vh; + place-items: center; +} + +a { + font-family: 'Courier New', Courier, monospace; + font-size: 27px; + font-weight: 700; +} + +/* sliding effect */ +.slidinglink { + line-height: 1.5; + box-shadow: inset 0 0 0 0 #3282dd; + color: #3282dd; + padding: 0 .25rem; + margin: 0 -.25rem; + transition: color .3s ease-in-out, box-shadow .3s ease-in-out; + text-decoration: none; +} + +.slidinglink:hover { + color: rgb(255, 255, 255); + box-shadow: inset 200px 0 0 0 #3282dd; + text-decoration: none; +} + +/*swappin effect*/ + +.swappinlink { + overflow: hidden; + position: relative; + display: inline-block; +} + +.swappinlink::before, +.swappinlink::after { + content: ''; + position: absolute; + width: 100%; + left: 0; +} +.swappinlink::before { + background-color: #54b3d6; + height: 2px; + bottom: 0; + transform-origin: 100% 50%; + transform: scaleX(0); + transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1); +} +.swappinlink::after { + content: attr(data-replace); + height: 100%; + top: 0; + transform-origin: 100% 50%; + transform: translate3d(200%, 0, 0); + transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1); + color: #54b3d6; +} + +.swappinlink:hover::before { + transform-origin: 0% 50%; + transform: scaleX(1); +} +.swappinlink:hover::after { + transform: translate3d(0, 0, 0); +} + +.swappinlink span { + display: inline-block; + transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1); +} + +.swappinlink:hover span { + transform: translate3d(-200%, 0, 0); +} \ No newline at end of file