css effect 01

2023-01-08 15:55:05 +08:00 · 2023-01-08 15:55:05 +08:00 · 8ce8ae4609
commit 8ce8ae4609
5 changed files with 121 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,2 @@
+
+.vscode
--- a/README.md
+++ b/README.md
@ -0,0 +1,2 @@
+
+> for css learning and html javascript
--- a/index.html
+++ b/index.html
@ -0,0 +1,27 @@
+
+<!DOCTYPE html>
+<html>
+
+<head>
+    <!-- Remote style sheet -->
+    <link rel="stylesheet"
+          href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
+    
+    <!-- Local style sheet relative to workspace folder -->
+    <link rel="stylesheet" href="styles/style.css">
+    
+</head>
+
+<body>
+    <div class="container">
+        <ul>
+            <li><a class="slidinglink" href="#">Sliding Link</a></li>
+            <li><a href="#" class="swappinlink" data-replace="See"><span>Go</span></a></li>
+        </ul>
+        
+     </div>
+</body>
+
+<script src="script/index.js" ></script>
+
+</html>
--- a/script/index.js
+++ 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");
--- a/styles/style.css
+++ 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);
+}