马黑黑 发表于 2021-12-31 21:08

夜空中最亮的星怎么没出现

<style type="text/css">

.fSet {
        color:#eee;
        font-family:'微软雅黑','宋体','新宋体';
        font-size:40px;
        font-weight:bold;
        line-height:100px;
        text-align:center;
        border-radius:50%;
        text-shadow:1px 1px #000,1px 1px #111,1px 1px #222,1px 1px #333,1px 1px #444,1px 1px #555;
        position:absolute;
        left:0px;
        top:0px;
}

.iMov {
        width:100px;
        height:100px;
        background:red;
        animation:iGo linear 10s infinite;
}

.hMov {
        width:100px;
        height:100px;
        background:darkred;
        animation:iGo linear 12s infinite;
}

.yMov {
        width:100px;
        height:100px;
        background:green;
        animation:yGo linear 10s infinite;
}

.sMov {
        width:100px;
        height:100px;
        background:coral;
        animation:yGo linear 15s infinite;
}

@keyframes iGo { /* 顺时针路线 */
        0%,100%        { transform:translate(calc(50vw - 120px),0px); }
        25%        { transform:translate(calc(100vw - 120px),calc(50vh - 100px)); }
        50%        { transform:translate(calc(50vw - 120px),calc(100vh - 120px)); }
        75%        { transform:translate(0px,calc(50vh - 120px)); }
}

@keyframes yGo { /* 逆时针路线 */
        0%,100%        { left:calc(50vw - 120px); top:0px; }
        25%        { left:0px; top:calc(50vh - 120px); }
        50%        { left:calc(50vw - 120px); top:calc(100vh - 120px); }
        75%        { left:calc(100vw - 120px); top:calc(50vh - 120px); }
}

</style>

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86" src="https://music.163.com/outchain/player?type=2&amp;id=1877043016&amp;auto=1&amp;height=66"></iframe>
<div class="fSet yMov">圆</div>
<div class="fSet sMov">蛋</div>
<div class="fSet iMov">快</div>
<div class=" fSet hMov">乐</div>

马黑黑 发表于 2021-12-31 21:09

代码分享：

<style type="text/css">

.fSet {
      color:#eee;
      font-family:'微软雅黑','宋体','新宋体';
      font-size:40px;
      font-weight:bold;
      line-height:100px;
      text-align:center;
      border-radius:50%;
      text-shadow:1px 1px #000,1px 1px #111,1px 1px #222,1px 1px #333,1px 1px #444,1px 1px #555;
      position:absolute;
      left:0px;
      top:0px;
}

.iMov {
      width:100px;
      height:100px;
      background:red;
      animation:iGo linear 10s infinite;
}

.hMov {
      width:100px;
      height:100px;
      background:darkred;
      animation:iGo linear 12s infinite;
}

.yMov {
      width:100px;
      height:100px;
      background:green;
      animation:yGo linear 10s infinite;
}

.sMov {
      width:100px;
      height:100px;
      background:coral;
      animation:yGo linear 15s infinite;
}

@keyframes iGo { /* 顺时针路线 */
      0%,100%      { transform:translate(calc(50vw - 120px),0px); }
      25%      { transform:translate(calc(100vw - 120px),calc(50vh - 100px)); }
      50%      { transform:translate(calc(50vw - 120px),calc(100vh - 120px)); }
      75%      { transform:translate(0px,calc(50vh - 120px)); }
}

@keyframes yGo { /* 逆时针路线 */
      0%,100%      { left:calc(50vw - 120px); top:0px; }
      25%      { left:0px; top:calc(50vh - 120px); }
      50%      { left:calc(50vw - 120px); top:calc(100vh - 120px); }
      75%      { left:calc(100vw - 120px); top:calc(50vh - 120px); }
}

</style>

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=1877043016&auto=1&height=66"></iframe>
<div class="fSet yMov">圆</div>
<div class="fSet sMov">蛋</div>
<div class="fSet iMov">快</div>
<div class="fSet hMov">乐</div>

马黑黑 发表于 2021-12-31 21:13

效果并不炫酷，只是演示一下多个元素的动画效果。效果仅在本页顶端演示。

加林森 发表于 2021-12-31 21:15

向老黑学习！谢谢啊！{:4_178:}

马黑黑 发表于 2021-12-31 21:16

新知识点：文本在一个容器中的垂直居中——line-height

语法：line-height: 高度值

例：      line-height:100px;

当高度值等于容器高度时，文本垂直居中

马黑黑 发表于 2021-12-31 21:18

5楼原理解释：

line=height 就是行高，行高等于容器高度，文本自然就会垂直居中

大猫咪 发表于 2021-12-31 21:18

好神奇{:4_170:}好多蛋在飞， 猫也来学习！

祝老黑新年快乐，幸福安康！

{:4_204:}{:4_190:}

马黑黑 发表于 2021-12-31 21:18

加林森 发表于 2021-12-31 21:15
向老黑学习！谢谢啊！

客气

马黑黑 发表于 2021-12-31 21:18

大猫咪 发表于 2021-12-31 21:18
好神奇好多蛋在飞， 猫也来学习！

祝老黑新年快乐，幸福安康！

猫小年好 {:4_187:}

杨柳青 发表于 2021-12-31 21:22

看到四颗星在晃来晃去~~~{:4_173:}

马黑黑 发表于 2021-12-31 21:29

杨柳青 发表于 2021-12-31 21:22
看到四颗星在晃来晃去~~~

没有最亮的星

加林森 发表于 2021-12-31 21:30

老黑新年快乐！{:4_191:}

马黑黑 发表于 2021-12-31 21:31

加林森 发表于 2021-12-31 21:30
老黑新年快乐！

{:4_191:}

加林森 发表于 2021-12-31 21:34

马黑黑 发表于 2021-12-31 21:31


吃好喝好！{:4_191:}

马黑黑 发表于 2021-12-31 21:35

加林森 发表于 2021-12-31 21:34
吃好喝好！

这个必须的

加林森 发表于 2021-12-31 21:39

马黑黑 发表于 2021-12-31 21:35
这个必须的

就是就是，必须的！

来看你 发表于 2021-12-31 21:40

满坛的快乐 {:4_199:}

千羽 发表于 2021-12-31 22:15

马黑黑 发表于 2021-12-31 21:13
效果并不炫酷，只是演示一下多个元素的动画效果。效果仅在本页顶端演示。

黑黑你有遮罩动画代码吗？

红影 发表于 2021-12-31 22:22

这个太厉害了，这么多闪耀星星在飞舞。太美了，黑黑就是星空中最亮的那颗星{:4_199:}

马黑黑 发表于 2021-12-31 22:23

来看你 发表于 2021-12-31 21:40
满坛的快乐

蟹蟹来看我
页: [1] 2 3
查看完整版本: 夜空中最亮的星怎么没出现