TypechoJoeTheme

老狮的梦

统计
登录
用户名
密码
/
注册
用户名
邮箱
输入密码
确认密码
文章目录

七夕情人节,漂浮的粉红爱心

老狮博主
2019-08-04
/
0 评论
/
1,646 阅读
/
51 个字
/
百度已收录
08/04
本文最后更新于2020年01月19日,已超过893天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

还有三天就是一年一度的七夕情人节了,在即将满世界撒狗粮的日子来临之前,是不是将博客好好的装扮一下呢?!

效果

方法

<html lang="en" >
<head>
<style type="text/css">
.world {
  position: absolute;
  margin:auto;
  left:0;
  right:0;
  top:0px;
  bottom:0;
  width:800px;
  height:200px;
}
/* BASIC CUBE CREATION */
/* BASIC CUBE CREATION */
/* BASIC CUBE CREATION */

.box {
  position:absolute;
  margin:auto;
  left:0;
  right:0;
  top:0;
  bottom:0;
  width: 100px;
  height: 100px;
  animation: rotate 5s ease-in-out infinite;
  transform-style: preserve-3d;
}
.box:nth-of-type(1) {
  animation-delay:-5s;
  left:-600px;
}
.box:nth-of-type(2) {
  animation-delay:-4s;
  left:-300px;
}
.box:nth-of-type(3) {
  animation-delay:-3s;
  left:0px;
}
.box:nth-of-type(4) {
  animation-delay:-2s;
  left:300px;
}
.box:nth-of-type(5) {
  animation-delay:-1s;
  left:600px;
}
.plane1, .plane2 {
  position: absolute;
  opacity:0.8;
}
.plane2 {
  transform: rotateY(90deg);
}
.heart {
  background-color: pink;
  height: 50px;
  transform: rotate(-45deg);
  width: 50px;
}
.heart:before {
  content: "";
  background-color: pink;
  border-radius: 100%;
  height: 50px;
  position: absolute;
  width: 50px;
  top:-25px;
}
.heart:after {
  content: "";
  background-color: pink;
  border-radius: 100%;
  height: 50px;
  position: absolute;
  width: 50px;
  top:0px;
  left:25px;
}

/* Rotation animation to actually see the cube */

@keyframes rotate {
  0% {
    transform: rotateY(0deg) rotateZ(25deg) translateY(50px);
  }
  50% {
    transform: rotateY(270deg) rotateZ(25deg) translateY(-50px);
  }
  100% {
    transform: rotateY(360deg) rotateZ(25deg) translateY(50px);
  }
}
</style>
</head>
<body>

<div class="world">
  <div class="box">
    <div class="plane1">
      <div class="heart"></div>
    </div>
    <div class="plane2">
      <div class="heart"></div>
    </div>
  </div>
  <div class="box">
    <div class="plane1">
      <div class="heart"></div>
    </div>
    <div class="plane2">
      <div class="heart"></div>
    </div>
  </div>
  <div class="box">
    <div class="plane1">
      <div class="heart"></div>
    </div>
    <div class="plane2">
      <div class="heart"></div>
    </div>
  </div>
  <div class="box">
    <div class="plane1">
      <div class="heart"></div>
    </div>
    <div class="plane2">
      <div class="heart"></div>
    </div>
  </div>
  <div class="box">
    <div class="plane1">
      <div class="heart"></div>
    </div>
    <div class="plane2">
      <div class="heart"></div>
    </div>
  </div>
</div>
</body>
</html>
美化代码
朗读
赞(0)
赞赏
感谢您的支持,我会继续努力哒!
版权属于:

老狮的梦

本文链接:

https://laolion.com/archives/1165.html(转载时请注明本文出处及文章链接)

评论 (0)

互动读者

  • 八九闲逛

    评论 5 次 | 文章 0 篇

  • 老狮博主

    评论 5 次 | 文章 335 篇

  • aihe闲逛

    评论 3 次 | 文章 0 篇

  • 秋天笔记闲逛

    评论 3 次 | 文章 0 篇

标签云