从零开始学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 交集选择器实现，当加载完某一全屏后需要执行的动画。

推荐阅读

io
精选Eclipse插件概览

本文介绍了多种Eclipse插件，包括XML Schema Infoset Model (XSD)、Graphical Editing Framework (GEF)、Eclipse Modeling Framework (EMF)等，涵盖了从Web开发到图形界面编辑的多个方面。 ... [详细]

蜡笔小新 2024-11-26 16:20:20
express
初学者指南：使用CSS为博客园文章中的超链接添加图标

作为一名CSS初学者，我在博客园中尝试通过CSS美化页面，特别是为超链接添加图标，以提升阅读体验。本文将分享如何使用CSS和字体图标库来实现这一功能。 ... [详细]

蜡笔小新 2024-11-27 08:43:46
io
网络编程：使用POST方法提交表单数据

本文基于《Core Java Volume 2》的内容，深入探讨了网络编程中通过POST方法提交表单数据的技术细节，包括GET与POST方法的区别、POST提交的具体步骤及常见问题处理。 ... [详细]

蜡笔小新 2024-11-26 10:00:57
javascript
试图实现向上箭头 - trying to achieve arrow pointing upwards

Iamtryingtoachievethearrowpointingupwards..iamtryingtoachieveitinmycssiamnotabl ... [详细]

蜡笔小新 2023-10-09 19:41:30
io
Web网络基础

目录儿1使用HTTP协议访问Web2HTTP的诞生2.1因特网的起源2.2互联网、因特网与万维网2.3万维网与HTTP3网络基础TCPIP3.1TCPIP协议族3.2TCPIP的分 ... [详细]

蜡笔小新 2024-11-27 18:39:10
format
如何在 VS Code 中调试 Vue 项目

本文详细介绍了如何通过配置 Chrome 和 VS Code 来实现对 Vue 项目的高效调试。步骤包括启用 Chrome 的远程调试功能、安装 VS Code 插件以及正确配置 launch.json 文件。 ... [详细]

蜡笔小新 2024-11-27 11:52:35
format
UMPlatForm.NET 5.1 版本数据字典管理功能解析

本文介绍了 UMPlatForm.NET 5.1 版本中的数据字典管理模块，探讨了该模块如何支持平台的数据共享与管理，以及如何通过用户和角色权限来增强系统的安全性。 ... [详细]

蜡笔小新 2024-11-27 11:24:54
format
MVC框架下使用DataGrid实现时间筛选与枚举填充

本文介绍如何在ASP.NET MVC项目中利用DataGrid组件增强搜索功能，具体包括使用jQuery UI的DatePicker插件添加时间筛选条件，并通过枚举数据填充下拉列表。 ... [详细]

蜡笔小新 2024-11-27 11:02:33
io
HTA与HTML5：IndexedDB兼容性探讨

本文探讨了HTA（HTML Application）环境中HTML5 IndexedDB的可用性问题，并提供了一种替代方案，即通过使用COM ActiveX对象来实现数据存储功能。 ... [详细]

蜡笔小新 2024-11-27 06:27:22
io
深入理解AutoMapper：.NET中的高效对象映射工具

AutoMapper 是一个用于 .NET 平台的对象映射库，它能够简化不同对象模型之间的数据转换过程。本文将详细介绍 AutoMapper 的基本功能、应用场景及配置方法。 ... [详细]

蜡笔小新 2024-11-27 02:48:15
io
深入理解Web API中的特性路由

本文探讨了Web API 2中特性的路由机制，特别是如何利用它来构建RESTful风格的URI。文章不仅介绍了基本的特性路由使用方法，还详细说明了如何通过特性路由进行API版本控制、HTTP方法的指定、路由前缀的应用以及路由约束的设置。 ... [详细]

蜡笔小新 2024-11-26 20:52:15
io
GitHub基础指南：项目代码的部署与管理

GitHub是一个广泛使用的开源代码托管平台，支持版本控制与协作开发。本文将指导开发者如何在GitHub上高效地管理和分享项目代码，包括项目的创建、代码的上传与下载等基本操作。 ... [详细]

蜡笔小新 2024-11-26 15:53:40
io
专业版 Pro Git：全面掌握版本控制

本书《Pro Git》深入探讨了 Git 版本控制系统的核心概念与高级功能，旨在帮助开发者和团队有效管理代码变更。通过实例和最佳实践，读者将学习如何利用 Git 提升工作效率。 ... [详细]

蜡笔小新 2024-11-26 12:09:09
express
深入解析轻量级数据库 SQL Server Express LocalDB

本文详细介绍了 SQL Server Express LocalDB，这是一种轻量级的本地 T-SQL 数据库解决方案，特别适合开发环境使用。文章还探讨了 LocalDB 与其他轻量级数据库的对比，并提供了安装和连接 LocalDB 的步骤。 ... [详细]

蜡笔小新 2024-11-25 20:36:01
javascript
知识普及之：CSS: body{font-size: 62.5%;}这种写法为什么？？？

CSS:body{font-size:62.5%;}为什么？？？在网页设计中我们经常看见body{font-size:62.5%;}这样的设置，为什么偏偏是62.5%呢？这主要是为了方便em与p ... [详细]

蜡笔小新 2023-09-25 20:24:32

我俩的12月11_484

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

Tags | 热门标签

RankList | 热门文章