<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 750px;
display: flex;
background-color: #eeedf2;
margin: 30px auto;
flex-wrap: wrap;
align-items: center;
flex-direction: column;
overflow: hidden;
position: relative;
}
.top-back-circle1 {
width: 1000px;
height: 1000px;
border-radius: 391px;
background-color: transparent;
z-index: 1;
top: -1150px;
position: absolute;
border: 150px solid #658fd7;
}
.top-back-circle2 {
width: 1000px;
height: 1000px;
border-radius: 345px;
background-color: transparent;
z-index: 1;
top: -970px;
position: absolute;
border: 120px solid #6e95d9;
}
.top-back-circle3 {
width: 1000px;
height: 1000px;
border-radius: 354px;
background-color: transparent;
z-index: 1;
top: -925px;
position: absolute;
border: 180px solid #97b4e6;
}
.top-back-circle4 {
width: 1000px;
height: 1000px;
border-radius: 474px;
background-color: transparent;
z-index: 1;
top: -705px;
position: absolute;
border: 140px solid #adc0e0;
}
.box-top {
width: 750px;
height: 110px;
/* background-color: #5987d5; */
display: flex;
justify-content: space-around;
align-items: flex-end;
z-index: 4;
}
.box-top p {
font-size: 18px;
color: #fff;
}
.box-top h1 {
font-size: 40px;
color: #fff;
}
.top-left {
width: 250px;
height: 90px;
/* background-color: #a1c86b; */
}
.top-right {
width: 300px;
height: 90px;
/* background-color: wheat; */
display: flex;
justify-content: space-around;
}
.top-right-circle {
width: 80px;
height: 80px;
border-radius: 40px;
background-color: #ffffff;
}
#top-circle1 {
background-image: url(./img/images/pay-top-img1_03.png);
background-position: center;
background-repeat: no-repeat;
}
#top-circle2 {
background-image: url(./img/images/pay-top-img2_03.png);
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.top-red-number {
width: 20px;
height: 20px;
border-radius: 5px;
background-color: #d96069;
font-size: 14px;
color: #fff;
text-align: center;
position: absolute;
right: 5px;
top: -5px;
}
#top-circle3 {
background-color: #3c3a8e;
background-image: url(./img/images/pay-top-img3_03.png);
background-position: center;
background-repeat: no-repeat;
}
.box-advert {
width: 750px;
height: 370px;
/* background-color: aquamarine; */
display: flex;
margin-top: 20px;
overflow: hidden;
position: relative;
z-index: 5;
}
.advert {
width: 600px;
height: 320px;
border-radius: 30px;
background-position: center;
background-repeat: no-repeat;
display: flex;
justify-content: space-between;
}
#advert-one {
background-image: url(./img/images/pay-advert2.webp);
margin-left: 25px;
margin-top: 10px;
}
#advert-two {
background-image: url(./img/images/pay-advert1.webp);
margin-left: 25px;
margin-top: 10px;
}
.advert-left {
width: 310px;
height: 310px;
/* background-color: #e6cc28; */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.click {
width: 240px;
height: 70px;
background-color: #fff;
color: #000;
font-size: 18px;
text-align: center;
line-height: 70px;
}
.advert-span {
font-size: 18px;
color: #fff;
margin-left: 20px;
font-weight: 600;
}
.advert-right {
width: 150px;
height: 280px;
/* background-color: violet; */
display: flex;
align-content: space-between;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-evenly;
margin-right: 20px;
}
.white-box {
width: 60px;
height: 60px;
border-radius: 20px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.white-box-circle {
width: 6px;
height: 6px;
border-radius: 3px;
background-color: #000;
margin-right: 5px;
}
.box-select {
width: 750px;
height: 190px;
/* background-color: yellow; */
display: flex;
justify-content: space-around;
align-items: center;
position: relative;
z-index: 3;
}
.select-big-box {
width: 130px;
height: 160px;
/* background-color: rgb(53, 50, 205); */
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.select-small-box {
width: 120px;
height: 120px;
border-radius: 34px;
background-color: #fff;
}
#transfer {
background-image: url(./img/images/pay-select-img1_03.png);
background-position: center;
background-repeat: no-repeat;
}
#request {
background-image: url(./img/images/pay-select-img2_03.png);
background-position: center;
background-repeat: no-repeat;
}
#exchange {
background-image: url(./img/images/pay-select-img3_03.png);
background-position: center;
background-repeat: no-repeat;
}
#bill {
background-image: url(./img/images/pay-select-img4_03.png);
background-position: center;
background-repeat: no-repeat;
}
.select-span {
font-size: 19px;
color: #27262b;
}
.title {
width: 690px;
height: 60px;
color: #000;
/* background-color: violet; */
display:
前期预科班教学资料--静态页面制作，简单CSS动画
需积分: 5 97 浏览量
2022-07-19
22:18:38
上传
评论 1
收藏 86.59MB ZIP 举报
前期预科班教学资料--静态页面制作，简单CSS动画 （819个子文件） 
._images 4KB ._images 4KB ._images 4KB ._images 4KB ._imgs 4KB ._imgs 4KB index.css 12KB ._.DS_Store 4KB ._.DS_Store 4KB ._.DS_Store 4KB ._.DS_Store 4KB ._.DS_Store 4KB ._.DS_Store 4KB ._.DS_Store 4KB
效果展示.gif 4.72MB 效果展示.gif 4.72MB 效果展示.gif 4.72MB hw4.gif 1018KB hw4.gif 1018KB 02.gif 100KB 9-ribbon.gif 73KB 9-ribbon.gif 73KB 5.gif 14KB 4.gif 11KB 8.gif 11KB 3.gif 11KB 6.gif 10KB 7.gif 9KB 01.gif 7KB ._效果展示.gif 247B ._效果展示.gif 247B ._效果展示.gif 247B 微信服务.htm 2KB
pay.html 44KB pay-1.html 42KB 27.html 25KB 3.html 23KB 13.html 17KB 27-2.html 16KB 2.html 15KB shop-3.html 12KB moblie-3.html 11KB moblie-1.html 11KB 24.html 11KB shop-4.html 10KB shop-interger.html 10KB shop-1.html 10KB moblie-2.html 10KB 25.html 10KB shop-2.html 9KB 4.html 8KB 4-2.html 7KB 4 copy.html 7KB 5-1.html 6KB 26-1-排行榜.html 6KB table3.html 6KB 10-1.html 5KB 1.html 4KB 2.html 4KB 10-2.html 4KB 5.html 4KB 7-1.html 4KB 弹性盒子-筛子.html 4KB 4.html 4KB table4.html 3KB hot-area.html 3KB lianxi.html 3KB 9-1.html 3KB 7.html 3KB 10.html 3KB 3.html 3KB 时钟例子.html 3KB lianxi2.html 3KB jinling.html 3KB table2.html 3KB 6.html 2KB 1.html 2KB 12.html 2KB 9.html 2KB table5.html 1KB 11.html 1KB 8.html 1KB table1.html 879B shadow.html 807B 1111.html 0B
back.jpg 481KB back.jpg 481KB back.jpg 481KB 2.JPG 342KB 2.JPG 342KB 1-3.jpg 334KB 1-3.jpg 334KB 1.JPG 329KB 1.JPG 329KB 1-2.jpg 300KB 1-2.jpg 300KB 1-4.jpg 290KB 1-4.jpg 290KB 1-1.jpg 284KB 1-1.jpg 284KB共 819 条
- 1
- 2
- 3
- 4
- 5
- 6
- 9
Melissan
- 粉丝: 0
- 资源: 11
最新资源
- 自动驾驶定位系列教程十:闭环修正.pdf
- HM2333-VB一款P-Channel沟道SOT23的MOSFET晶体管参数介绍与应用说明
- Python实现插入排序算法（源代码）
- 123.cpp
- HM2319-VB一款P-Channel沟道SOT23的MOSFET晶体管参数介绍与应用说明
- modbus4j-3.0.4.jar
- 蒙特·卡罗实验、使用蒙特·卡罗方法计算圆周率近似值.docx
- HM2319A-VB一款P-Channel沟道SOT23的MOSFET晶体管参数介绍与应用说明
- JAVA SpringBoot 集成华为云OBS，多镜像配置settings
- 一个文件共享系统，包括前端文件展示系统和后台管理系统，基于SpringBoot + MyBatis实现
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0