为了这个中秋创意我觉得我自己也是绞尽脑汁了,看到那个中秋创意的选题,我瞧了瞧Python 画图,不会,又看爬虫,行不通(乱爬听说会被邀请喝咖啡),前端页面制作,我都没写过几个😂,越看越难受啊,就没啥能和我扯上关系的。 最后实在无路可走了,老老实实复习CSS动画,一下一下的调,色彩搭配,翻各种网站。做完还是让人蛮开心的😀
最后成果如下图:
这个简单的页面在很大程度上还是还原了我内心的想法,有些创意点没法实现,百度都不知道搜啥关键词😂,不足之处就是在于夜空的配色调不出来自己满意的。
代码演示可以查看我的CodePen:CSS嫦娥奔月
页面结构主体大概就分为以下几点:
清楚构思之后,就特别简单了。
HTML非常简单,就是三个div
搭配一张一张图片。
<div class="container">
<div class="moon"></div>
<div class="change">
<img src="10.png" class="ico" style="border: none; width: 50px;height: 50px;">
</div>
</div>
主要是背景颜色难调,一开始拿qq截图去那种星空照片上取色,拿到的结果都是不尽人意,也看了不少色彩搭配网站,但是都没有找到一种合适的色调。
这最后的背景色,是慢慢调出来的,说多了都是泪。前端也是真的是不容易啊。
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100vw;
height: 100vh;
background-color: #01050D;
}
月亮的动画做的蛮简单的,调成那么多帧是为了看起来更加平缓一下。也是一样心中美丽的颜色调不出来,最后就拿了这个色。 脑海中原本想的能够做出一点点偏蓝又偏银白色的那种色调的,还希望能够作出纹理,但是学艺不精,还是没有能够做成啊。
.moon {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(219, 207, 175);
box-shadow: 0 0 60px #F5FFFA;
position: absolute;
left: 80%;
top: 140px;
animation: myMoon 3s linear;
}
@keyframes myMoon {
0% {
left: 78%;
top: 130px;
opacity: 0;
}
10% {
left: 78.2%;
top: 131px;
opacity: 0.1;
}
20% {
left: 78.4%;
top: 132px;
opacity: 0.2;
}
30% {
left: 78.6%;
top: 133px;
opacity: 0.3;
}
40% {
left: 78.8%;
top: 134px;
opacity: 0.4;
}
50% {
left: 79%;
top: 135px;
opacity: 0.5;
}
60% {
left: 79.2%;
top: 136px;
opacity: 0.6;
}
70% {
left: 79.4%;
top: 137px;
opacity: 0.7;
}
80% {
left: 79.6%;
top: 138px;
opacity: 0.8;
}
90% {
left: 79.8%;
top: 139px;
opacity: 0.9;
}
100% {
left: 80%;
top: 140px;
opacity: 1;
}
}
生成是拿简单的javascript
代码生成的,重点主要是在于CSS
的动画代码上。
<script>
//随机生成流星
for (var i = 0; i < 20; i++) {
var lx = document.createElement('div')
lx.className = 'meteor'
lx.style.right = (Math.random() * 400 + 150) + 'px'
lx.style.top = (Math.random() * 200 + 100) + 'px'
lx.style.animationDelay = Math.random() * 3 * i + 's' //添加动画延迟时间
document.body.appendChild(lx)
}
</script>
动画效果
流星的CSS
代码
.meteor {
width: 1px;
display: block;
position: absolute;
background-color: transparent transparent transparent rgba(255, 255, 255, .5);
opacity: 0;
animation: meteor 4s linear infinite;
}
.meteor::after {
content: '';
display: block;
border: 1px solid #fff;
border-width: 0px 90px 2px 90px;
border-color: transparent transparent transparent rgba(255, 255, 255, .5);
transform: rotate(-45deg);
}
@keyframes meteor {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(-500px, 300px);
}
}
同上哈。
<script>
var width = document.body.clientWidth - 20;
var height = document.body.clientHeight - 20;
//随机生成星星
for (var i = 0; i < 30; i++) {
var img = document.createElement('div')
img.className = 'star'
img.style.left = Math.random() * width + 'px'
img.style.top = Math.random() * height + 'px'
img.style.animationDelay = Math.random() * 3 * i + 's' //添加动画延迟时间
document.body.appendChild(img)
}
</script>
一样的哈。😁
.star {
position: absolute;
}
.star::before {
content: "★";
display: block;
position: absolute;
left: 10px;
top: 20px;
width: auto;
height: auto;
color: #fff;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
-webkit-animation: 1s starlight linear infinite;
-moz-animation: 1s starlight linear infinite;
animation: 1s starlight linear infinite;
-webkit-animation-fill-mode: forwards -moz-animation-fill-mode forwards animation-fill-mode forwards
}
.star::after {
content: "★";
display: block;
position: absolute;
left: 40px;
top: 120px;
width: auto;
height: auto;
color: #fff;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
-webkit-animation: 2s starlight linear infinite;
-moz-animation: 2s starlight linear infinite;
animation: 2s starlight linear infinite;
}
@-webkit-keyframes starlight {
0% {
-webkit-transform: scale(0.5);
}
50% {
-webkit-transform: scale(0.3);
}
100% {
-webkit-transform: scale(0.1);
}
}
@-moz-keyframes starlight {
0% {
-moz-transform: scale(0.5);
}
50% {
-moz-transform: scale(0.3);
}
100% {
-moz-transform: scale(0.1);
}
}
@keyframes starlight {
0% {
opacity: 0;
transform: scale(0.5);
}
50% {
opacity: 0.4;
transform: scale(0.3);
}
100% {
opacity: 0;
transform: scale(0.1);
}
}
这个嫦娥动画可能是写的最简单的了吧,原本心里还有些创意,但是不太会,实现不出来啦。
只能留在下周了,下次去请教一些大佬,帮我实现一下心里的想法。
.change {
width: 50px;
height: 50px;
border: none;
position: absolute;
left: 81.8%;
top: 169px;
animation: myChange 8s linear;
}
@keyframes myChange {
0% {
left: 41.8%;
top: 669px;
opacity: 0;
}
1% {
left: 42.8%;
top: 629px;
opacity: 0;
}
10% {
left: 45.8%;
top: 619px;
opacity: 0.1;
}
20% {
left: 49.8%;
top: 569px;
opacity: 0.2;
}
30% {
left: 53.8%;
top: 519px;
opacity: 0.3;
}
40% {
left: 57.8%;
top: 469px;
opacity: 0.4;
}
50% {
left: 61.8%;
top: 419px;
opacity: 0.5;
}
60% {
left: 65.8%;
top: 369px;
opacity: 0.6;
}
70% {
left: 69.8%;
top: 319px;
opacity: 0.7;
}
80% {
left: 73.8%;
top: 269px;
opacity: 0.8;
}
90% {
left: 77.8%;
top: 219px;
opacity: 0.9;
}
100% {
left: 81.8%;
top: 169px;
opacity: 1;
}
}
嫦娥所用的小图片:
这个小小的嫦娥奔月尽管内容不多,但因为我根本没怎么花过心思在前端上,所以很多东西都是边查边写的。
在这里我把用到的一些工具分享给大家哈😁
RGB颜色值和十六进制颜色码互转 A Single Div 一个富有创意的div项目
Palettes | Flat UI Colors 🎨 280 handpicked colors ready for COPY & PASTE 配色搭配
Paletton - The Color Scheme Designer
补充:SVG画完按CTRL+U
即查看路径
我最喜欢逛的是seeseed
,我平常找图、字体、配色、工具、灵感,很多时候也会来这里逛逛,审美很舒服,也没有广告,推荐的网站或者社区,有些不是国内的,可能需要访问国外网站才能访问。