示例

HTML

.world.sunset.sun.bg- for (i = 0; i < 6; i++).wave.sea.sky.horizon.line.-left.line.-right- for (i = 0; i < 20; i++).birdposition.bird.wing.-left.wing.-right

CSS

body {background: #fff;height: 100vh;overflow: hidden;display: flex;justify-content: center;align-items: center;
}div {transform-style: preserve-3d;
}.world {perspective: 600px;
}.sun {position: absolute;top: calc(50% + 40px);left: calc(50% - 50px);width: 100px;height: 55px;border-radius: 100px 100px 0 0;background: linear-gradient(0deg, rgba(white, 0.3) 0%, rgba(white, 1) 100%);z-index: 999;filter: blur(4px) contrast(2);
}.bg {position: absolute;top: calc(50% - 150px);left: calc(50% - 400px);width: 800px;height: 300px;background: yellow;filter: blur(5px) contrast(100);
}.wave {position: absolute;top: calc(50% + 87px);left: calc(50% - 60px);width: 120px;height: 12px;background: #fff;border-radius: 100%;&:not(:first-child) {animation: wave 2000ms infinite linear;    }&:nth-child(2) {animation-delay: -500ms;}&:nth-child(3) {animation-delay: -1000ms;}&:nth-child(4) {animation-delay: -1500ms;}&:nth-child(5) {animation-delay: -1500ms;}&:nth-child(6) {animation-delay: -2000ms;}
}@keyframes wave {0% {transform: translateY(0) sclae(1) rotateZ(0);}50% {transform: translateY(40px) scale(0.5) rotateZ(5deg);}100% {transform: translateY(30px) scale(0) rotateZ(-40deg);}
}.sea {position: absolute;top: calc(50% + 80px);left: calc(50% - 400px);width: 800px;height: 70px;background: rgba(blue, 0.5);background: radial-gradient(ellipse at top, rgba(white, 1) 0%, rgba(gold, 0.1) 10%, rgba(chocolate, 1) 100%);
}.sky {position: absolute;top: calc(50% - 150px);left: calc(50% - 400px);width: 800px;height: 240px;background: rgba(blue, 0.5);background: radial-gradient(ellipse at bottom, rgba(yellow, 1) 0%, rgba(khaki, 1) 15%, rgba(orange, 1) 100%);
}.horizon {position: absolute;top: 50%;width: 800px;height: 200px;border-radius: 100%;background: radial-gradient(ellipse at center, rgba(white, 0.4) 0%, rgba(white, 0) 70%);filter: blur(10px);
}.sunset {position: relative;width: 800px;height: 300px;overflow: hidden;border-radius: 7px;
}.line {position: absolute;top: calc(50%);left: calc(50% - 7px);width: 14px;height: calc(300px * 0.5);background: white;&.-left {transform: translateZ(300px) translateX(-70px) translateY(-50%);}&.-right {transform: translateZ(300px) translateX(70px) translateY(-50%);}
}.birdposition {position: absolute;top: calc(50% + 60px);left: calc(50% - 40px);@for $i from 0 through 100 {&:nth-of-type(#{$i}) {transform: translate(random(600) - 300px, random(200) - 150px) rotateZ(random(40) - 20deg);.bird {animation-duration: random(10000) + 5000ms;animation-delay: random(20000) * -1ms;$wingDelay: random(20000) * -1ms;.wing {animation-delay: $wingDelay;}}}}
}.bird {position: absolute;width: 80px;animation: fly 8s linear infinite;.wing {position: absolute;width: 50%;height: 20px;border-top: 4px solid black;border-radius: 100%;&.-left {transform-origin: 100% 50%;animation: wingLeft 0.8s cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite alternate;}&.-right {right: 0;transform-origin: 0 50%;animation: wingRight 0.8s cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite alternate;}}
}@keyframes fly {0% {opacity: 0;transform: translateZ(500px);}20% {opacity: 1;transform: translateZ(400px);}100% {transform: translateZ(0px) scale(0);}
}@keyframes wingLeft {0% {transform: rotateZ(30deg);}100% {transform: rotateZ(-20deg);}
}@keyframes wingRight {0% {transform: rotateZ(-30deg);}100% {transform: rotateZ(20deg);}
}

落日海鸥（Seagulls）相关推荐

电磁场与电磁波_您的大脑在电磁场上
电磁场与电磁波 We all simultaneously occupy the space above a giant celestial generator. In its outer core, ...
【运筹优化】SOA海鸥优化算法求解无约束多元函数最值(Java代码实现)
文章目录前言优化目标求解结果搜索过程可视化 Java算法代码可视化代码前言本文以求解二元函数最小值为例,如果需要求解多元函数,只需要修改以下变量即可: varNum:变量维度数 ub和l ...
F1.4大光圈专业相机-海鸥CF100
海鸥作为大家熟知的国内光学品牌,最为人津京乐道的应该就是胶片时代的双反相机以及单反相机.而重新回归到数码时代的海鸥,就给我们带来CF100这款注重性能的紧凑型便携相机,的确让我们眼前一亮. 有人说是松 ...
远去的背影与落日以及一对蒙古年轻夫妻
辉腾锡勒.早晨.阳光穿过栅栏,送走一个远去的背影. 骑马而去的背影使我的相机无法捕捉她真实的影象,那个地平线后面是什么? 鄂尔多斯.远去的背影,逐渐模糊,只有如往事的沙痕凝固且越来越清晰.我知道,在这 ...
上海鸥新：基于大数据的商场实时客流分析系统
公司介绍上海鸥新软件有限公司专注于室内定位技术和客流统计与分析的研发,如室内定位引擎.客流统计与分析系统.在用户导入客流系统的同时,为商业零售实体店提供了网络覆盖.微信上网,定时定地点向客户进行精准 ...
智能优化算法：海鸥算法原理及Matlab代码
智能优化算法:海鸥算法原理及Matlab代码文章导航 1. 算法原理 2. SOA算法流程 2.1 迁徙行为(exploration ability) 2.2 攻击行为(exploitation a ...
【智能优化算法】基于融合改进 Logistics 混沌和正弦余弦算子的自适应 t 分布海鸥算法求解单目标优化问题附matlab代码
1 简介针对基本海鸥算法存在的缺陷,提出一种融合改进Logistics混沌和正弦余弦算子的自适应t分布海鸥算法(ISOA).首先,采用改进Logistics混沌映射初始化种群,使海鸥更加均匀地分布于 ...
Gym 101350E Competitive Seagulls
题目大意: 两只海鸥轮流将白方格涂黑,每次能图连续的P个方格,谁涂最后一个就赢.P应满足: (1),L为当前最长的连续白色方格个数. (2)若P能去素数,则P只能取素数:否则取1. 现在输入开 ...
GYM 101350E. Competitive Seagulls （博弈
E. Competitive Seagulls 题目描述 There are two seagulls playing a very peculiar game. First they line up ...

落日海鸥（Seagulls）

落日海鸥

示例

HTML

CSS

落日海鸥（Seagulls）相关推荐

最新文章

热门文章