内容摘要
写了很多天前端纯css画的一些东西,已经算是熟练了很多了,因为每次都重新编辑再发布比较麻烦,所以后面每天练习的内容就总汇在这里做一个记录。有另外学习到的新东西再另外提及。
代码
按钮悬停效果(用处还是比较大的吧个人认为)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮悬停效果</title>
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>products</li>
<li>services</li>
<li>contact</li>
</ul>
</nav>
</body>
<style>
body{
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: lightyellow;
}
nav li{
width: 8em;
height: 2em;
font-size: 25px;
text-align: center;
line-height: 2em;
font-family: sans-serif;
text-transform: capitalize;
position: relative;
cursor: pointer;
list-style: none;
}
nav li::before,
nav li::after{
content: "";
position: absolute;
width: 0.6em;
height: 0.6em;
background-color: gainsboro;
border-radius: 50%;
}
nav li::before{
top:calc(50% - 0.6em /2);
left: 0;
}
nav li::after{
bottom: calc(50% - 0.6em / 2);
right: 0;
}
/*鼠标悬停效果*/
nav li:hover::before,
nav li:hover::after{
width: 100%;
height: 100%;
border-radius: 0;
color: white;
background-color: dodgerblue;
}
nav li:hover:before{
z-index: -1;
top: 0;
}
nav li:hover::after{
z-index: -2;
bottom: -0.4em;
right: -0.4em;
filter:brightness(0.8);
}
nav li{
-webkit-transition: 0.5s;
-moz-transition: 0.5s ;
-ms-transition: 0.5s ;
-o-transition: 0.5s ;
transition: 0.5s ;
margin: 0.8em;
}
nav li::before,
nav li::after{
-webkit-transition: 0.5s cubic-bezier(0.5, -0.5, 0.25, 1.5);
-moz-transition: 0.5s cubic-bezier(0.5, -0.5, 0.25, 1.5);
-ms-transition: 0.5s cubic-bezier(0.5, -0.5, 0.25, 1.5);
-o-transition: 0.5s cubic-bezier(0.5, -0.5, 0.25, 1.5);
transition: 0.5s cubic-bezier(0.5, -0.5, 0.25, 1.5);
}
</style>
</html>
小松鼠邮票
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小松鼠邮票</title>
</head>
<body>
<div class="stamp">
<div class="squirrel">
<div class="ear"></div>
<div class="head"></div>
<div class="body"></div>
<div class="tail-start"></div>
<div class="tail-end"></div>
<div class="leg"></div>
<div class="foot"></div>
</div>
<p class="text">
<span class="title">Squirrel</span>
<span class="author">comehope</span>
<span class="face-value">200</span>
</p>
</div>
</body>
<style>
body{
margin:0;
height: 100vh;
display:flex;
align-items: center;
justify-content: center;
background-color: teal;
}
.stamp{
position:relative;
width: 45em;
height: 63em;
font-size: 6px;
padding: 5em;
background-color: white;
display: flex;
flex-direction: column;
align-items:center;
justify-content: center;
}
.stamp::before,.stamp::after{
content: "";
width: 100%;
height: 100%;
position: absolute;
/*设置了两个background,radial-gradient为径向渐变*/
background: radial-gradient(circle,teal 50%,transparent 50%),
radial-gradient(circle,teal 50%,transparent 50%);
-webkit-background-size: 3.5em 3.5em;
background-size: 3.5em 3.5em;
}
.stamp::before{
top: 1.5em;
/*两个background分别显示在相应的边角*/
background-repeat:repeat-y;
background-position: -4% 0 , 104% 0;
}
.stamp::after {
left: 1.5em;
background-repeat: repeat-x;
background-position: 0 -3%, 0 103%;
}
.squirrel{
display: grid;
grid-template-columns: 11.5em 7em 15.5em 10.5em;
grid-template-rows:13em 5em 11.5em 22.5em;
background-color: silver;
padding: 2em;
margin-top: -2em;
}
.head{
grid-column: 1;
grid-row: 3;
background-color: chocolate;
border-bottom-left-radius: 100%;
/*径向渐变画眼镜*/
background-image: radial-gradient(circle at 58% 22%,black 1.4em,transparent 1.4em );
}
.ear{
grid-column: 2;
grid-row: 2;
width: 5em;
background-color: bisque;
border-bottom-right-radius: 100%;
}
.body{
/* start-line/end-line */
grid-column: 2/4;
grid-row: 4;
background-color: chocolate;
border-top-right-radius: 100%;
position: relative;
overflow: hidden;
}
.body::before{
content: "";
position: absolute;
width: 100%;
height: 50%;
/* box-shadow : h-shadow v-shadow blur color*/
box-shadow: 2em -2em 4em rgba(0,0,0,0.3);
bottom: 0;
--w: calc((7em + 15.5em)/2);
border-top-left-radius: var(--w);
border-top-right-radius: var(--w);
}
.foot{
grid-column: 1;
grid-row: 4;
height: 4em;
width: 8em;
background-color: saddlebrown;
justify-self:end;
align-self: end;
border-radius: 4em 4em 0 0;
filter:brightness(0.8);
}
.tail-start{
grid-column: 4;
grid-row: 4;
--h: calc(22.5em - 1.5em);
height: var(--h);
background-color: bisque;
align-self: end;
-webkit-border-radius: 0 var(--h) var(--h) 0;
-moz-border-radius: 0 var(--h) var(--h) 0;
border-radius: 0 var(--h) var(--h) 0;
}
.tail-end{
grid-column: 3;
grid-row: 1;
--h: calc(13em + 5em + 11.5em + 1.5em);
height: var(--h);
background-color: chocolate;
border-radius: var(--h) 0 0 var(--h);
}
.text {
position: relative;
width: calc(100% + 2em * 2);
height: 6em;
font-family: sans-serif;
}
.text .title {
position: absolute;
font-size: 6em;
font-weight: bold;
color: darkslategray;
}
.text .author {
position: absolute;
font-size: 3em;
bottom: -1.2em;
color: dimgray;
}
.text .face-value {
position: absolute;
font-size: 14em;
right: 0;
line-height: 0.9em;
color: darkcyan;
}
</style>
</html>
透视悬停按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>透视悬停按钮</title>
</head>
<body>
<ul>
<li>home</li>
<li>products</li>
<li>services</li>
<li>contact</li>
</ul>
</body>
<style>
body{
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: cornsilk;
}
ul{
padding: 0;
list-style-type:none;
}
ul li{
box-sizing:border-box;
width: 15em;
height: 3em;
font-size: 20px;
border-radius: 0.5em;
margin: 0.5em;
box-shadow: 0 0 1em rgba(0,0,0,0.2);
}
ul li:nth-child(odd){
background: linear-gradient(to right,rgba(0,0,0,0.8) ,transparent );
}
ul li:nth-child(even) {
background: linear-gradient(to left, rgba(0,0,0,0.8), transparent);
}
ul li{
color: white;
font-family: sans-serif;
text-transform: capitalize;
line-height: 3em;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-ms-transition: 0.3s ease;
-o-transition: 0.3s ease;
transition: 0.3s ease;
cursor: pointer;
}
ul li:nth-child(odd){
text-align: left;
padding-left: 10%;
}
ul li:nth-child(even){
text-align: right;
padding-right: 10%;
}
ul li:nth-child(odd){
transform: perspective(500px) rotateY(45deg);
}
ul li:nth-child(even){
transform: perspective(500px) rotateY(-45deg);
}
ul li:nth-child(odd):hover{
transform: perspective(200px) rotateY(45deg);
padding-left: 5%;
}
ul li:nth-child(even):hover{
transform: perspective(200px) rotateY(-45deg);
padding-right: 5%;
}
</style>
</html>
淡入动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入动画</title>
</head>
<body>
<div class="container">
<span>h</span>
<span>a</span>
<span>p</span>
<span>p</span>
<span>y</span>
<span> </span>
<span>h</span>
<span>o</span>
<span>l</span>
<span>i</span>
<span>d</span>
<span>a</span>
<span>y</span>
</div>
</body>
<style>
body{
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(pink,white,pink);
}
.container span{
display: inline-block;
color: purple;
font-weight: bold;
text-transform: uppercase;
font-size: 40px;
animation:sideSlide 4s forwards infinite;
-webkit-transform: translateX(-100vw) scale(0);
-moz-transform: translateX(-100vw) scale(0);
-ms-transform: translateX(-100vw) scale(0);
-o-transform: translateX(-100vw) scale(0);
transform: translateX(-100vw) scale(0);
filter: opacity(0);
animation-delay: calc((var(--n) - 1) * 0.05s);
}
@keyframes sideSlide {
15%,20%{
transform: translateX(0.5em) scale(1);
color: purple;
}
24%{
transform: translateX(0) scale(1.2);
color: cyan;
}
25%,75%{
transform: translateX(0) scale(1);
filter: opacity(1);
color: purple;
}
90%,100%{
transform: translateX(100vw) scale(0);
filter: opacity(0);
}
}
.container span:nth-child(1) { --n: 1; }
.container span:nth-child(2) { --n: 2; }
.container span:nth-child(3) { --n: 3; }
.container span:nth-child(4) { --n: 4; }
.container span:nth-child(5) { --n: 5; }
.container span:nth-child(6) { --n: 6; }
.container span:nth-child(7) { --n: 7; }
.container span:nth-child(8) { --n: 8; }
.container span:nth-child(9) { --n: 9; }
.container span:nth-child(10) { --n: 10; }
.container span:nth-child(11) { --n: 11; }
.container span:nth-child(12) { --n: 12; }
.container span:nth-child(13) { --n: 13; }
.container span:nth-child(14) { --n: 14; }
</style>
</html>```
给女神让路