我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛

Hello!掘金的小伙伴们大家好，我是 妖孽哪里逃 前端菜鸡,这是我的第一篇技术文章,坦白说我不知道如何编写;写得不好还请多多包涵 ;因为第一次弄以下素材包括上面动效视频链接花了好长时间才把本地的资源变成https链接的,以后就熟能生巧了点我预览整体动效

凭栏远望, 忽感苍茫感: 人生幸事, 莫过邀三五知己频湖小酌! 然人生漂泊, 兄弟散于江湖, 有心相聚, 无力相逢. 遥寄诸君,祈安康,愿顺达!

好啦!正文开始~

背景图星星闪烁的动态

这一步是亮点

这是实现背景图星星闪烁的动效代码;主要运用了背景图平铺然后都通过animation的动画剧本来实现动效(动画主要是靠移动背景图的位移) 使用了匀速和无线循环的属性

HTML代码
	<div class="stars"></div>
	<div class="twinkl"></div>
</div>
 CSS代码
.stars, .twinkl {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
.stars {
  background:#000 url("https://s3.bmp.ovh/imgs/2021/09/3760b5e2cc46f556.png") repeat top center;
  z-index:0;
.twinkl{
  background:transparent url("https://s3.bmp.ovh/imgs/2021/09/68c03ba1cf80ca8b.png") repeat top center;
  z-index:0;
  animation:move-twink-back 200s linear infinite;
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
那么在这里我们来简单介绍一animation的相关知识点;用这个属性的时候我总是将animation和transition搞错;animation是一个动画剧本过程;不需要触发条件;而transition是一个过渡动画需要触发条件;
animation 属性是一个简写属性，用于设置六个动画属性：
animation: name duration timing-function delay iteration-count direction;
transition 属性是一个简写属性，用于设置四个过渡属性：
transition: property duration timing-function delay;
此处没什么亮点只是单纯css画圆
HTML代码
<div class="moon"></div>
CSS代码
.moon { 
  position: absolute;
	top:60px;
	left:100px;
	right:0;
	bottom:0;
	width:100px;
	height:100px;
	border-radius:50%;	
	background:white;
	opacity:0.9;			
	box-shadow: 0px 0px 40px 15px white;
  z-index:1;
人物图及动效
这是我网上淘到的图片;现在找png图登山还难,本来是想找嫦娥月兔的结果不是png;就算是png也要钱;
此处也是运用来animation的动画剧本实现的,还运用了css的transform属性来控制位移配合动画实现
HTML代码
<div class="person">
        <img src="https://topics.gmw.cn/30708/img/daxia.png" alt="" />
CSS代码
@keyframes person {
    transform: translateX(-100px);
    opacity: 0;
  100% {
    transform: translateX(0px);
    opacity: 1;
.person {
  position: absolute;
  left: 100px;
  bottom: 40px;
  animation: person 3s;
在这里我们简单的来学习一下transform的相关知识点吧
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transform: none|transform-functions; 
此写法我也看不懂可以看我上面代码的例子,然后可以写单个属性值也可以写多个属性值
中秋节快乐字体动效
哈哈,自己画的没啥素材,有点丑别介意啊
这里的没啥知识点,该讲的上面都讲过了;运用了animation的动画剧本实现的,还运用了css的transform属性来控制位移以及缩放来配合实现动效
HTML代码
<div class="text">
        <div class="round-item">中</div>
        <div class="round-item">秋</div>
        <div class="round-item">节</div>
        <div class="round-item">快</div>
        <div class="round-item">乐</div>
      </div>
CSS代码    
@keyframes text {
    opacity: 0;
    transform: translateY(-100px);
  100% {
    opacity: 1;
     transform: translateY(0px);
@keyframes item {
    transform: translateY(100px);
  50%{
    transform: translateY(80px) scale(1.1);
  100% {
    transform: translateY(100px);
.text {
  position: relative;
  left:  35% ;
  top: 20%;
  animation: text 3s;
.round-item {
  position: absolute;
  top: 20%;
  left: 0;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  color:#fff;
  border-radius: 50px;
  background-color: rgb(253, 197, 44);
  box-shadow: 0px 6px 20px 15px rgba(250, 253, 44, 0.2);
  animation: item 2s infinite;
.round-item:nth-child(2){
  top:20%;
  left: 10%;
.round-item:nth-child(3){
   left: 20%;
.round-item:nth-child(4){
   left: 30%;
.round-item:nth-child(5){
   left: 40%;
.round-item:nth-child(6){
   left: 50%;
关于中秋的一首诗
来来附上一首诗来扣题了,再次强调一下我正在参加中秋创意投稿大赛，详情请看：[中秋创意投稿大赛]
这里的运用跟上面的一样大同小异,要说有啥不一样的就是多用了个animation的延迟属性来控制我的诗句单句动画
HTML代码
 <div class="content">
        <p>白居易《八月十五日夜湓亭望月》</p>
        <p>昔年八月十五夜，曲江池畔杏园边。</p>
        <p>今年八月十五夜，湓浦沙头水馆前。</p>
        <p>西北望乡何处是，东南见月几回圆。</p>
        <p>昨风一吹无人会，今夜清光似往年。</p>
      </div>
 CSS代码 
 @keyframes content {
    transform: translateY(100px);
    opacity: 0;
  100% {
    transform: translateY(0);
    opacity: 1;
.content {
  width: 500px;
  height: 400px;
  position: absolute;
  right: 20%;
  bottom: 30px;
  animation: content 1s;
  overflow: hidden;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  line-height: 40px;
  border-radius: 4px;
  margin-bottom: 20px;
p:first-child {
  font-size: 30px;
  color: #fff;
  margin-bottom: 30px;
  animation: content 1s 5s;
p:nth-child(2) {
  animation: content 1s 4s;
p:nth-child(3) {
  animation: content 1s 3s;
p:nth-child(4) {
  animation: content 1s 2s;
p:nth-child(5) {
  animation: content 1s 1s;
好了到这来就完成了整个动画的效果;如果你能看到这里,那么说明你是一个有耐心的人;谢谢你的阅读
风柔雨润花好月圆，幸福生活好甜！冬去春来似水如烟，一年中秋在眼前！流年不复返，人生须尽欢。中秋快乐！
    摸鱼小公举
        前端搬砖 @深圳某小型公司