首次提交
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
commit
86bd398bb8
|
|
@ -0,0 +1,128 @@
|
|||
*{
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
body{
|
||||
/* 设置body高度为100%窗口高度 */
|
||||
height:100vh;
|
||||
/* 弹性盒子模型 */
|
||||
display: flex;
|
||||
/* 限免两个属性是让body里的子类居中 */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #1d1928;
|
||||
}
|
||||
.container{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 350px;
|
||||
height: 450px;
|
||||
border-radius: 20px;
|
||||
background-color: #4471a3;
|
||||
/* 盒子阴影 */
|
||||
box-shadow: 15px 15px 10px rgba(33,45,58,0.3);
|
||||
overflow: hidden;
|
||||
position:relative;
|
||||
}
|
||||
.container form{
|
||||
width: 350px;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
}
|
||||
.container form .tbx{
|
||||
width: 250px;
|
||||
height: 40px;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-bottom: 1px solid #fff;
|
||||
background: none;
|
||||
color:#fff;
|
||||
font-size: 15px;
|
||||
}
|
||||
/* 设置文本框提示文本的样式 */
|
||||
.container form .tbx::placeholder{
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
}
|
||||
.container form .sub{
|
||||
width: 250px;
|
||||
height: 40px;
|
||||
outline: none;
|
||||
border:1px solid #fff;
|
||||
border-radius: 20px;
|
||||
letter-spacing: 5px;
|
||||
color:#fff;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.container h1{
|
||||
color: #ecf0f1;
|
||||
font-size: 50px;
|
||||
letter-spacing: 5px;
|
||||
font-weight: 100;
|
||||
/* 文字阴影 */
|
||||
text-shadow: 5px 5px 5px rgba(33,45,58,0.3);
|
||||
z-index: 1;
|
||||
}
|
||||
/* 设置鼠标进入的样式 */
|
||||
.container .in{
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: #cf455f;
|
||||
transform: translate(-50%,-50%);
|
||||
/* 使用in动画，持续0.5秒，缓出的时间函数，停留在最后一帧 */
|
||||
animation: in 0.5s ease-out forwards;
|
||||
}
|
||||
/* 设置鼠标离开的样式 */
|
||||
.container .out{
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
display: block;
|
||||
width: 1200px;
|
||||
height: 1200px;
|
||||
border-radius: 50%;
|
||||
background: #cf455f;
|
||||
transform: translate(-50%,-50%);
|
||||
/* 使用out动画，持续0.5秒，缓出的时间函数，停留在最后一帧 */
|
||||
animation: out 0.5s ease-out forwards;
|
||||
}
|
||||
/* 动画 */
|
||||
/* 设置鼠标进入时，元素的动画 */
|
||||
@keyframes in{
|
||||
/* 初始关键帧 */
|
||||
0%{
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
/* 结束关键帧 */
|
||||
100%{
|
||||
width: 1200px;
|
||||
height: 1200px;
|
||||
}
|
||||
}
|
||||
/* 设置鼠标离开时，元素的动画 */
|
||||
@keyframes out{
|
||||
/* 初始关键帧 */
|
||||
0%{
|
||||
width: 1200px;
|
||||
height: 1200px;
|
||||
}
|
||||
/* 结束关键帧 */
|
||||
100%{
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
*{
|
||||
/* 初始化 取消页面的内外边距 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
/* 渐变背景 本人比较偏爱渐变背景 */
|
||||
background: linear-gradient(200deg,#dad4ec,#f3e7e9);
|
||||
}
|
||||
ul{
|
||||
/* 绝对定位 水平、垂直居中 */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
/* 弹性布局 */
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul li{
|
||||
list-style: none;
|
||||
/* 这里加个动画过渡 */
|
||||
transition: 0.5s;
|
||||
}
|
||||
ul li a{
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 0 30px;
|
||||
color: #333;
|
||||
font-size: 40px;
|
||||
text-decoration: none;
|
||||
}
|
||||
ul:hover li{
|
||||
/* 不透明度 */
|
||||
opacity: 0.2;
|
||||
/* 模糊度 */
|
||||
filter: blur(2px);
|
||||
}
|
||||
ul li:hover{
|
||||
opacity: 1;
|
||||
filter: blur(0px);
|
||||
}
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
body{
|
||||
margin: 0;
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
/* 弹性布局 水平、垂直居中 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* 背景径向渐变 */
|
||||
background: radial-gradient(circle at center,mediumpurple,#000);
|
||||
}
|
||||
.heart{
|
||||
width: 280px;
|
||||
height: 220px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.heart span{
|
||||
/* 自定义属性值【划重点】 */
|
||||
--c:plum;
|
||||
--h:50%;
|
||||
--t:25%;
|
||||
/* var()函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用 */
|
||||
background-color: var(--c);
|
||||
width: 20px;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
height: var(--h);
|
||||
top: var(--t);
|
||||
/* 执行动画 infinite是无限次播放 */
|
||||
animation: beating 1s infinite;
|
||||
}
|
||||
.heart span:nth-child(1),
|
||||
.heart span:nth-child(9){
|
||||
--c:lightcoral;
|
||||
--h:60px;
|
||||
--t:44px;
|
||||
}
|
||||
.heart span:nth-child(2),
|
||||
.heart span:nth-child(8){
|
||||
--c:lightskyblue;
|
||||
--h:120px;
|
||||
--t:12px;
|
||||
}
|
||||
.heart span:nth-child(3),
|
||||
.heart span:nth-child(7){
|
||||
--c:lightgreen;
|
||||
--h:160px;
|
||||
--t:0;
|
||||
}
|
||||
.heart span:nth-child(4),
|
||||
.heart span:nth-child(6){
|
||||
--c:gold;
|
||||
--h:180px;
|
||||
--t:16px;
|
||||
}
|
||||
.heart span:nth-child(5){
|
||||
--c:plum;
|
||||
--h:188px;
|
||||
--t:32px;
|
||||
}
|
||||
|
||||
/* 接下来我们定义动画 */
|
||||
@keyframes beating{
|
||||
0%,30%{
|
||||
height: var(--h);
|
||||
top: var(--t);
|
||||
background-color: var(--c);
|
||||
filter: blur(0);
|
||||
}
|
||||
60%,70%{
|
||||
height: 50%;
|
||||
top: 25%;
|
||||
background-color: plum;
|
||||
/* 模糊度 */
|
||||
filter: blur(5px);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background: linear-gradient(to top,#537895,#09203f);
|
||||
}
|
||||
.effect{
|
||||
position: relative;
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
/* 设置对比度 */
|
||||
filter: contrast(10);
|
||||
}
|
||||
.bigball,.smallball{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
padding: 10px;
|
||||
border-radius: 50%;
|
||||
/* 设置模糊度，配合上面的contrast来显示圆球的粘性效果 */
|
||||
filter: blur(5px);
|
||||
}
|
||||
.bigball{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: black;
|
||||
}
|
||||
.smallball{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: red;
|
||||
/* 动画：名称 时长 infinite是无限次播放 */
|
||||
animation: ball 3s infinite;
|
||||
}
|
||||
|
||||
/* 我们来定义小球的动画 */
|
||||
@keyframes ball{
|
||||
0%,100%{
|
||||
left: 50px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
4%,54%{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
10%,60%{
|
||||
width: 50px;
|
||||
height: 70px;
|
||||
}
|
||||
20%,70%{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
34%,90%{
|
||||
width: 70px;
|
||||
height: 50px;
|
||||
}
|
||||
41%{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
50%{
|
||||
left: 270px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
*{
|
||||
/* 初始化 取消页面元素的内外边距 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.container{
|
||||
/* 弹性布局 水平、垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 让子元素垂直排列 */
|
||||
flex-direction: column;
|
||||
/* 100%窗口宽度、高度 */
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
/* 背景径向渐变 */
|
||||
background: radial-gradient(circle at center,#555,#000);
|
||||
}
|
||||
.container a{
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
/* 将a元素转为块级元素，不然无法设置宽和高 */
|
||||
display: block;
|
||||
width: 140px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
margin: 40px;
|
||||
color: plum;
|
||||
text-decoration: none;
|
||||
font-size: 20px;
|
||||
/* 这里加个动画过渡 */
|
||||
transition: all 0.3s ease-in-out;
|
||||
/* 我们来改变各个a元素的颜色【划重点】 */
|
||||
/* 大家看到效果了吧，是不是很神奇 */
|
||||
/* hue-rotate是颜色滤镜，可以加不同的度数来改变颜色，这里我们用了calc自动计算函数，以及var函数来调用我们给每一个a元素设置的不同的自定义属性1~5，然后分别乘以60度，就能够分别得到不同的颜色 */
|
||||
filter: hue-rotate(calc(var(--i)*60deg));
|
||||
}
|
||||
.container a::before,
|
||||
.container a::after{
|
||||
/* 将两个伪元素的相同样式写在一起 */
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid plum;
|
||||
/* 这里也加一个动画过渡 */
|
||||
/* 最后的0.3s是延迟时间 */
|
||||
transition: all 0.3s ease-in-out 0.3s;
|
||||
}
|
||||
.container a::before{
|
||||
top: 0;
|
||||
left: 0;
|
||||
/* 删除左边元素的右、下边框 */
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.container a::after{
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/* 删除右边元素的左、上边框 */
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
.container a:hover{
|
||||
background-color: plum;
|
||||
color: #000;
|
||||
/* 添加发光效果和倒影 */
|
||||
box-shadow: 0 0 50px plum;
|
||||
/* below是下倒影 1px是倒影和元素相隔的距离 最后是个渐变颜色 */
|
||||
-webkit-box-reflect: below 1px linear-gradient(transparent,rgba(0,0,0,0.3));
|
||||
/* 这里我们为以上属性设置一下延迟时间 */
|
||||
transition-delay: 0.4s;
|
||||
}
|
||||
.container a:hover::before,
|
||||
.container a:hover::after{
|
||||
width: 138px;
|
||||
height: 58px;
|
||||
/* 这里不需要延迟 */
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
*{
|
||||
/* 初始化 取消页面元素内外边距 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body{
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
/* 弹性布局 水平、垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 渐变背景 */
|
||||
background: linear-gradient(200deg,#eef1f5,#e6e9f0);
|
||||
}
|
||||
.nav{
|
||||
display: flex;
|
||||
background-color: #b7a1eb;
|
||||
height: 100px;
|
||||
/* 圆角 */
|
||||
border-radius: 20px;
|
||||
/* 溢出隐藏 */
|
||||
overflow: hidden;
|
||||
/* 阴影 */
|
||||
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
|
||||
}
|
||||
.nav .menu{
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.nav .menu .item{
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 0 10px;
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
/* 加个动画过渡 */
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
.nav .menu .item:hover{
|
||||
background-color: #a38bdb;
|
||||
}
|
||||
.nav .menu .item .link{
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
/* 加个动画过渡 */
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
.nav .menu .item .link .fa{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
/* 加个动画过渡 */
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
.nav .menu .item .link span{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: -50%;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
/* 加个动画过渡 */
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
.nav .menu .item:hover .link span{
|
||||
/* 鼠标移入文本出现、上移 */
|
||||
opacity: 1;
|
||||
bottom: 18px;
|
||||
}
|
||||
.nav .menu .item:hover .link .fa{
|
||||
/* 鼠标移入图标上移 */
|
||||
transform: translateY(-95%);
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
*{
|
||||
/* 初始化 取消页面元素内外边距 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
background-color: #222;
|
||||
/* 弹性布局 水平、垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
}
|
||||
h1{
|
||||
color: #333;
|
||||
/* 转大写 */
|
||||
text-transform: uppercase;
|
||||
font-size: 112px;
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
}
|
||||
h1::after{
|
||||
content: "helloworld";
|
||||
/* 颜色为透明 */
|
||||
color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(to right,#ff69b3,#fe0000,#ffa401,#ffff01,#008102,#40e1d2,#410098,#9400d4);
|
||||
/* 以文字的范围来裁剪背景图片 */
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
/* 将元素裁剪为一个圆形（100px表示圆的直径，0% 50%表示圆心的位置） */
|
||||
clip-path: circle(100px at 0% 50%);
|
||||
/* 执行动画（动画 时长 infinite表示无限次播放） */
|
||||
animation: light 5s infinite;
|
||||
}
|
||||
|
||||
/* 定义动画 改变圆心的位置 */
|
||||
@keyframes light{
|
||||
0%{
|
||||
clip-path: circle(100px at 0% 50%);
|
||||
}
|
||||
50%{
|
||||
clip-path: circle(100px at 100% 50%);
|
||||
}
|
||||
100%{
|
||||
clip-path: circle(100px at 0% 50%);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
*{
|
||||
/* 初始化 取消页面内外边距 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
/* 渐变背景 */
|
||||
background: linear-gradient(to bottom,#2b5876,#09203f);
|
||||
/* 弹性布局 水平、垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.loading{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
border-top: 10px solid #63a69f;
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
/* 执行动画（动画a1 时长 线性的 无限次播放） */
|
||||
animation: a1 2s linear infinite;
|
||||
}
|
||||
.loading::before,.loading::after{
|
||||
content: "";
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
/* 绝对定位 */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -10px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.loading::before{
|
||||
border-top: 10px solid #f2e1ac;
|
||||
/* 旋转120度 */
|
||||
transform: rotate(120deg);
|
||||
}
|
||||
.loading::after{
|
||||
border-top: 10px solid #f2836b;
|
||||
/* 旋转240度 */
|
||||
transform: rotate(240deg);
|
||||
}
|
||||
.loading span{
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
line-height: 200px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
/* 执行动画（动画a2 时长 线性的 无限次播放） */
|
||||
animation: a2 2s linear infinite;
|
||||
}
|
||||
|
||||
/* 定义动画 */
|
||||
@keyframes a1{
|
||||
to{
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes a2{
|
||||
to{
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: linear-gradient(200deg,#f4efef,#e3eeff);
|
||||
}
|
||||
.loading{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: grid;
|
||||
/* 制作3列的网格容器 */
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
/* 设置行与列之间的间隙 */
|
||||
grid-gap: 10px;
|
||||
/* 对子部分进行编号 */
|
||||
/* counter-reset: number; */
|
||||
/* 旋转45度 */
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.loading span{
|
||||
/* 自定义属性 */
|
||||
--c:red;
|
||||
/* 调用var函数使用自定义属性--c */
|
||||
background-color: var(--c);
|
||||
position: relative;
|
||||
transform: rotate(0);
|
||||
/* 执行动画：动画 时长 线性的 无限次播放 */
|
||||
animation: blinking 2s linear infinite;
|
||||
/* 动画延迟 */
|
||||
animation-delay: var(--d);
|
||||
}
|
||||
.loading span::before{
|
||||
/* 设置增量 */
|
||||
/* counter-increment: number; */
|
||||
/* 将编号赋值到content，这里有助于我们根据编号设置样式 */
|
||||
/* content: counter(number); */
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.loading span:nth-child(7){
|
||||
--c:#f15a5a;
|
||||
--d:0s;
|
||||
}
|
||||
.loading span:nth-child(4),
|
||||
.loading span:nth-child(8){
|
||||
--c:#f0c419;
|
||||
--d:0.2s;
|
||||
}
|
||||
.loading span:nth-child(1),
|
||||
.loading span:nth-child(5),
|
||||
.loading span:nth-child(9){
|
||||
--c:#4eba6f;
|
||||
--d:0.4s;
|
||||
}
|
||||
.loading span:nth-child(2),
|
||||
.loading span:nth-child(6){
|
||||
--c:#2d95bf;
|
||||
--d:0.6s;
|
||||
}
|
||||
.loading span:nth-child(3){
|
||||
--c:#955ba5;
|
||||
--d:0.8s;
|
||||
/* 到这里基本完成了，我们来吧编号去掉吧 */
|
||||
}
|
||||
|
||||
/* 定义动画 缩放 */
|
||||
@keyframes blinking{
|
||||
0%,100%{
|
||||
transform: scale(0);
|
||||
}
|
||||
40%,80%{
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
body{
|
||||
/* 取消页面内外边距 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
/* 弹性布局 水平、垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 渐变背景 */
|
||||
background: linear-gradient(200deg,#517fa4,#243949);
|
||||
}
|
||||
.btn-box a{
|
||||
font-size: 40px;
|
||||
color: #88bef5;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
margin: 0 16px;
|
||||
display: inline-block;
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
/* 动画过渡：时长 线性的 */
|
||||
transition: 0.5s linear;
|
||||
}
|
||||
.btn-box a::before,.btn-box a::after{
|
||||
content: "";
|
||||
/* 绝对定位 */
|
||||
position: absolute;
|
||||
/* 这个是告诉浏览器：你想要设置的边框和内边距的值是包含在总宽高内的 */
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
/* 加个动画过渡 */
|
||||
transition: 0.5s linear;
|
||||
}
|
||||
.btn-box a:hover{
|
||||
/* 缩小为原来的0.8倍 */
|
||||
transform: scale(0.8);
|
||||
}
|
||||
.btn-box a:hover::before{
|
||||
border-left: 4px solid;
|
||||
border-right: 4px solid;
|
||||
/* 沿X轴倾斜20度 */
|
||||
transform: skewX(20deg);
|
||||
}
|
||||
.btn-box a:hover::after{
|
||||
border-top: 4px solid;
|
||||
border-bottom: 4px solid;
|
||||
/* 沿Y轴倾斜-20度 */
|
||||
transform: skewY(-20deg);
|
||||
}
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
body{
|
||||
/* 取消页面内外边距 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
/* 弹性布局 水平、垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 渐变背景 */
|
||||
background: linear-gradient(200deg,#b5aee4,#505285);
|
||||
}
|
||||
.loading{
|
||||
width: 86px;
|
||||
height: 196px;
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
/* 弹性布局 */
|
||||
display: flex;
|
||||
/* 将元素垂直显示 */
|
||||
flex-direction: column;
|
||||
/* 将元素靠边对齐 */
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
animation: rotating 2s linear infinite;
|
||||
}
|
||||
/* 沙漏上下两个容器 */
|
||||
.top,.bottom{
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-style: solid;
|
||||
border-color: #dcdcdc;
|
||||
border-width: 4px 4px 12px 12px;
|
||||
border-radius: 50% 100% 50% 30%;
|
||||
position: relative;
|
||||
/* 这里把溢出的部分隐藏 */
|
||||
overflow: hidden;
|
||||
}
|
||||
.top{
|
||||
/* 旋转-45度 */
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.bottom{
|
||||
/* 旋转135度 */
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
/* 容器里的沙 */
|
||||
.top::before,
|
||||
.bottom::before{
|
||||
content: "";
|
||||
/* 绝对定位 */
|
||||
position: absolute;
|
||||
/* inherit表示继承父元素（这里指宽高） */
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
background-color: #cabbe9;
|
||||
/* 执行动画，先设置动画的参数，暂时不指定动画名称，我们在下面再来指定 */
|
||||
animation: 2s linear infinite;
|
||||
}
|
||||
.top::before{
|
||||
/* 通过设置圆角来改变沙的形状 */
|
||||
border-radius: 0 100% 0 0;
|
||||
/* 执行指定的动画 */
|
||||
animation-name: drop-sand;
|
||||
}
|
||||
.bottom::before{
|
||||
/* 通过设置圆角来改变沙的形状 */
|
||||
border-radius: 0 0 0 25%;
|
||||
/* 这里我们将下面的沙移出可视范围 */
|
||||
transform: translate(50px,-50px);
|
||||
/* 执行指定的动画 */
|
||||
animation-name: fill-sand;
|
||||
}
|
||||
/* 到这里我们还少了个沙子流下来的效果 */
|
||||
/* 添加流下的元素 */
|
||||
.loading::after{
|
||||
content: "";
|
||||
width: 5px;
|
||||
height: 96px;
|
||||
background-color: #cabbe9;
|
||||
/* 绝对定位 */
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
/* 执行动画：动画 时长 线性的 无限次播放 */
|
||||
animation: flow 2s linear infinite;
|
||||
}
|
||||
|
||||
/* 接下来我们来定义动画 */
|
||||
/* 落沙动画 */
|
||||
@keyframes drop-sand{
|
||||
to{
|
||||
transform: translate(-50px,50px);
|
||||
}
|
||||
}
|
||||
/* 填沙动画 */
|
||||
@keyframes fill-sand{
|
||||
to{
|
||||
transform: translate(0,0);
|
||||
}
|
||||
}
|
||||
/* 沙流下动画 */
|
||||
@keyframes flow{
|
||||
10%,100%{
|
||||
transform: translateY(64px);
|
||||
}
|
||||
}
|
||||
/* 最后再来一个沙漏旋转的动画 */
|
||||
@keyframes rotating{
|
||||
0%,90%{
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100%{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
*{
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
body{
|
||||
/* 弹性布局，让页面元素水平+垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 设置body高度为100%窗口高度 */
|
||||
height:100vh;
|
||||
/* 背景渐变色 */
|
||||
background-image: linear-gradient(200deg,#5ee7df,#b490ca);
|
||||
/* 大家看到不同了吗？不过看起来有些许夸张 */
|
||||
/* 现在就正常多啦 */
|
||||
/* 没加这个属性之前，我们的动画看起来有点生硬，没有任何立体感，所以我们需要添加这个属性来增加卡片旋转时的立体感，这个值越小，立体感就会越明显，立体感最明显的地方就是近大远小，这个的意思就是设置视距，相当于你的眼睛离一个东西的距离，当这个东西离你的眼睛越近，那么这个东西就会越大 */
|
||||
/* 这个大家以后做一些3D效果时会经常用到的，划重点哦 */
|
||||
/* 今天的小实例就做完啦，大家可以跟着做一下，加深一下印象，再见！各位 */
|
||||
perspective: 1000px;
|
||||
}
|
||||
.card{
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 450px;
|
||||
/* 圆角 */
|
||||
border-radius: 30px;
|
||||
/* 鼠标移到元素上光标变为小手 */
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
/* 盒子阴影 */
|
||||
box-shadow: 1px 1px 20px rgba(0,0,0,0.1);
|
||||
/* 给父元素添加一个3D盒子属性，那么子元素就到背面了，这个属性是加到父元素上的，但是影响的是子元素 */
|
||||
transform-style: preserve-3d;
|
||||
/* 给卡片添加默认动画 */
|
||||
animation: rotate-reverse 1.2s cubic-bezier(0.66,-0.47,0.33,1.5) forwards;
|
||||
}
|
||||
/* 设置鼠标移入卡片时执行动画 */
|
||||
.card:hover{
|
||||
/* 动画（名称 时长 第三个属性是贝塞尔曲线，我们可以自定义动画的运动轨迹，让动画的运动轨迹有了很多种可能 第四个属性是当我们的动画完成时的状态，一般动画完成之后就回到了0%的状态，默认值是backwards，当我们给的属性值是forwards时，那么动画到100%的时候就会停下来，不会回到0%） */
|
||||
/* 哈哈，这里又啰嗦了，大家见谅哈 */
|
||||
animation: rotate 1.2s cubic-bezier(0.66,-0.47,0.33,1.5) forwards;
|
||||
/* 大家有没有发现咱们的动画看起来有点生硬，不是很自然 */
|
||||
/* 这里再给大家介绍一个属性，划重点了哦！！ */
|
||||
}
|
||||
.front,.back{
|
||||
/* 绝对定位 子元素是绝对定位，父元素需要相对定位 */
|
||||
position:absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
/* 弹性布局，让元素垂直陈列 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* 现在子元素垂直陈列，那么就是让子元素水平居中 */
|
||||
align-items: center;
|
||||
/* 平均分配高度给每一个子元素 */
|
||||
justify-content: space-around;
|
||||
font-size: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.back{
|
||||
/* 因为背面卡片要到后面去，所以我们给背面卡片加一个沿Y轴旋转180度的属性，这里我们可以看到旋转了，但是没到后面去，原因就是父盒子现在不是3D盒子，而是一个2D盒子，所以我们需要让父元素变成一个3D盒子（哈哈，有点啰嗦了） */
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
/* 接下来我们定义一下旋转动画 */
|
||||
@keyframes rotate{
|
||||
0%{
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
100%{
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotate-reverse{
|
||||
0%{
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
100%{
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
*{
|
||||
/* 初始化 取消页面内外边距 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
background-color: #000;
|
||||
/* 弹性布局 水平、垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
section{
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
section .item{
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
section .item .a{
|
||||
color: #fff;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
font-size: 10vw;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
transition: top 0.5s,opacity 0.5s;
|
||||
}
|
||||
/* 切割文字 */
|
||||
section .item .a:nth-child(1){
|
||||
position: absolute;
|
||||
clip-path: polygon(0% 0%,100% 0%,100% 51%,0% 51%);
|
||||
}
|
||||
section .item .a:nth-child(2){
|
||||
position: relative;
|
||||
clip-path: polygon(0% 50%,100% 50%,100% 100%,0% 100%);
|
||||
}
|
||||
/* 触发景深效果 */
|
||||
section:hover .item{
|
||||
filter: blur(10px);
|
||||
transform: scale(0.8);
|
||||
transition: filter 0.5s,transform 0.5s;
|
||||
}
|
||||
/* 对应的取消景深效果 */
|
||||
section .item:hover{
|
||||
filter: blur(0px);
|
||||
transform: scale(1);
|
||||
transition: filter 0.5s,transform 0.5s;
|
||||
}
|
||||
/* 上半部分上移并变淡 */
|
||||
section .item:hover .a:nth-child(1){
|
||||
top: -40px;
|
||||
opacity: 0.5;
|
||||
transition: top 0.5s,opacity 0.5s;
|
||||
}
|
||||
/* 下半部分下移并变淡 */
|
||||
section .item:hover .a:nth-child(2){
|
||||
top: 40px;
|
||||
opacity: 0.5;
|
||||
transition: top 0.5s,opacity 0.5s;
|
||||
}
|
||||
/* 裂开后显示的文字 */
|
||||
section .item a{
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
section .item a:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
section .item:hover a{
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
*{
|
||||
/* 初始化 取消页面内外边距 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* 这个是告诉浏览器：你想要设置的边框喝内边距的值是包含在总宽高内的 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body{
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
/* 弹性布局 水平、垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #eef1f5;
|
||||
}
|
||||
.loading{
|
||||
display: flex;
|
||||
/* 水平显示 */
|
||||
flex-direction: row;
|
||||
}
|
||||
.loading div{
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 200px;
|
||||
/* 渐变背景 */
|
||||
background: linear-gradient(to bottom,rgba(0,0,0,0.05),#eef1f5);
|
||||
margin: 20px;
|
||||
border-radius: 20px;
|
||||
border: 2px solid #eef1f5;
|
||||
/* 阴影 */
|
||||
box-shadow: 15px 15px 20px rgba(0,0,0,0.1),
|
||||
-15px -15px 20px #fff,
|
||||
inset -5px -5px 5px rgba(255,255,255,0.5),
|
||||
inset 5px 5px 5px rgba(0,0,0,0.05);
|
||||
/* 溢出隐藏 */
|
||||
overflow: hidden;
|
||||
}
|
||||
.loading div::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
box-shadow: inset -5px -5px 5px rgba(0,0,0,0.1),
|
||||
0 420px 0 400px lightskyblue;
|
||||
/* 执行动画：动画名称 时长 加速后减速 无限次播放 */
|
||||
animation: animate 2s ease-in-out infinite;
|
||||
/* 动画延迟 通过var函数获取自定义属性--x，再由calc函数计算得出每个元素的动画延迟时间 */
|
||||
animation-delay: calc(var(--x) * -0.3s);
|
||||
/* 初始化时先向上移动160px */
|
||||
transform: translateY(160px);
|
||||
}
|
||||
|
||||
/* 定义动画 */
|
||||
@keyframes animate{
|
||||
0%{
|
||||
transform: translateY(160px);
|
||||
/* hue-rotate是颜色滤镜，可以设置不同的度数来改变颜色 */
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
50%{
|
||||
transform: translateY(0px);
|
||||
filter: hue-rotate(180deg);
|
||||
}
|
||||
100%{
|
||||
transform: translateY(160px);
|
||||
filter: hue-rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
*{
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
body{
|
||||
height: 100vh;
|
||||
/* 背景渐变 */
|
||||
background: linear-gradient(200deg,#ddd6f3,#faaca8);
|
||||
}
|
||||
/* 三个元素都需要弹性布局，所以写在一块 */
|
||||
body,.navbar,.navbar ul{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.navbar{
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.navbar input{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
/* 这里我们把复选框不透明度设置为0，直接变透明 */
|
||||
opacity: 0;
|
||||
/* 鼠标变小手 */
|
||||
cursor: pointer;
|
||||
}
|
||||
.navbar span{
|
||||
position: absolute;
|
||||
left:25px;
|
||||
width: 30px;
|
||||
height: 4px;
|
||||
/* 现在将两条线放到一起，然后单独设置第二条线的位置，calc方法可以自动计算数值 */
|
||||
top: calc(50% - 10px);
|
||||
border-radius: 15px;
|
||||
background-color: #999;
|
||||
/* 现在span覆盖着复选框，鼠标放到span上是点不中复选框的，下面这个属性就可以解决这个问题，即便鼠标放到span上点击也能选中或取消选中复选框 */
|
||||
pointer-events: none;
|
||||
/* 收回来的时候过渡刚好是相反的 */
|
||||
transition: transform 0.3s ease-in-out,top 0.3s ease-in-out 0.3s;
|
||||
/* 现在过渡效果有点快，有点生硬 */
|
||||
}
|
||||
/* 因为第二条线在navbar这个元素内的第三个位置，所以这里写3 */
|
||||
.navbar span:nth-child(3){
|
||||
top: calc(50% + 6px);
|
||||
}
|
||||
.navbar ul{
|
||||
width: 0;
|
||||
/* 溢出隐藏 */
|
||||
overflow: hidden;
|
||||
/* 在这里加个过渡，可以让展开和收起自然一些 */
|
||||
transition: all 0.5s;
|
||||
/* 大家应该也发现了，现在导航栏收起的时候，这个圆是扁的 */
|
||||
/* 这个问题是因为文字被换行显示了，两个汉字竖着排列了，所以盒子被撑大了，下面这个属性就可以解决这个问题，让文字不换行显示 */
|
||||
white-space: nowrap;
|
||||
}
|
||||
.navbar ul li{
|
||||
list-style: none;
|
||||
margin: 0px 15px;
|
||||
}
|
||||
.navbar ul li a{
|
||||
text-decoration: none;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color:#333;
|
||||
}
|
||||
.navbar ul li a:hover{
|
||||
color:#fb7299;
|
||||
}
|
||||
/* :checked是当复选框被选中的时候，~这个是兄弟选择器，查找同一级的ul */
|
||||
.navbar input:checked ~ ul{
|
||||
width: 350px;
|
||||
}
|
||||
.navbar input:checked ~ span:nth-child(2){
|
||||
top: calc(50% - 2px);
|
||||
transform: rotate(-45deg);
|
||||
background-color: #fb7299;
|
||||
/* 这里先执行top，然后0.3秒后执行transform */
|
||||
transition: top 0.3s ease-in-out,transform 0.3s ease-in-out 0.3s;
|
||||
}
|
||||
.navbar input:checked ~ span:nth-child(3){
|
||||
top: calc(50% - 2px);
|
||||
transform: rotate(45deg);
|
||||
background-color: #fb7299;
|
||||
transition: top 0.3s ease-in-out,transform 0.3s ease-in-out 0.3s;
|
||||
}
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
/* 这个属性是告诉浏览器：你想要设置的边框和内边距的值是包含在总宽高内的 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body{
|
||||
/* 弹性布局 水平垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 设置body最小高度为100%窗口高度 */
|
||||
min-height: 100vh;
|
||||
/* 渐变背景 */
|
||||
background: linear-gradient(200deg,#0c3483,#a2b6df);
|
||||
}
|
||||
.wrapper{
|
||||
width: 450px;
|
||||
background-color: #fff;
|
||||
/* 内边距（上下左右） */
|
||||
padding: 40px;
|
||||
/* 盒子阴影 */
|
||||
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
|
||||
/* 圆角 */
|
||||
border-radius: 8px;
|
||||
}
|
||||
.wrapper .input-data{
|
||||
/* 相对定位 */
|
||||
position:relative;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
.wrapper .input-data input{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border:none;
|
||||
font-size: 17px;
|
||||
border-bottom: 2px solid #c0c0c0;
|
||||
}
|
||||
/* 输入框获得焦点时 */
|
||||
.wrapper .input-data input:focus ~ label,
|
||||
/* 输入框的值为合法时 */
|
||||
.wrapper .input-data input:valid ~ label{
|
||||
/* label上移，同时改变字号、字体颜色 */
|
||||
transform: translateY(-25px);
|
||||
font-size: 15px;
|
||||
color: #2c6fdb;
|
||||
}
|
||||
.wrapper .input-data label{
|
||||
/* 绝对定位 */
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 0px;
|
||||
color: #808080;
|
||||
/* 这个属性可以使点击label穿透到输入框 */
|
||||
pointer-events: none;
|
||||
/* 现在动画有点生硬，在这里需要给动画加个过渡 */
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.wrapper .input-data .underline{
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background-color: #2c6fdb;
|
||||
/* 沿X轴缩小 */
|
||||
transform: scaleX(0);
|
||||
/* 这里同样给动画加个过渡 */
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.wrapper .input-data input:focus ~ .underline,
|
||||
.wrapper .input-data input:valid ~ .underline{
|
||||
/* 沿X轴放大 */
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
*{
|
||||
margin:0;
|
||||
padding:0;
|
||||
/* 这个是告诉浏览器：你想要设置的边框和内边距的值是包含在总宽高内的 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.container{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
/* 弹性布局 水平垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 渐变背景 自上而下 */
|
||||
background: linear-gradient(to bottom, #2193b0, #6dd5ed);
|
||||
}
|
||||
.container::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom:0px;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
z-index: 1;
|
||||
border-top: 1px solid rgba(255,255,255,0.5);
|
||||
/* 背景模糊 */
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
.container .color{
|
||||
position: absolute;
|
||||
/* 模糊滤镜 数值越大越模糊 */
|
||||
filter: blur(200px);
|
||||
}
|
||||
.container .color:nth-child(1){
|
||||
background: #fd746c;
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
top:-450px;
|
||||
}
|
||||
.container .color:nth-child(2){
|
||||
background: #cf8bf3;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
bottom: -150px;
|
||||
left: 100px;
|
||||
}
|
||||
.container .color:nth-child(3){
|
||||
background: #fdb99b;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
bottom: 50px;
|
||||
right: 100px;
|
||||
}
|
||||
ul{
|
||||
position: relative;
|
||||
display: flex;
|
||||
z-index: 2;
|
||||
}
|
||||
ul li{
|
||||
position: relative;
|
||||
list-style: none;
|
||||
margin: 10px;
|
||||
}
|
||||
ul li a{
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: inline-block;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
border:1px solid rgba(255,255,255,0.4);
|
||||
border-right: 1px solid rgba(255,255,255,0.2);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.2);
|
||||
/* 盒子阴影 */
|
||||
box-shadow: 0px 5px 45px rgba(0,0,0,0.1);
|
||||
/* 背景模糊 */
|
||||
backdrop-filter: blur(2px);
|
||||
/* 加个动画过渡，动画才不会太过生硬 */
|
||||
transition: all 0.5s;
|
||||
overflow: hidden;
|
||||
}
|
||||
ul li a:hover{
|
||||
/* 鼠标移入元素沿Y轴上移 */
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
/* 加个扫光动画 */
|
||||
ul li a::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
/* 元素沿X轴45横切，沿X轴右移150px */
|
||||
transform: skewX(45deg) translateX(150px);
|
||||
/* 动画过渡 */
|
||||
transition: all 0.5s;
|
||||
}
|
||||
ul li a:hover::before{
|
||||
/* 元素沿X轴45横切，沿X轴左移150px */
|
||||
transform: skewX(45deg) translateX(-150px);
|
||||
}
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body{
|
||||
/* 设置body高度为100%窗口高度 */
|
||||
height: 100vh;
|
||||
/* 弹性盒子布局 水平垂直居中 文字居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background: linear-gradient(200deg,#a8edea,#fed6e3);
|
||||
}
|
||||
.wrapper{
|
||||
/* 设置宽度为60%窗口宽度 */
|
||||
width: 60vw;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
background-color: #fff;
|
||||
/* 盒子阴影 */
|
||||
box-shadow: 0px 5px 15px rgba(0,0,0,0.25);
|
||||
border-radius: 50px;
|
||||
}
|
||||
.wrapper nav{
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
.wrapper nav label{
|
||||
flex:1;
|
||||
width:100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.wrapper nav label a{
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
color: #333;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
}
|
||||
.wrapper nav label a i{
|
||||
font-size: 25px;
|
||||
margin: 0px 7px;
|
||||
}
|
||||
.wrapper nav input{
|
||||
display: none;
|
||||
}
|
||||
.wrapper nav .tab{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 20%;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
/* 渐变背景 自左向右 */
|
||||
background: linear-gradient(to right, #f09819, #ff5858);
|
||||
border-radius: 50px;
|
||||
/* 添加动画过渡 贝塞尔曲线 */
|
||||
transition: 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
|
||||
}
|
||||
.wrapper nav #home:checked ~ label.home a,
|
||||
.wrapper nav #comment:checked ~ label.comment a,
|
||||
.wrapper nav #envelope:checked ~ label.envelope a,
|
||||
.wrapper nav #heart:checked ~ label.heart a,
|
||||
.wrapper nav #user:checked ~ label.user a{
|
||||
color: #fff;
|
||||
/* 这里字体颜色改变也需要加个动画过渡 */
|
||||
transition: 0.6s;
|
||||
}
|
||||
.wrapper nav #comment:checked ~ .tab{
|
||||
left: 20%;
|
||||
}
|
||||
.wrapper nav #envelope:checked ~ .tab{
|
||||
left: 40%;
|
||||
}
|
||||
.wrapper nav #heart:checked ~ .tab{
|
||||
left: 60%;
|
||||
}
|
||||
.wrapper nav #user:checked ~ .tab{
|
||||
left: 80%;
|
||||
}
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
background: linear-gradient(to right, #ed6ea0, #ec8c69);
|
||||
height: 100vh;
|
||||
}
|
||||
.menu-toggler{
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.menu-toggler:hover + label,
|
||||
.menu-toggler:hover + label::before,
|
||||
.menu-toggler:hover + label::after{
|
||||
background: #fff;
|
||||
}
|
||||
.menu-toggler:checked + label{
|
||||
background: transparent;
|
||||
}
|
||||
.menu-toggler:checked + label::before,
|
||||
.menu-toggler:checked + label::after{
|
||||
top: 0;
|
||||
width: 40px;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
.menu-toggler:checked + label::before{
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.menu-toggler:checked + label::after{
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.menu-toggler:checked ~ ul .menu-item{
|
||||
opacity: 1;
|
||||
}
|
||||
.menu-toggler:checked ~ ul .menu-item:nth-child(1){
|
||||
transform: rotate(0deg) translateX(-110px);
|
||||
}
|
||||
.menu-toggler:checked ~ ul .menu-item:nth-child(2){
|
||||
transform: rotate(60deg) translateX(-110px);
|
||||
}
|
||||
.menu-toggler:checked ~ ul .menu-item:nth-child(3){
|
||||
transform: rotate(120deg) translateX(-110px);
|
||||
}
|
||||
.menu-toggler:checked ~ ul .menu-item:nth-child(4){
|
||||
transform: rotate(180deg) translateX(-110px);
|
||||
}
|
||||
.menu-toggler:checked ~ ul .menu-item:nth-child(5){
|
||||
transform: rotate(240deg) translateX(-110px);
|
||||
}
|
||||
.menu-toggler:checked ~ ul .menu-item:nth-child(6){
|
||||
transform: rotate(300deg) translateX(-110px);
|
||||
}
|
||||
.menu-toggler:checked ~ ul .menu-item a{
|
||||
pointer-events: auto;
|
||||
}
|
||||
.menu-toggler + label{
|
||||
width: 40px;
|
||||
height: 5px;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
border-radius: 2.5px;
|
||||
background: rgba(255,255,255,0.7);
|
||||
transition: transform 0.5s, top 0.5s;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
.menu-toggler + label::before,
|
||||
.menu-toggler + label::after{
|
||||
width: 40px;
|
||||
height: 5px;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
border-radius: 2.5px;
|
||||
background: rgba(255,255,255,0.7);
|
||||
transition: transform 0.5s, top 0.5s;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
.menu-toggler + label::before{
|
||||
top: 10px;
|
||||
}
|
||||
.menu-toggler + label::after{
|
||||
top: -10px;
|
||||
}
|
||||
.menu-item:nth-child(1) a{
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
.menu-item:nth-child(2) a{
|
||||
transform: rotate(-60deg);
|
||||
}
|
||||
.menu-item:nth-child(3) a{
|
||||
transform: rotate(-120deg);
|
||||
}
|
||||
.menu-item:nth-child(4) a{
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
.menu-item:nth-child(5) a{
|
||||
transform: rotate(-240deg);
|
||||
}
|
||||
.menu-item:nth-child(6) a{
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
.menu-item{
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
opacity: 0;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.menu-item a{
|
||||
display: block;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
line-height: 80px;
|
||||
color: rgba(255,255,255,0.7);
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 40px;
|
||||
pointer-events: none;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.menu-item a:hover{
|
||||
box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
|
||||
color: #fff;
|
||||
background: rgba(255,255,255,0.3);
|
||||
font-size: 45px;
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
*{
|
||||
/* 初始化 取消页面的内外边距 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
/* 弹性布局 让页面元素水平、垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 设置body高度为100%窗口高度 */
|
||||
height: 100vh;
|
||||
background: #000;
|
||||
}
|
||||
a{
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
/* 渐变背景 */
|
||||
background: linear-gradient(to right,#03a9f4,#f441a5,#ffeb3b,#09a8f4);
|
||||
/* 背景渐变色大小 */
|
||||
background-size: 400%;
|
||||
/* 圆角 */
|
||||
border-radius: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
/* 发光效果 */
|
||||
a::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
bottom: -5px;
|
||||
right: -5px;
|
||||
/* 渐变背景 */
|
||||
background: linear-gradient(to right,#03a9f4,#f441a5,#ffeb3b,#09a8f4);
|
||||
/* 背景渐变色大小 */
|
||||
background-size: 400%;
|
||||
/* 圆角 */
|
||||
border-radius: 50px;
|
||||
/* 位于按钮之下 */
|
||||
z-index: -1;
|
||||
/* 设置模糊度 显示发光效果 */
|
||||
filter: blur(20px);
|
||||
}
|
||||
/* 鼠标移入执行动画 */
|
||||
a:hover{
|
||||
/* 动画：名称 时间 infinite是无限次播放 */
|
||||
animation: streamer 8s infinite;
|
||||
}
|
||||
a:hover::before{
|
||||
animation: streamer 8s infinite;
|
||||
}
|
||||
/* 接下来定义动画 */
|
||||
@keyframes streamer{
|
||||
100%{
|
||||
/* 背景位置 */
|
||||
background-position: -400% 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
*{
|
||||
/* 初始化 取消页面的内外边距 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* 这个是告诉浏览器：你想要设置的边框和内边距的值是包含在总宽高内的 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.con{
|
||||
/* 弹性布局 水平、垂直居中 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 100%的窗口高度 */
|
||||
height: 100vh;
|
||||
/* 行高 */
|
||||
line-height: 80px;
|
||||
font-size: 30px;
|
||||
/* 字间距 */
|
||||
letter-spacing: 15px;
|
||||
}
|
||||
.wrapper{
|
||||
/* 固定定位 窗口滚动也不会移动 */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* 渐变背景 */
|
||||
background: linear-gradient(200deg,#ec77ab,#7873f5);
|
||||
/* 将元素剪切为一个圆形【25px表示圆的直径】【calc(100% - 45px) 45px表示圆心】 */
|
||||
clip-path: circle(25px at calc(100% - 45px) 45px);
|
||||
/* 过渡动画 */
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.menu-btn{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
z-index: 2;
|
||||
/* 渐变背景 */
|
||||
background: linear-gradient(200deg,#ec77ab,#7873f5);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
/* 这里也加个过渡动画 */
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
/* 把复选框隐藏 */
|
||||
#menu_btn{
|
||||
display: none;
|
||||
}
|
||||
#menu_btn:checked ~ .wrapper{
|
||||
/* 将元素剪切为一个圆形 75%表示圆的直径 */
|
||||
clip-path: circle(75%);
|
||||
}
|
||||
#menu_btn:checked ~ .menu-btn{
|
||||
color: #d576ba;
|
||||
background: #fff;
|
||||
}
|
||||
/* 当复选框为选中态时，改变图标 */
|
||||
#menu_btn:checked ~ .menu-btn i::before{
|
||||
content: "\f00d";
|
||||
}
|
||||
.wrapper ul{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
.wrapper ul li{
|
||||
margin: 30px 0px;
|
||||
}
|
||||
.wrapper ul li a{
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
padding: 5px 50px;
|
||||
position: relative;
|
||||
line-height: 50px;
|
||||
}
|
||||
.wrapper ul li a::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: #fff;
|
||||
z-index: -1;
|
||||
border-radius: 50px;
|
||||
left: 0px;
|
||||
transform: scaleY(0);
|
||||
/* 加个动画过渡 */
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.wrapper ul li a:hover::after{
|
||||
transform: scaleY(1);
|
||||
}
|
||||
.wrapper ul li a:hover{
|
||||
color: #d576ba;
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>用户登录</title>
|
||||
<link rel="stylesheet" href="../css/1.css">
|
||||
<script src="../js/jquery-3.6.0.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>douyin</h1>
|
||||
<form action="">
|
||||
<input type="text" class="tbx" placeholder="账号">
|
||||
<input type="password" class="tbx" placeholder="密码">
|
||||
<input type="submit" class="sub" value="登录">
|
||||
</form>
|
||||
</div>
|
||||
<script>
|
||||
// 定义一个con绑定.container
|
||||
const con=document.querySelector('.container');
|
||||
|
||||
// 定义两个函数开关（门）
|
||||
let isIn=true; // 鼠标进去的门，默认打开
|
||||
let isOut=false; // 鼠标出去的门，默认关闭
|
||||
|
||||
var span; // 给未出生的元素取个名字span
|
||||
|
||||
// 添加监听
|
||||
// 监听鼠标进去的事件
|
||||
con.addEventListener('mouseenter',(e)=>{
|
||||
// 如果进去的门是打开的，就可以执行这个函数
|
||||
if(isIn){
|
||||
// 获取进入的鼠标位置
|
||||
// 生成元素的位置=进入点距离窗口的距离-父盒子距离窗口的距离
|
||||
let inX=e.clientX-e.target.offsetLeft;
|
||||
let inY=e.clientY-e.target.offsetTop;
|
||||
|
||||
// 创建一个span元素，并且给它对应的出生坐标
|
||||
let el=document.createElement('span');
|
||||
el.style.left=inX+'px';
|
||||
el.style.top=inY+'px';
|
||||
// 添加到con对应的父元素，即container
|
||||
con.appendChild(el);
|
||||
|
||||
$('.container span').removeClass('out'); // 移除出去的动画
|
||||
$('.container span').addClass('in'); // 添加进入的动画
|
||||
span=document.querySelector('.container span');
|
||||
isIn=false; // 关闭进来的门（不能使用进入的方法）
|
||||
isOut=true; // 打开出去的门（可以使用出去的方法）
|
||||
}
|
||||
})
|
||||
// 监听鼠标出去的事件
|
||||
con.addEventListener('mouseleave',(e)=>{
|
||||
if(isOut){
|
||||
// 获取出去的鼠标位置
|
||||
// 生成元素的位置=出去点距离窗口的距离-父盒子距离窗口的距离
|
||||
let outX=e.clientX-e.target.offsetLeft;
|
||||
let outY=e.clientY-e.target.offsetTop;
|
||||
|
||||
$('.container span').removeClass('in'); // 移除进入的动画
|
||||
$('.container span').addClass('out'); // 添加出去的动画
|
||||
// 添加出去的坐标
|
||||
$('.out').css('left',outX+'px');
|
||||
$('.out').css('top',outY+'px');
|
||||
|
||||
isOut=false; // 关闭出去的门
|
||||
// 当动画结束后再删除元素
|
||||
setTimeout(() => {
|
||||
con.removeChild(span); // 删除元素
|
||||
isIn=true; // 打开进入的门
|
||||
}, 500);
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>菜单悬停效果</title>
|
||||
<link rel="stylesheet" href="../css/10.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ul>
|
||||
<li><a href="#">首页</a></li>
|
||||
<li><a href="#">关于我们</a></li>
|
||||
<li><a href="#">服务</a></li>
|
||||
<li><a href="#">案例</a></li>
|
||||
<li><a href="#">用户反馈</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>炫彩爱心加载特效</title>
|
||||
<link rel="stylesheet" href="../css/11.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="heart">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>粘性球球</title>
|
||||
<link rel="stylesheet" href="../css/12.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="effect">
|
||||
<div class="bigball"></div>
|
||||
<div class="smallball"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>鼠标悬停发光按钮</title>
|
||||
<link rel="stylesheet" href="../css/13.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- 接下来的有点神奇了哈，划重点哦 -->
|
||||
<!-- 这里的--i是一个自定义属性 -->
|
||||
<a href="#" style="--i:1">点赞</a>
|
||||
<a href="#" style="--i:2">关注</a>
|
||||
<a href="#" style="--i:3">评论</a>
|
||||
<a href="#" style="--i:4">收藏</a>
|
||||
<a href="#" style="--i:5">分享</a>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>菜单栏图标悬停效果</title>
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/14.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="nav">
|
||||
<ul class="menu">
|
||||
<li class="item">
|
||||
<a href="#" class="link">
|
||||
<i class="fa fa-home" aria-hidden="true"></i>
|
||||
<span>首页</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#" class="link">
|
||||
<i class="fa fa-heart" aria-hidden="true"></i>
|
||||
<span>动态</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#" class="link">
|
||||
<i class="fa fa-plus-circle" aria-hidden="true"></i>
|
||||
<span>发布</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#" class="link">
|
||||
<i class="fa fa-bell" aria-hidden="true"></i>
|
||||
<span>消息</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#" class="link">
|
||||
<i class="fa fa-user" aria-hidden="true"></i>
|
||||
<span>我的</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>好玩的聚光灯效果</title>
|
||||
<link rel="stylesheet" href="../css/15.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>helloworld</h1>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>好看的加载动画效果</title>
|
||||
<link rel="stylesheet" href="../css/16.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="loading">
|
||||
<span>拼命加载中</span>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>菱形加载动画</title>
|
||||
<link rel="stylesheet" href="../css/17.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="loading">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>简约不简单的社交分享按钮</title>
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/18.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="btn-box">
|
||||
<a href="#"><i class="fa fa-qq" aria-hidden="true"></i></a>
|
||||
<a href="#"><i class="fa fa-wechat" aria-hidden="true"></i></a>
|
||||
<a href="#"><i class="fa fa-weibo" aria-hidden="true"></i></a>
|
||||
<a href="#"><i class="fa fa-renren" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>纯CSS实现沙漏加载动画</title>
|
||||
<link rel="stylesheet" href="../css/19.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="loading">
|
||||
<span class="top"></span>
|
||||
<span class="bottom"></span>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>3D旋转卡片</title>
|
||||
<link rel="stylesheet" href="../css/2.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="card">
|
||||
<div class="front">
|
||||
<p>缘分让我们遇到！</p>
|
||||
</div>
|
||||
<div class="back">
|
||||
<p>求点赞~</p>
|
||||
<p>求关注~</p>
|
||||
<p>求评论~</p>
|
||||
<p>求收藏~</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>文字裂开效果</title>
|
||||
<link rel="stylesheet" href="../css/20.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section>
|
||||
<div class="item">
|
||||
<div class="a">Zan.</div>
|
||||
<div class="a">Zan.</div>
|
||||
<a href="#">点赞了解更多</a>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="a">Foll.</div>
|
||||
<div class="a">Foll.</div>
|
||||
<a href="#">关注了解更多</a>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="a">Coll.</div>
|
||||
<div class="a">Coll.</div>
|
||||
<a href="#">收藏了解更多</a>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>纯CSS实现漂亮的加载动画</title>
|
||||
<link rel="stylesheet" href="../css/21.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="loading">
|
||||
<!-- 【--x是自定义属性，在后面样式中会用到】 -->
|
||||
<div style="--x:0"></div>
|
||||
<div style="--x:1"></div>
|
||||
<div style="--x:2"></div>
|
||||
<div style="--x:3"></div>
|
||||
<div style="--x:4"></div>
|
||||
<div style="--x:5"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>HTML+CSS伸缩式导航栏</title>
|
||||
<link rel="stylesheet" href="../css/3.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<input type="checkbox">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<ul>
|
||||
<li><a href="javascript:void(0)">点赞</a></li>
|
||||
<li><a href="javascript:void(0)">关注</a></li>
|
||||
<li><a href="javascript:void(0)">收藏</a></li>
|
||||
<li><a href="javascript:void(0)">评论</a></li>
|
||||
<li><a href="javascript:void(0)">分享</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>有点小酷的input输入动画</title>
|
||||
<link rel="stylesheet" href="../css/4.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="input-data">
|
||||
<input type="text" required>
|
||||
<div class="underline"></div>
|
||||
<label>您的姓名</label>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>闪亮的玻璃图标悬浮效果</title>
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/5.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="color"></div>
|
||||
<div class="color"></div>
|
||||
<div class="color"></div>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#"><i class="fa fa-qq" aria-hidden="true"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i class="fa fa-weixin" aria-hidden="true"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i class="fa fa-weibo" aria-hidden="true"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i class="fa fa-tencent-weibo" aria-hidden="true"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i class="fa fa-telegram" aria-hidden="true"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>弹性标签动画</title>
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/6.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<nav>
|
||||
<input type="radio" name="tab" id="home" checked>
|
||||
<input type="radio" name="tab" id="comment">
|
||||
<input type="radio" name="tab" id="envelope">
|
||||
<input type="radio" name="tab" id="heart">
|
||||
<input type="radio" name="tab" id="user">
|
||||
<label for="home" class="home">
|
||||
<a href="#"><i class="fa fa-home" aria-hidden="true"></i>Home</a>
|
||||
</label>
|
||||
<label for="comment" class="comment">
|
||||
<a href="#"><i class="fa fa-comment" aria-hidden="true"></i>Comment</a>
|
||||
</label>
|
||||
<label for="envelope" class="envelope">
|
||||
<a href="#"><i class="fa fa-envelope" aria-hidden="true"></i>Envelope</a>
|
||||
</label>
|
||||
<label for="heart" class="heart">
|
||||
<a href="#"><i class="fa fa-heart" aria-hidden="true"></i>Heart</a>
|
||||
</label>
|
||||
<label for="user" class="user">
|
||||
<a href="#"><i class="fa fa-user" aria-hidden="true"></i>User</a>
|
||||
</label>
|
||||
<div class="tab"></div>
|
||||
</nav>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>旋转菜单</title>
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/7.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="menu">
|
||||
<input type="checkbox" class="menu-toggler" id="menu_toggler" checked>
|
||||
<label for="menu_toggler"></label>
|
||||
<ul>
|
||||
<li class="menu-item">
|
||||
<a href="#"><i class="fa fa-qq" aria-hidden="true"></i></a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#"><i class="fa fa-weixin" aria-hidden="true"></i></a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#"><i class="fa fa-weibo" aria-hidden="true"></i></a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#"><i class="fa fa-tencent-weibo" aria-hidden="true"></i></a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#"><i class="fa fa-telegram" aria-hidden="true"></i></a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#"><i class="fa fa-renren" aria-hidden="true"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>流光按钮</title>
|
||||
<link rel="stylesheet" href="../css/8.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="#">button</a>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>全屏导航栏菜单</title>
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/9.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<input type="checkbox" id="menu_btn">
|
||||
<label class="menu-btn" for="menu_btn">
|
||||
<i class="fa fa-bars" aria-hidden="true"></i>
|
||||
</label>
|
||||
<div class="con">
|
||||
<h1>全屏覆盖导航栏</h1>
|
||||
<h3>HTML + CSS</h3>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<ul class="menu">
|
||||
<li><a href="#">首页</a></li>
|
||||
<li><a href="#">关于我们</a></li>
|
||||
<li><a href="#">服务</a></li>
|
||||
<li><a href="#">案例</a></li>
|
||||
<li><a href="#">用户反馈</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue