首页技术博客 PHP教程数据库技术前端开发 HTML5 Nginx php论坛

新用户注册 | 会员登录

热门标签 | HotTags

从零开始学Web之CSS3（八）CSS3三个案例

作者：我俩的12月11_484 | 来源：互联网 | 2023-08-17 09:59

大家好，这里是「从零开始学Web系列教程」，并在下列地址同步更新github：https:github.comDaotinWeb微信公众号：We

大家好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新......

github：https://github.com/Daotin/Web

微信公众号：Web前端之巅

博客园：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的探索之旅吧！

海外酒店团购特价机票民宿客栈

案例截图：

li > span:nth-of-type(2) { background-image: url("./images/q2.jpg"); transform: translateY(-150px) rotateX(90deg); } ul > li > span:nth-of-type(3) { background-image: url("./images/q3.jpg"); transform: translateZ(-150px) rotateX(180deg); } ul > li > span:nth-of-type(4) { background-image: url("./images/q4.jpg"); transform: translateY(150px) rotateX(-90deg); } .left { width: 60px; height: 60px; background-color: rgba(0,0,0,0.5); line-height: 60px; color: #fff; text-align: center; font-family: "Consolas"; font-size: 40px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 10; } .right { width: 60px; height: 60px; background-color: rgba(0,0,0,0.5); line-height: 60px; color: #fff; text-align: center; font-family: "Consolas"; font-size: 40px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 10; }

< >

示例效果：

第五屏

全屏插件的使用：

sectionsColor：设置每一屏的颜色；

afterLoad：回调函数，当每一屏加载完成后需要执行的动作。

CSS 代码：

* {
    margin: 0;
    padding: 0;
}

.section {
    overflow: hidden;
}

/* 第一屏 */
.first {
    padding-top: 100px;
}

.first .logo {
    width: 251px;
    height: 186px;
    background-image: url("../images/logo.png");
    margin: 0 auto;
}
.first .text {
    text-align: center;
    margin: 100px 0 20px 0;
}

.first .text > img {
    margin: 0 20px;
    opacity: 0.1;
    transition: margin 0.8s,opacity 0.8s;
}
.first .info1 {
    width: 772px;
    height: 49px;
    background-image: url("../images/info_1.png");
    margin: 0 auto;
}
/* 第一屏动画 */
.first.current .text > img {
    margin: 0 5px;
    opacity: 1;
}

/* 第二屏 */

.second > div{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.second .shield {
    width: 440px;
    font-size: 0; /* 消除盾牌之间的间隙*/
}
.second .shield > img {
    opacity: 0.1;
    transition: transform 0.8s, opacity 0.8s;
}

.second .shield > img:nth-of-type(1){
    transform: translate(-100px, 200px) rotate(30deg);
}
.second .shield > img:nth-of-type(2){
    transform: translate(300px, 20px) rotate(60deg);
}
.second .shield > img:nth-of-type(3){
    transform: translate(300px, 10px) rotate(-50deg);
}
.second .shield > img:nth-of-type(4){
    transform: translate(600px, 20px) rotate(-90deg);
}
.second .shield > img:nth-of-type(5){
    transform: translate(30px, 200px) rotate(90deg);
}
.second .shield > img:nth-of-type(6){
    transform: translate(-30px, -30px) rotate(-30deg);
}
.second .shield > img:nth-of-type(7){
    transform: translate(0px, 100px) rotate(-30deg);
}
.second .shield > img:nth-of-type(8){
    transform: translate(320px, 150px) rotate(30deg);
}
.second .shield > img:nth-of-type(9){
    transform: translate(-190px, -280px) rotate(-30deg);
}
.second .info2 {
    width: 635px;
    height: 309px;
    background-image: url("../images/info_2.png");
}
/* 第二屏动画 */
.second.current .shield > img {
    transform: none;
    opacity: 1;
}

/* 第三屏 */
.third {
    position: relative;
}
.third .info3 {
    width: 631px;
    height: 278px;
    background-image: url("../images/info_3.png");
    position: absolute;
    left:50%;
    top: 50%;
    transform: translate(-100%,-50%);
}
.third .circle {
    width: 453px;
    height: 449px;
    background-image: url("../images/circle.png");
    position: absolute;
    left: 57%;
    top: 50%;
    transform: translateY(-50%);
}
.third .circle .rocket {
    width: 203px;
    height: 204px;
    background-image: url("../images/rocket.png");
    position: absolute;
    left: -50%;
    top: 150%;
    transition: left 0.8s, top 0.8s;
}
/* 第三屏动画 */
.third.current .circle .rocket {
    left: 115px;
    top: 115px;
}

/* 第四屏 */
.fourth {
    position: relative;
}
.fourth .search {
    width: 529px;
    height: 438px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-115%, -50%);
    overflow: hidden;
}
.fourth .search .search-bar{
    width: 529px;
    height: 66px;
    background-image: url("../images/search.png");
    transform: translateX(-100%);
}
.fourth .search .search-text{
    width: 0;
    height: 22px;
    background-image: url("../images/key.png");
    position: absolute;
    left: 18px;
    top: 23px;
}
.fourth .search .search-content{
    width: 529px;
    height: 0;
    background-image: url("../images/result.png");
    margin-top: -12px;
}
.fourth .info4 {
    width: 612px;
    height: 299px;
    background-image: url("../images/info_4.png");
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
}
/* 第四屏动画 */
.fourth.current .search .search-bar{
    transform: none;
    transition: transform 0.8s;
}
.fourth.current .search .search-text{
    width: 99px;
    transition: width 0.8s 0.8s steps(5);
}
.fourth.current .search .search-content{
    height: 372px;
    transition: height 0.8s 1.6s;
}

使用 current 交集选择器实现，当加载完某一全屏后需要执行的动画。

推荐阅读

http
Java验证码——kaptcha的使用配置及样式

本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置，包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]

蜡笔小新 2023-12-13 13:58:25
process
flowable工作流流程变量_信也科技工作流平台的技术实践

1背景随着公司业务发展及内部业务流程诉求的增长,目前信息化系统不能够很好满足期望,主要体现如下：目前OA流程引擎无法满足企业特定业务流程需求，且移动端体 ... [详细]

蜡笔小新 2023-12-13 10:17:15
text
试图实现向上箭头 - trying to achieve arrow pointing upwards

Iamtryingtoachievethearrowpointingupwards..iamtryingtoachieveitinmycssiamnotabl ... [详细]

蜡笔小新 2023-10-09 19:41:30
io
微软头条实习生分享深度学习自学指南

本文介绍了一位微软头条实习生自学深度学习的经验分享，包括学习资源推荐、重要基础知识的学习要点等。作者强调了学好Python和数学基础的重要性，并提供了一些建议。 ... [详细]

蜡笔小新 2023-12-14 20:58:32
io
Skywalking系列博客1安装单机版 Skywalking的快速安装方法

本文介绍了如何快速安装单机版的Skywalking，包括下载、环境需求和端口检查等步骤。同时提供了百度盘下载地址和查询端口是否被占用的命令。 ... [详细]

蜡笔小新 2023-12-14 19:05:47
header
【译】发送表单数据

这是原文链接：sendingformdata许多情况下，我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单，但是 ... [详细]

蜡笔小新 2023-12-14 16:19:10
io
Centos7.6安装Gitlab教程及注意事项

本文介绍了在Centos7.6系统下安装Gitlab的详细教程，并提供了一些注意事项。教程包括查看系统版本、安装必要的软件包、配置防火墙等步骤。同时，还强调了使用阿里云服务器时的特殊配置需求，以及建议至少4GB的可用RAM来运行GitLab。 ... [详细]

蜡笔小新 2023-12-14 14:01:06
io
postman测试登录后的接口_使用postman进行接口测试的方法(测试用户管理模块)

本文介绍了使用postman进行接口测试的方法，以测试用户管理模块为例。首先需要下载并安装postman，然后创建基本的请求并填写用户名密码进行登录测试。接下来可以进行用户查询和新增的测试。在新增时，可以进行异常测试，包括用户名超长和输入特殊字符的情况。通过测试发现后台没有对参数长度和特殊字符进行检查和过滤。 ... [详细]

蜡笔小新 2023-12-14 10:29:45
io
20211101CleverTap参与度和分析工具功能平台学习/实践

1.应用场景主要用于学习CleverTap的使用,该平台主要用于客户保留与参与平台.为客户提供价值.这里接触到的原因,是目前公司用到该平台的服务~2.学习操作 ... [详细]

蜡笔小新 2023-12-14 10:25:12
io
javascript – 概述在Firefox上无法正常工作

我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观：而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]

蜡笔小新 2023-12-14 10:20:38
io
知识图谱——机器大脑中的知识库

本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]

蜡笔小新 2023-12-14 10:06:19
io
如何用UE4制作2D游戏文档——计算篇

篇首语：本文由编程笔记#小编为大家整理，主要介绍了如何用UE4制作2D游戏文档——计算篇相关的知识，希望对你有一定的参考价值。 ... [详细]

蜡笔小新 2023-12-14 09:50:34
io
安卓select模态框样式改变_微软Office风格的多端（Web、安卓、iOS）组件库——Fabric UI...

介绍FabricUI是微软开源的一套Office风格的多端组件库，共有三套针对性的组件，分别适用于web、android以及iOS，Fab ... [详细]

蜡笔小新 2023-12-14 05:55:08
cookie
Webmin远程命令执行漏洞复现及防护方法

本文介绍了Webmin远程命令执行漏洞CVE-2019-15107的漏洞详情和复现方法，同时提供了防护方法。漏洞存在于Webmin的找回密码页面中，攻击者无需权限即可注入命令并执行任意系统命令。文章还提供了相关参考链接和搭建靶场的步骤。此外，还指出了参考链接中的数据包不准确的问题，并解释了漏洞触发的条件。最后，给出了防护方法以避免受到该漏洞的攻击。 ... [详细]

蜡笔小新 2023-12-13 16:14:53
io
在重复造轮子的情况下用ProxyServlet反向代理来减少工作量

像不少公司内部不同团队都会自己研发自己工具产品，当各个产品逐渐成熟，到达了一定的发展瓶颈，同时每个产品都有着自己的入口，用户 ... [详细]

蜡笔小新 2023-12-13 15:19:01

我俩的12月11_484

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章