soragui/csslearn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

css effect 01

Browse Source
This commit is contained in:
soragui 2023-01-08 15:55:05 +08:00
commit 8ce8ae4609
5 changed files with 121 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
.vscode

2
README.md Normal file
View File

@ -0,0 +1,2 @@
> for css learning and html javascript

27
index.html Normal file
View File

@ -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>

11
script/index.js Normal file
View File

@ -0,0 +1,11 @@
var hello = "your name";
let pHone = 23.90;
nops = () => {
console.log("nops func");
}
nops();
console.log("hello codeory");

79
styles/style.css Normal file
View File

@ -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);
}