“21天好习惯”第一期－10 鲁滨逊漂流记网页-2

在这个网页中，我运用了多种动画：动画按钮、打字机显示文字效果、悬停图片遮罩层，这些在CSS中都有注释。

* {padding: 0;margin: 0;color: white;
}
li{list-style: none;
}
html {height: 100%;overflow: hidden;
}
div {display: block;
}
.boxs {position: relative;width: 100%;height: 750px;}
.top {position: fixed;top: 1%;left: 32%;width: 500px;height: 100px;font-size: 81px;z-index: 101;
}
.author {position: fixed;font-size: 13px;top: 93%;left: 5%;z-index: 101;
}
nav {top: 20%;bottom: 10%;text-align: center;background: rgba(0, 0, 0, 0.5);position: fixed;z-index: 100;height: 80%;left: 0;width: 20%;font-weight: 300;font-size: 25px;border-radius: 10px;
}
nav ul li {margin: 25px 0;
}
/* 动画按钮 */
.btn::before {content: "";position: absolute;top: 0;height: 0%;width: 100%;left: 0;border-radius: 10px;background-color: white;opacity: 0.5;transition: 0.5s;z-index: -1;
}
.btn:hover {color: black;
}
.btn:hover::before {height: 100%;
}
.btn {text-decoration: none!important;font-size: 14px;letter-spacing: 0.5px;-webkit-transition: color 2s, background 1s;transition: color 2s, background 1s;padding: 20px 30px;position: relative;font-size: 18px;line-height: 80px;z-index: 28;
}
.box {position: relative;width: 100%;height: 100%;float: left;
}
.box1 {background-image: url(../img/1.jpg);
}
.box2 {background-image: url(../img/2.jpg);
}
.box3 {background-image: url(../img/3.jpg);
}
.box4 {background-image: url(../img/4.jpg);
}
.box5 {background-image: url(../img/5.jpg);
}
.main {position: absolute;left: 30%;top: 20%;width: 70%;height: 80%;background: rgba(0, 0, 0, 0.5);transition:.6s;border-radius: 15px;
}.main video {float: left;
}
.main img {float: left;
}
.audio {width: 100px;height: 100px;position: fixed;top: 5%;left: 10%;z-index: 1001;
}
audio {width: 95px;height: 50px;
}
.b1{width: 394px;height: 446px;position: relative;left: 350px;
}/* 悬停图片遮罩层 */
.b2 {position: absolute;top: 0px;left: 350px;width: 394px;height: 446px;pointer-events:none;background: black;opacity: 0;
}
.b1:hover +.b2{opacity: 0.8;transition: 1s;
}
.b3 {position: absolute;top: 90%;left: 50%;transform: translate(-50%, -50%);
}
p {border-right: 2px solid white;font-size: 200%;text-align: center; font-family: monospace;white-space: nowrap; overflow: hidden; animation: borders 0.5s infinite normal,widths 3s steps(6) infinite;
}
/* 打字机显示文字效果 */
@keyframes broders {from {border-right-color: #000;}to {border-right-color: #fff;}
}
@keyframes widths {from {width: 0;}to {width: 120%;}
}
#box1 {position: absolute;top: 7%;left: 51%;text-align: right;width: 80px;height: 450px;line-height: 36px;font-weight: 800;padding: 50px;
}
#box2 {position: absolute;top: 15%;left: 64%;height: 450px;
}
h3 {text-align: center;font-size: 30px;
}
.x {box-shadow: -1px -1px 1px .5px #808080;border: 0 solid ;border-radius: 2px ;
}
.x1 {color: #a09b9d;
}
.password {width: 280px;
}
select {margin: 7px;border: 0;width: 76px;color: #000000;
}textarea {font-weight: 900;border-radius: 5px ;margin: 7px;padding: 4px;color: #000000;
}
input {margin: 7px;padding: 4px;
}
.sumit {position: absolute;bottom: 70px;left: 0;color: #000000;
}
.reset {position: absolute;bottom: 70px;left: 184px;color: #000000;
}
.x2 {border: grey;width: 180px;height: 27px;border-radius: 4px;background-color: #dae1eb;padding: 2px;margin: 0;box-shadow: 1px 1px 1px .5px #808080;
}
.x3 {background-color: white;border: 2px solid black;
}

“21天好习惯”第一期－10 鲁滨逊漂流记网页-2相关推荐

“21天好习惯“第一期--4
"21天好习惯"-第四天每天记录一点点计算机的诞生与发展冯·诺依曼体系计算机系统作为一个能够自动地处理信息的智能化工具,必须解决好两个最基本的问题:①信息如何表示才能方便地 ...
“21天好习惯”第一期－第10天
今天学会了一个猜数的程序,这个程序可以让计算机随机生成一个100以内的数,然后我们人来猜这个数是什么. #include<stdio.h> #include<stdlib.h> ...
“21天好习惯” 第一期 - 18
今天进一步探究昨天学习的strcmp()函数: 昨天学习strcmp()函数时提到了,当两个字符串相同时,输出0,不相同时,输出非零,那么当两个字符串不同时,具体会输出什么非零值呢?于 ...
“21天好习惯”第一期- 4 简单的壁纸爬虫
有时候我们不想让电脑桌面过于单调,于是琢磨着能不能让电脑每天自动获取网站上的图片然后更换为壁纸,这就需要一个壁纸爬虫了,这里以3G壁纸为例. 首先,还是喜闻乐见的导入模块,在这个爬虫中,我们需要以下模 ...
“21天好习惯”第一期——21
<计算机组成原理> 3.5.2 MIPS32架构CPU基本的组成部件 3. 单周期控制系统设计 (2)ALU控制单元 ALU控制单元接收两种输入:主控单元输出的m位aluop和指 ...
“21天好习惯”第一期——16
<计算机组成原理> 第一章概论 1.1.2 存储程序工作方式存储程序是计算机的核心内容,表明了计算机的工作方式,包含3个要点:事先编写程序,存储程序,自动.连续地执行程序. (1)根据 ...
“21天好习惯“第一期——2
道友们好,今天是学习的第二天,经过一天的学习我又了解到了很多有关C语言的知识,我也会和大家继续分享我的学习笔记,以及在学习中遇到的问题. 请大家看看下面这个程序: 今天的学习就到此为止,希望大家可以向 ...
“21天好习惯”第一期——2
今天学习的内容是3.3.2--算术逻辑单元. 继续昨天的学习的内容进一步学习了ALU: ALU的外部特性与功能: ALU的标志位: ALU的EDA设计模式: 学习中遇到的问题主要是ALU的EDA设计模 ...
“21天好习惯“ 第九期—9：京东倒计时，淘宝倒计时
"21天好习惯" 第九期 - 9 一.学习规划 1.计算机组成图谱绘画(应为知识导图)(10月25) 2.网络工程师备考(11月6) 3.信息知识竞赛(10月31) 二.所遇问题 ...

“21天好习惯”第一期－10 鲁滨逊漂流记网页-2

“21天好习惯”第一期－10 鲁滨逊漂流记网页-2相关推荐

最新文章

热门文章