更多>
最新下载
梦幻水族馆
《奇幻水族馆》是一款奇幻冒险游戏,让玩家探索神秘的海底世界。在这个充满想象力的水族馆中,玩家将扮演水族馆管理员的角色,通过管理和照顾各种神奇生物来体验奇幻世界的乐趣。游戏特色: 生物多样:水族箱里生活着各种奇幻生物,比如神秘的水晶鱼、光芒美人鱼等,每种生物都有独特的外观和特性。互动:玩家可以与水族箱中的生物互动、喂食、玩耍,甚至执行任务让生物离你更近。装饰施工:可以根据自己的喜好装饰水族箱,定制
0
2024-05-08
少女前线
《少女前线》是一款由SUNBORN Games开发的战略角色扮演游戏。在这个未来世界中,人类与机器人少女战斗着,你将扮演指挥官,带领独特的机器人少女部队展开一系列惊心动魄的战斗。游戏特色:庞大的机器人少女阵营:收集并培养各种不同风格和能力的机器人少女,打造属于你自己的最强队伍。深入的剧情设定:与机器人少女们展开交流并深入了解她们的故事背景,在战斗中为她们提供支持和鼓舞。精美的战斗画面:享受华丽的战
832
2024-05-06
星之翼
《星之翼》是一款将机甲美少女元素与经典GVG格斗玩法完美融合的3D竞技游戏。游戏中,玩家将操纵拥有强大战力的机甲美少女,在热血沸腾的战场上,展开激烈的1V1、2V2对战,感受无与伦比的竞技魅力。游戏通过高精度的3D建模技术,呈现出绚丽的画面效果。每台机甲都独具匠心,细腻刻画了充满科技感的机械构造与少女的柔美身姿,仿佛是一部活跃在掌间的动画大片。美少女驾驶员则各具魅力,不同的性格特点通过语音和动作得
521
2024-05-06
小花仙精灵乐园
《小花仙精灵乐园》是一款充满童趣和魔法的休闲游戏,为广大玩家带来美好的游戏体验。在游戏中,你将会扮演一位小花仙,与其他玩家一起进入精灵乐园,展开充满惊喜的冒险之旅。游戏特色:全新的魔法冒险:在更加精致的画面下,享受全新的精灵乐园冒险。精美的游戏画面:游戏中采用了3D最新技术,打造了唯美的游戏画面,让玩家感受到全新的视觉震撼。各种各样的活动:在游戏中,玩家可以参加各种各样的活动,获得大量游戏奖励。丰
703
2024-05-06
餐厅萌物语
《餐厅萌物语》是一款可爱的餐厅经营模拟游戏。在这个游戏中,你将扮演一位年轻的餐厅老板,通过经营和管理餐厅,迎接一群可爱的萌物顾客,打造出一家独特而繁忙的餐厅。游戏特色:可爱的萌物顾客:游戏中有各种可爱的动物人物作为顾客,每个动物都有自己的喜好和需求,你需要根据他们的喜好来提供最合适的菜品。自定义餐厅:从装修到家具摆设,你可以根据自己的喜好和创意来打造独特的餐厅,吸引更多的顾客。多样化的菜单:游戏中
574
2024-05-05
山河旅探
《山河旅探》游戏介绍《山河旅探》是一款引人入胜的剧情向国风本格推理探案游戏。这款游戏巧妙地将传统的中国文化元素与经典的推理探案玩法相结合,为玩家呈现出一个充满神秘与惊奇的游戏世界。在游戏中,玩家将扮演一名天才少年侦探,穿梭于山河之间,探索各种扑朔迷离的案件。每个案件都经过精心设计,充满悬疑与挑战,需要玩家运用智慧与观察力,收集线索,推理出真相。游戏的画面风格独特,采用了唯美的国风画风,将古代中国的
946
2024-05-05
恋与制作人
《恋与制作人》是一款由Elex开发的女性向手机游戏,是一款恋爱养成类型的游戏。在这款游戏中,你将扮演一名制作人,和四位各具特色的男主角展开一段浪漫之旅。游戏特色:真人配音,还原最真实的剧情体验。丰富的游戏剧情,跌宕起伏的情感故事,让你身临其境。完美还原了AR游戏的操作,让你更好地享受游戏乐趣。独具特色的游戏玩法让你更加深入了解男主角,体验不一样的恋爱。通过任务和活动赚取道具,使用道具提升男主角属性
519
2024-05-04
最强大脑3
《最强大脑3》是一款刺激有趣的智力竞技游戏,挑战你的大脑极限,展现你的智慧与技巧。在这个游戏中,玩家将面对各种脑力挑战,包括解密、推理、记忆等多种题材,让你的大脑得到全方位的锻炼。游戏特色:多样化的挑战题材,涵盖解密、推理、记忆等多个领域,保证你不会感到无聊。丰富的关卡设计,难度逐渐增加,挑战你的智商极限。多种游戏模式可供选择,单人挑战、多人对战,让你与好友一同比拼智商。精美的画面设计和音效,营造
869
2024-05-04
异尘:达米拉
《异尘:达米拉》游戏介绍《异尘:达米拉》是一款引人入胜的全3D异星轻科幻御宅塔防游戏。在这个游戏中,玩家将扮演阿图姆号的长官,肩负起延续人类希望的重任,带领一群充满朝气和活力的「新生」少女,踏上神秘的达米拉星,探索这颗绿色异星的一切。游戏以独特的科幻设定和精美的3D画面为玩家呈现了一个充满未知和挑战的异星世界。在这片神秘的土地上,玩家需要带领少女们建立坚固的防御工事,抵御来自异星的威胁,同时还需要
254
2024-05-03
少年西游记2
《少年西游记2》游戏介绍踏入《少年西游记2》的世界,就是踏入了一个瑰丽奇幻、充满东方韵味的工业朋克冒险之旅。这款游戏作为少年系卡牌的最新力作,将国潮元素与朋克风格完美融合,为玩家呈现出一个前所未有的西游世界。首先,游戏的画风独具匠心。设计师们巧妙地将传统的国画、版画技法与现代朋克元素相结合,使得每一个角色、每一个场景都充满了浓厚的东方韵味和前卫的朋克气息。玩家仿佛置身于一个融合了古典与现代、东方与
951
2024-05-03
24小时阅读排行榜
- 1 如何在可调整大小的文本元素中实现省略号截断?
- 2 diskmsg.dll - 什么是 diskmsg.dll?
- 3 dialupmanager.dll - 什么是 dialupmanager.dll?
- 4 diagrpt.dll - 什么是 diagrpt.dll?
- 5 为什么具有缓入缓出功能的 CSS 过渡在悬停时表现平稳,但在鼠标移开时表现突然?
- 6 dicrhash.dll - 什么是 dicrhash.dll?
- 7 Spring中如何将依赖注入到自实例化对象中?
- 8 为什么 PHP 在添加和连接整数时会回显“2”?
- 9 为什么我的 Java 应用程序使用 GMT 而不是操作系统时区,如何修复它?
- 10 如何在 Java 中有效 Ping HTTP URL:综合指南
- 11 为什么我的`std::fstream`创建文件失败?
- 12 如何使用“class”属性绑定到 UI5 XML 视图中的 CSS 类?
- 13 为什么局部变量的紧急恢复不会改变 Go 中的返回值?
- 14 digiconf.dll - 什么是 digiconf.dll?
- 15 如何从现有的 PHP 类生成 UML 图?
更多>
最新教程
-
- 国外Web开发全栈课程全集
- 1651 2024-04-24
-
- Go语言实战之 GraphQL
- 1924 2024-04-19
-
- 550W粉丝大佬手把手从零学JavaScript
- 3344 2024-04-18
-
- python大神Mosh,零基础小白6小时完全入门
- 2878 2024-04-10
-
- MySQL 初学入门(mosh老师)
- 1752 2024-04-07
-
- Mock.js | Axios.js | Json | Ajax--十天精品课堂
- 2564 2024-03-29
CSS3做的日食动画特效
新颖的CSS3日食动画效果
<风格>
html, 正文 {
宽度:100%;
溢出-x:隐藏;
}
*, *:之前, *:之后 {
框大小:边框框;
边距:0;
填充:0;
}
。宇宙 {### 宽度:100vw;
高度:100vh;
背景:#030613;
显示:块;
位置:相对;
-webkit-animation:skyDim 4s 8s 线性向前;
动画:skyDim 4s 8s 线性向前;
}
.universe:在{
之前 内容: ””;### 框阴影:10vw 1vh #fff、14vw 29vh 2px #FFF、23vw 34vh 1px #FFF、1vw 99vh 1px #FFF、20vw 80vh #FFF、90vw 10vh 2px #fff、55vw 9vh #FFF、24vw 4vh 1px #FFF,50vw 99vh 1px #FFF, 74vw 40vh 1px #FFF, 80vw 9vh 1px #FFF, 20vw 80vh #FFF, 85vw 78vh #fff;
宽度:4px;
高度:4px;
位置:绝对;
边界半径:50%;
-webkit-animation: starsFloating 100s -200s 线性既无限;
动画:星星浮动100s -200s 线性既无限;
}
.universe:{
之后 内容: ””;### 框阴影:37vw 78vh #fff、17vw 69vh #FFF、68vw 4vh 1px #FFF、98vw 9vh 1px #FFF、45vw 67vh #FFF、95vw 1vh 2px #fff、35vw 75vh 2px #FFF、44vw 47vh 1像素#FFF,54vw 5vh 1px #FFF, 22vw 29vh 1px #FFF, 39vw 71vh 1px #FFF, 11vw 11vh #FFF, 88vw 82vh #fff;
宽度:2px;
高度:2px;
位置:绝对;
边界半径:50%;
-webkit-animation: starsFloating 100s 3s 线性向后无限;
动画:starsFloating 100s 3s 线性向后无限;
}
。太阳 {### 高度:200px;
宽度:200px;
边界半径:50%;
背景:#cfcfd4;
框阴影:0 0 60px 金色,0 0 100px #b9a018,插图 0 5px 35px 53px #dbdbdb,插图 48px 8px 34px 25px #c4c4c4;
左:计算(50% - 100px);
顶部:计算(50% - 100px);
位置:绝对;
-webkit-animation:sunFreakOut 5s 7.1s 线性前进;
动画:sunFreakOut 5s 7.1s 线性前进;
}
。月亮 {### 高度:50px;
宽度:50px;
边界半径:50%;
背景:rgba(0,0,0,0.99);
框阴影:插图 5px 1px 10px -8px #d4d4d6;
-webkit-transition: 1s;
转换:1s;
顶部:计算(40% - 100px);
位置:绝对;
z 索引:5;
-webkit-animation:向前移动 20 秒的缓入缓出;
动画:向前移动 20 秒缓入缓出;
}
@-webkit-keyframes 移动 {
0% {
# -webkit-transform:translateX(100vw);
变换:translateX(100vw);
}
40%, 60% {
顶部:计算(50% - 100px);
}
50%, 50.5% {
宽度:200px;
高度:200px;
-webkit-transform:translateX(calc(50vw - 100px));
变换:translateX(calc(50vw - 100px));
框阴影:插图 20px 1px 35px -15px #d4d4d6;
顶部:计算(50% - 100px);
}
60% {
# 框阴影:插图 -20px 1px 35px -15px #d4d4d6;
}
100% {
# 宽度:50px;
高度:50px;
-webkit-transform:translateX(calc(-1vw - 60px));
变换:translateX(calc(-1vw - 60px));
顶部:计算(40% - 100px);
框阴影:插入 -5px 1px 10px -8px #d4d4d6;
}
}
@关键帧移动{
0% {
# -webkit-transform:translateX(100vw);
变换:translateX(100vw);
}
40%, 60% {
顶部:计算(50% - 100px);
}
50%, 50.5% {
宽度:200px;
高度:200px;
-webkit-transform:translateX(calc(50vw - 100px));
变换:translateX(calc(50vw - 100px));
框阴影:插图 20px 1px 35px -15px #d4d4d6;
顶部:计算(50% - 100px);
}
60% {
# 框阴影:插图 -20px 1px 35px -15px #d4d4d6;
}
100% {
# 宽度:50px;
高度:50px;
-webkit-transform:translateX(calc(-1vw - 60px));
变换:translateX(calc(-1vw - 60px));
顶部:计算(40% - 100px);
框阴影:插入 -5px 1px 10px -8px #d4d4d6;
}
}
@-webkit-keyframes skyDim {
0%, 100% {
背景:#030613;
}
50%, 70% {
背景:黑色;
}
}
@keyframes skyDim {
0%, 100% {
背景:#030613;
}
50%, 70% {
背景:黑色;
}
}
@-webkit-keyframes sunFreakOut {
0%, 100% {
框阴影:0 0 60px 金色,0 0 100px #b9a018,插图 0 5px 35px 53px #dbdbdb,插图 48px 8px 34px 25px #c4c4c4;
}
50%, 70% {
框阴影:0 0 50px #e30000,0 0 0px #b91818,插图 0 5px 35px 53px #dbdbdb,插图 48px 8px 34px 25px #c4c4c4;
}
}
@keyframes sunFreakOut {
0%, 100% {
框阴影:0 0 60px 金色,0 0 100px #b9a018,插图 0 5px 35px 53px #dbdbdb,插图 48px 8px 34px 25px #c4c4c4;
}
50%, 70% {
框阴影:0 0 50px #e30000,0 0 0px #b91818,插图 0 5px 35px 53px #dbdbdb,插图 48px 8px 34px 25px #c4c4c4;
}
}
@-webkit-keyframes starFloating {
0% {
# 不透明度:0;
}
10% {
# 不透明度:1;
}
100% {
# -webkit-transform: 翻译Y(-100vh);
变换:translateY(-100vh);
}
}
@keyframes starFloating {
0% {
# 不透明度:0;
}
10% {
# 不透明度:1;
}
100% {
# -webkit-transform: 翻译Y(-100vh);
变换:translateY(-100vh);
}
}
</风格>
</头>
<头>
<元字符集=“utf-8”>
<风格>
html, 正文 {
宽度:100%;
溢出-x:隐藏;
}
*, *:之前, *:之后 {
框大小:边框框;
边距:0;
填充:0;
}
。宇宙 {### 宽度:100vw;
高度:100vh;
背景:#030613;
显示:块;
位置:相对;
-webkit-animation:skyDim 4s 8s 线性向前;
动画:skyDim 4s 8s 线性向前;
}
.universe:在{
之前 内容: ””;### 框阴影:10vw 1vh #fff、14vw 29vh 2px #FFF、23vw 34vh 1px #FFF、1vw 99vh 1px #FFF、20vw 80vh #FFF、90vw 10vh 2px #fff、55vw 9vh #FFF、24vw 4vh 1px #FFF,50vw 99vh 1px #FFF, 74vw 40vh 1px #FFF, 80vw 9vh 1px #FFF, 20vw 80vh #FFF, 85vw 78vh #fff;
宽度:4px;
高度:4px;
位置:绝对;
边界半径:50%;
-webkit-animation: starsFloating 100s -200s 线性既无限;
动画:星星浮动100s -200s 线性既无限;
}
.universe:{
之后 内容: ””;### 框阴影:37vw 78vh #fff、17vw 69vh #FFF、68vw 4vh 1px #FFF、98vw 9vh 1px #FFF、45vw 67vh #FFF、95vw 1vh 2px #fff、35vw 75vh 2px #FFF、44vw 47vh 1像素#FFF,54vw 5vh 1px #FFF, 22vw 29vh 1px #FFF, 39vw 71vh 1px #FFF, 11vw 11vh #FFF, 88vw 82vh #fff;
宽度:2px;
高度:2px;
位置:绝对;
边界半径:50%;
-webkit-animation: starsFloating 100s 3s 线性向后无限;
动画:starsFloating 100s 3s 线性向后无限;
}
。太阳 {### 高度:200px;
宽度:200px;
边界半径:50%;
背景:#cfcfd4;
框阴影:0 0 60px 金色,0 0 100px #b9a018,插图 0 5px 35px 53px #dbdbdb,插图 48px 8px 34px 25px #c4c4c4;
左:计算(50% - 100px);
顶部:计算(50% - 100px);
位置:绝对;
-webkit-animation:sunFreakOut 5s 7.1s 线性前进;
动画:sunFreakOut 5s 7.1s 线性前进;
}
。月亮 {### 高度:50px;
宽度:50px;
边界半径:50%;
背景:rgba(0,0,0,0.99);
框阴影:插图 5px 1px 10px -8px #d4d4d6;
-webkit-transition: 1s;
转换:1s;
顶部:计算(40% - 100px);
位置:绝对;
z 索引:5;
-webkit-animation:向前移动 20 秒的缓入缓出;
动画:向前移动 20 秒缓入缓出;
}
@-webkit-keyframes 移动 {
0% {
# -webkit-transform:translateX(100vw);
变换:translateX(100vw);
}
40%, 60% {
顶部:计算(50% - 100px);
}
50%, 50.5% {
宽度:200px;
高度:200px;
-webkit-transform:translateX(calc(50vw - 100px));
变换:translateX(calc(50vw - 100px));
框阴影:插图 20px 1px 35px -15px #d4d4d6;
顶部:计算(50% - 100px);
}
60% {
# 框阴影:插图 -20px 1px 35px -15px #d4d4d6;
}
100% {
# 宽度:50px;
高度:50px;
-webkit-transform:translateX(calc(-1vw - 60px));
变换:translateX(calc(-1vw - 60px));
顶部:计算(40% - 100px);
框阴影:插入 -5px 1px 10px -8px #d4d4d6;
}
}
@关键帧移动{
0% {
# -webkit-transform:translateX(100vw);
变换:translateX(100vw);
}
40%, 60% {
顶部:计算(50% - 100px);
}
50%, 50.5% {
宽度:200px;
高度:200px;
-webkit-transform:translateX(calc(50vw - 100px));
变换:translateX(calc(50vw - 100px));
框阴影:插图 20px 1px 35px -15px #d4d4d6;
顶部:计算(50% - 100px);
}
60% {
# 框阴影:插图 -20px 1px 35px -15px #d4d4d6;
}
100% {
# 宽度:50px;
高度:50px;
-webkit-transform:translateX(calc(-1vw - 60px));
变换:translateX(calc(-1vw - 60px));
顶部:计算(40% - 100px);
框阴影:插入 -5px 1px 10px -8px #d4d4d6;
}
}
@-webkit-keyframes skyDim {
0%, 100% {
背景:#030613;
}
50%, 70% {
背景:黑色;
}
}
@keyframes skyDim {
0%, 100% {
背景:#030613;
}
50%, 70% {
背景:黑色;
}
}
@-webkit-keyframes sunFreakOut {
0%, 100% {
框阴影:0 0 60px 金色,0 0 100px #b9a018,插图 0 5px 35px 53px #dbdbdb,插图 48px 8px 34px 25px #c4c4c4;
}
50%, 70% {
框阴影:0 0 50px #e30000,0 0 0px #b91818,插图 0 5px 35px 53px #dbdbdb,插图 48px 8px 34px 25px #c4c4c4;
}
}
@keyframes sunFreakOut {
0%, 100% {
框阴影:0 0 60px 金色,0 0 100px #b9a018,插图 0 5px 35px 53px #dbdbdb,插图 48px 8px 34px 25px #c4c4c4;
}
50%, 70% {
框阴影:0 0 50px #e30000,0 0 0px #b91818,插图 0 5px 35px 53px #dbdbdb,插图 48px 8px 34px 25px #c4c4c4;
}
}
@-webkit-keyframes starFloating {
0% {
# 不透明度:0;
}
10% {
# 不透明度:1;
}
100% {
# -webkit-transform: 翻译Y(-100vh);
变换:translateY(-100vh);
}
}
@keyframes starFloating {
0% {
# 不透明度:0;
}
10% {
# 不透明度:1;
}
100% {
# -webkit-transform: 翻译Y(-100vh);
变换:translateY(-100vh);
}
}
</风格>
</头>
这是一款非常新颖的使用纯CSS3实现的一个天狗食月日食动画效果,当日全食时,还有背景星星闪烁动画效果,效果很漂亮
本站声明
本站所有资源均由网友贡献发布,或转载各大下载站。请自行检查软件的完整性!本网站所有资源仅供学习和参考。请勿用于商业用途,否则造成的一切后果由您自行负责!如有侵权,请联系我们删除下架。联系方式:admin@php.cn