31 3D日历组件

效果演示

31-3D日历组件.gif

实现了一个3D文字旋转的效果,当鼠标悬停在容器上时,最后一个文字会旋转630度,而其他文字会逐渐旋转到水平面上方。

Code

<div class="container"><div class="text" style="--j:0;"><span style="--i:0">2</span><span style="--i:1">3</span><span style="--i:2">4</span><span style="--i:3">5</span></div><div class="text" style="--j:1;"><span style="--i:0">0</span><span style="--i:1">1</span><span style="--i:2">2</span><span style="--i:3">3</span></div><div class="text" style="--j:2;"><span style="--i:0">2</span><span style="--i:1">3</span><span style="--i:2">4</span><span style="--i:3">5</span></div><div class="text" style="--j:3;"><span style="--i:0">3</span><span style="--i:1">4</span><span style="--i:2">5</span><span style="--i:3">6</span></div></div>
* {margin: 0;padding: 0;box-sizing: border-box;
}body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #e8e8e8;
}.container {display: flex;transform-style: preserve-3d;gap: 10px;transform: rotateY(30deg) rotateX(10deg);
}.container .text {position: relative;width: 100px;height: 100px;transform-style: preserve-3d;transition: 2.5s ease-in-out;transition-delay: calc(0.25s*var(--j));
}.container .text span {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(#434343, #535353);display: flex;justify-content: center;align-items: center;font-size: 4em;font-weight: 700;font-family: 黑体;color: #fff;transform-style: preserve-3d;transform: rotateX(calc(90deg*var(--i))) translateZ(50px);
}.container .text::before {content: "";position: absolute;width: 100%;height: 100%;background: #373737;transform-origin: left;transform: rotateY(90deg) translateX(-50px);
}.container .text:last-child span {background: linear-gradient(#29c040, #32ed4e);color: #333;
}.container .text:last-child:before {background: #29ab3c;
}.container:hover .text {transform: rotateX(-360deg);
}.container:hover .text:last-child {transform: rotateX(630deg);
}

实现思路拆分

* {margin: 0;padding: 0;box-sizing: border-box;
}

这段代码是设置全局样式,将所有元素的外边距、内边距和盒模型设置为0,以便更好地控制元素的大小和位置。

body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #e8e8e8;
}

这段代码是设置页面的基本样式,将页面的高度设置为100vh,以便页面填充整个屏幕。使用flex布局将页面内容居中显示,并将背景颜色设置为#e8e8e8。

.container {display: flex;transform-style: preserve-3d;gap: 10px;transform: rotateY(30deg) rotateX(10deg);
}

这段代码是设置容器的基本样式,使用flex布局将容器内容垂直排列,并使用preserve-3d属性保留3D效果。使用gap属性设置容器中元素之间的间距为10px。使用transform属性设置容器的旋转角度为30度,x轴旋转角度为10度。

.container.text {position: relative;width: 100px;height: 100px;transform-style: preserve-3d;transition: 2.5s ease-in-out;transition-delay: calc(0.25s*var(--j));
}

这段代码是设置文字的基本样式,将文字的位置设置为相对定位,宽度和高度都设置为100px。使用transform-style属性保留3D效果。使用transition属性设置文字的过渡效果,过渡时间为2.5秒,缓动函数为ease-in-out。使用transition-delay属性设置文字的过渡延迟时间,延迟时间为0.25秒的乘积。

.container.text span {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(#434343, #535353);display: flex;justify-content: center;align-items: center;font-size: 4em;font-weight: 700;font-family: 黑体;color: #fff;transform-style: preserve-3d;transform: rotateX(calc(90deg*var(--i))) translateZ(50px);
}

这段代码是设置文字的样式,将文字的位置设置为绝对定位,宽度和高度都设置为100%。使用background属性设置文字的背景颜色为渐变色。使用display属性将文字内容居中显示。使用justify-content和align-items属性将文字内容水平和垂直居中显示。使用font-size、font-weight和font-family属性设置文字的字体大小、字重和字体类型。使用color属性设置文字的颜色。使用transform-style属性保留3D效果。使用transform属性设置文字的旋转角度为90度的乘积,并将文字向内缩放50px。

.container.text::before {content: "";position: absolute;width: 100%;height: 100%;background: #373737;transform-origin: left;transform: rotateY(90deg) translateX(-50px);
}

这段代码是设置文字的侧边空白填充的样式,将文字的侧边空白填充的位置设置为绝对定位,宽度和高度都设置为100%。使用background属性设置文字的侧边空白填充的背景颜色为#373737。使用transform-origin属性设置文字的侧边空白填充的旋转中心为左上角。使用transform属性设置文字的侧边空白填充的旋转角度为90度,并将文字向左移动50px。

.container.text:last-child span {background: linear-gradient(#29c040, #32ed4e);color: #333;
}

这段代码是设置最后一个文字的样式,将文字的背景颜色设置为渐变色,颜色为#333。

.container.text:last-child:before {background: #29ab3c;
}

这段代码是设置最后一个文字的侧边空白填充的样式,将文字的侧边空白填充的背景颜色设置为#29ab3c。

/* 4.hover效果 */
.container:hover.text {transform: rotateX(-360deg);
}.container:hover.text:last-child {transform: rotateX(630deg);
}

这段代码是设置鼠标悬停在容器上时文字的旋转效果,将第一个文字的旋转角度设置为-360度,将最后一个文字的旋转角度设置为630度。当鼠标悬停在容器上时,文字会逐渐旋转到水平面上方。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/630622.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python中json的用法(详细)

json.dumps(数据) 用法是将数据类型&#xff08;字符串&#xff0c;列表&#xff0c;字典&#xff0c;元组&#xff09;加载成字符串。ensure_asciiFalse参数可以加载中文。元组会转成列表形式的字符串 json.loads(数据) 用法是将字符串加载成数据类型&#xff08;字符串&am…

MySQL -- Linux Ubuntu 环境安装MySQL数据库

注意&#xff1a;本篇所有命令均是在linux 服务器root账号下运行。 安装MySQL 安装 apt-get install mysql-server 启动mysql服务 systemctl start mysql查看mysql服务 systemctl status mysql 如下图所示&#xff0c;mysql服务正在运行 设置root密码 在第一次安装MyS…

【Redis】Redis如何做内存优化?

​ &#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Redis ⛳️ 功不唐捐&#xff0c;玉汝于成 ​ 目录 前言 正文 使用数据结构&#xff1a; 压缩对象&#xff1a; 过期策略&#xff1a; 分片&#xff1a; 使用持久化方式&#xff1a…

uniapp如何定义全局变量?

在UniApp中定义一个全局变量&#xff0c;可以使用Vue.js的全局属性 $store 或 $uni。以下是两种不同情况下定义全局变量的方法&#xff1a; 1.使用Vue.js的全局属性 $store UniApp中可以使用Vuex进行状态管理。通过将需要全局共享的数据存放在Vuex的状态中&#xff0c;就可以在…

虚幻UE 材质-进阶边界混合之运行时虚拟纹理

之前在学习空山新雨后时对于边缘虚化过渡处理有很多技术 今天又要介绍一个边缘过渡的方法&#xff1a;运行时虚拟纹理 文章目录 前言一、运行时虚拟纹理二、使用步骤总结 前言 边缘过渡柔和的方式我们之前介绍了很多&#xff0c;但是效果也不是最好的。 像素偏移PDO和我们今天…

Redis提供了哪几种持久化方式?

Redis 提供了2个不同形式的持久化方式。 RDB &#xff08;Redis DataBase&#xff09; AOF &#xff08;Append Of File&#xff09; 一、RDB &#xff08;Redis DataBase&#xff09; 在指定的时间间隔内将内存中的数据集快照写入磁盘&#xff0c;也就是行话讲的Snapshot快…

架构设计: 如何提供设计方案

面试时你是否常被问到这样的问题&#xff1a;“你之前是如何设计这个系统&#xff08;或子系统/模块/功能&#xff09;的&#xff1f;请介绍你的思路。” 很多研发同学在听到类似的面试题时&#xff0c;往往忽略“系统设计思路”关键词&#xff0c;而是陷入某个技术点细节里&a…

各省快递量数据, shp+excel,2001-2021年,已实现数据可视化

基本信息. 数据名称: 各省快递量数据 数据格式: shpexcel 数据时间&#xff1a;2001-2021年 数据几何类型: 面 数据坐标系: WGS84 数据来源&#xff1a;网络公开数据 数据字段&#xff1a; 序号字段名称字段说明1a_2001快递量/万件_2001年2a_2002快递量/万件_2002年3…

ceph数据分布式存储

单机存储的问题 存储处理能力不足 传统的IDE的IO值是100次/秒&#xff0c;SATA固态磁盘500次/秒&#xff0c;固态硬盘达到2000-4000次/秒。即使磁盘的IO能力再大数十倍&#xff0c;也不够抗住网站访问高峰期数十万、数百万甚至上亿用户的同时访问&#xff0c;这同时还要受到主机…

软件测试|使用Python轻松裁剪视频

简介 裁剪视频是在视频编辑和处理中常见的任务之一&#xff0c;Python提供了多种库和工具&#xff0c;可以用来裁剪视频。在本文中&#xff0c;我们将详细讨论如何使用Python来裁剪视频&#xff0c;并提供示例代码。 步骤1&#xff1a;环境准备 首先&#xff0c;我们要安装必…

Firefox 100 正式发布

五月三日&#xff0c;Firefox发布了它的第100个版本&#xff0c;来回顾一下Firefox是如何走到今天这一步的&#xff0c;以及在第100个版本中发布了哪些功能。 回顾 2004年&#xff0c;《纽约时报》上宣布了Firefox 1.0的发布&#xff0c;这个广告列出了为第一版做出贡献的每一…

MySQL运维实战(4.4) SQL_MODE之STRICT_TRANS_TABLES和STRICT_ALL_TABLES

作者&#xff1a;俊达 1 STRICT MODE 在MySQL中&#xff0c;STRICT模式主要用于控制数据库的行为&#xff0c;有助于保持数据的一致性和完整性&#xff0c;特别是在涉及到数据写入、更新和其他操作时的约束。 如果设置STRICT模式&#xff0c;MySQL会更加严格地执行数据写入和…

C语言——小细节和小知识12

一、倒置句子 将句子中的单词位置倒置&#xff0c;标点不用倒置&#xff0c;例如i love you.倒置结果是&#xff1a;you. love i。 1、两步翻转法 采用两步翻转法来实现单词位置的倒置。首先&#xff0c;它整体翻转整个字符串&#xff0c;然后再逐个翻转每个单词内的字符。 …

redis安装-Linux为例

可以下载一个Shell或者MobaXterm工具&#xff0c;便于操作 在redis官网下载压缩包 开始安装 安装依赖 yum install -y gcc tcl切换目录 切换目录后直接把redis安装包拖到/user/local/src/下 cd /user/local/src/解压然后安装 #解压 tar -zxvf redis-7.2.4.tar.gz #安装 …

day13

1.多态的向上转型和向下转型向上转型&#xff1a; 父类的引用指向子类的对象Person person new Man();向下转型: 将父类的引用强转为子类的对象Man man (Man) person; 2.instanceof关键字的用法引用 intanceof 运行类型 3.抽象类声明方式abstract class Person {} 4.接…

后端开发笔记20240117

文章目录 1.lambda表达式学习1.1 从list中找到符合条件的对象并且返回1.2 groupby的用法 2.时间做差取秒 1.lambda表达式学习 1.1 从list中找到符合条件的对象并且返回 这种案例在java中的应用很多&#xff0c;适用于轻度过滤&#xff0c;如果能sql直接查询出符合规定的那肯定…

python数字图像处理基础(六)——模板匹配、直方图

目录 模板匹配概念单对象模板匹配多对象模板匹配 直方图1.查找直方图2.绘制直方图3.掩膜的应用 模板匹配 概念 模板匹配和卷积原理很像&#xff0c;模板在原图像上从原点开始滑动&#xff0c;计算模板与图像被模板覆盖的地方的差别程度&#xff0c;这个差别程度的计算方法在o…

openssl3.2 - 官方demo学习 - pkey - EVP_PKEY_DSA_paramvalidate.c

文章目录 openssl3.2 - 官方demo学习 - pkey - EVP_PKEY_DSA_paramvalidate.c概述笔记END openssl3.2 - 官方demo学习 - pkey - EVP_PKEY_DSA_paramvalidate.c 概述 OPENSSL_hexstr2buf_ex 将16禁止字符串填充到16进制buffer BIO_new_mem_buf 有用, 可以内存的内容转为bio, 不…

如何安装“Nextcloud 客户端”win10系统?

1、 下载 Nextcloud的官网 Download and install Nextcloud 2、安装 3、 Nextcloud登录

组件v-model(.sync)记录使用(vue3)

示例&#xff08;演示地址&#xff09; 以下是Vue3中使用v-model实现组件的双向数据绑定的示例代码&#xff1a; 首先&#xff0c;让我们来了解一下Vue3中v-model的用法。在Vue3中&#xff0c;v-model 指令可以用于自定义组件上&#xff0c;用于实现组件的双向数据绑定。与Vue2…