艰难学习codepen之landscape

最新推荐文章于 2021-06-03 01:48:06 发布

我怎么就吃不饱

最新推荐文章于 2021-06-03 01:48:06 发布

阅读量375

点赞数

分类专栏： codepen 文章标签： css3

本文链接：https://blog.csdn.net/weixin_46727994/article/details/109551784

版权

codepen 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

学习自codepen
大概就是css画图学习
html部分

  <div class="container">
      <div class="disc-1"></div>
      <div class="disc-2"></div>
      <div class="disc-3"></div>
      <div class="landscape-1"></div>
      <div class="landscape-2"></div>
      <div class="landscape-3"></div>
      <div class="landscape-4"></div>
      <div class="landscape-5"></div>
      <div class="tree-1"></div>
      <div class="tree-2"></div>
      <div class="tree-3"></div>
      <div class="tree-4"></div>
      <div class="tree-5"></div>
      <div class="tree-5"></div>
      <div class="tree-7"></div>
      <div class="baloon_container">
        <div class="baloon">
          <span id="span1"></span>
          <span id="span2"></span>
          <span id="span3"></span>
        </div>
      </div>
    </div>

分解
在这里插入图片描述
css部分
背景部分

*{
  padding: 0;
  margin: 0;
 // box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式。
// content-box：指定盒模型为 W3C 标准模型，设置 border、padding 会增加元素 width与 height 的尺寸，即 border 与 padding 相当于是元素的“殖民地”，元素的“土地”、尺寸会增加，为向外延伸。
//border-box：指定盒模型为 IE模型（怪异模式），设置 border、padding 不会影响元素 width 与 height 的尺寸，即 border 与 padding 由元素已设空间转变。即空间还是这个空间，只是将部分空余的地方，转变成了其他空间用法而已，为内部转变。
  box-sizing: border-box;
}
body{
  height: 100vh;
  background-color: #1F5372 ;
  //flex布局
  display: flex;
  //主轴对齐方式
  justify-content: center;
  //align-items属性定义了项目在交叉轴上的对齐方式
  align-items: center;
}

在这里插入图片描述
设置两次阴影
box-shadow属性接收一个由5个参数组成的值，每个值的意思如下：

h-shadow: 水平阴影的位置。左负右正
v-shadow:垂直阴影的位置。正下负上
blur：模糊距离
spread：阴影的尺寸
color：阴影的颜色

.container {
.container {
  width: 160px;
  height: 335px;
  position: relative;
  /* 渐变框 */
  /* 100% 颜色序列的颜色位置，取值可以在区间 [0%, 100%] 之内，也可以在其之外 */
  background: linear-gradient(to bottom, #133c55 0%, #59a5d8 70%, #84d2f6 100%);
  /* 阴影 */
  /* css3多重阴影 */
  /* 实线边框   box-shadow: 0 0 0 10px #D73C51, */
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(100, 0, 0, 0.9);
  border-radius: 100px;
  overflow: hidden;
}

在这里插入图片描述
加入圆圈


.disc-1 {
  position: absolute;
  //上边缘起始点
  top: 37%;
  left: -4%;
  width: 170px;
  height: 170px;
  background: #ffd6d6;
  opacity: 0.2;
  border-radius: 50%;
  /* 动画 */
  animation: glow infinite 2s;
  animation-fill-mode: both;
  animation-direction: alternate;
}

.disc-2 {
  position: absolute;
  top: 45%;
  left: 10%;
  width: 130px;
  height: 130px;
  background: #FFDED6;
  opacity: .4;
  border-radius: 50% ;
  animation: glow infinite 2s;
  animation-fill-mode: both;
  animation-direction: alternate;
}
.disc-3 {
  position: absolute;
  top: 50%;
  left: 20%;
  width: 100px;
  height: 100px;
  border-radius: 50% ;
  background: #FEE7DB;
  opacity: .6;
  animation: glow infinite 2s;
  animation-fill-mode: both;
  animation-direction: alternate;
}

在这里插入图片描述

.landscape-1{
  position: absolute;
  bottom: 40px;
  left: 0px;
  width: 200px;
  height: 60px;
  background-color: #B7D9E2;
  /* transform: rotate(-8deg); */
}

加方块做土地
在这里插入图片描述
旋转


.landscape-1{
  position: absolute;
  bottom: 40px;
  left: 0px;
  width: 200px;
  height: 60px;
  background-color: #B7D9E2;
  transform: rotate(-8deg);
}

.landscape-2{
  position: absolute;
  bottom: 30px;
  left: -10px;
  width: 200px;
  height: 60px;
  background-color: #86B6C6;
  transform: rotate(8deg);
}
.landscape-3{
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 200px;
  height: 60px;
  background-color: #5C93AA;
  transform: rotate(-8deg);
}
.landscape-4{
  position: absolute;
  bottom: 0px;
  left: -10px;
  width: 200px;
  height: 60px;
  background-color: #3A728E;
  transform: rotate(2deg);
}
  
.landscape-5{
  position: absolute;
  bottom: -20px;
  left: -10px;
  width: 200px;
  height: 60px;
  background-color: #1F5372;
  transform: rotate(-8deg);
}

在这里插入图片描述
tips css3图片裁剪

clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);

在这里插入图片描述


.tree-1{
  position: absolute;
  top: 69%;
  left: 30%;
  height: 15px;
  width: 20px;
  background-color:#59A5D8 ;
  /* 图片裁剪 polygon六边形*/
  clip-path: polygon(50% 0%, 22% 100%, 75% 100%);
  box-shadow: 2px 0 2px 4px rgba(0,0,0,.1);
}
.tree-2{
  position: absolute;
  top: 66%;
  left: 80%;
  height: 15px;
  width: 13px;
  background-color: #59A5D8;
  clip-path: polygon(50% 0%, 22% 100%, 75% 100%);
  box-shadow: 2px 0 2px 4px rgba(0,0,0,.1);
}
.tree-3{
  position: absolute;
  top: 70%;
  left: 10%;
  height: 20px;
  width: 18px;
  background-color: #386FA4;
  clip-path: polygon(50% 0%, 22% 100%, 75% 100%);
  box-shadow: 2px 0 2px 4px rgba(0,0,0,.1);
}
.tree-4{
  position: absolute;
  top: 70%;
  left: 60%;
  height: 20px;
  width: 15px;
  background-color:#386FA4 ;
  clip-path: polygon(50% 0%, 22% 100%, 75% 100%);
  box-shadow: 2px 0 2px 4px rgba(0,0,0,.1);
}
.tree-5{
  position: absolute;
  top: 69%;
  left: 80%;
  height: 30px;
  width: 25px;
  background-color: #133C55;
  clip-path: polygon(50% 0%, 22% 100%, 75% 100%);
  box-shadow: 2px 0 2px 4px rgba(0,0,0,.1);
}
  
.tree-6{
  position: absolute;
  top: 74%;
  left: 15%;
  height: 40px;
  width: 35px;
  background-color: #133C55;
  clip-path: polygon(50% 0%, 22% 100%, 75% 100%);
  box-shadow: 2px 0 2px 4px rgba(0,0,0,.1);
}
.tree-7{
  position: absolute;
  top: 72%;
  left: 42%;
  height: 35px;
  width: 25px;
  background-color: #133C55;
  clip-path: polygon(50% 0%, 22% 100%, 75% 100%);
  box-shadow: 2px 0 2px 4px rgba(0,0,0,.1);
}

在这里插入图片描述

.baloon{
  position: absolute;
  top: 5%;
  left: 20%;
  width: 35px;
  height: 35px;
  background: linear-gradient(5deg, #86B6C6,#5C93AA);
 
  border-bottom-left-radius: 425%;
  border-bottom-right-radius: 425%;
  border-top-left-radius: 425%;
  /* border-top-radius: 220%; */
   /* transform: rotate(135deg); */
  z-index: 2;
  
}

在这里插入图片描述

transform: rotate(135deg);

tip

display:block就是将元素显示为块级元素.

新行开始、可控制高度
div, p, h1, form, ul 和 li是块元素的例子

display:inline就是将元素显示为行内元素.

与其他元素在一行
高，行高及顶和底边距不可改变；
span,a, label, input, img, strong和em是inline元素的例子

display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，答应空格。可以实现类似浮动效果

应用此特性的元素呈现为内联对象，四周元素保持在同一行，但可以设置宽度和高度地块元素的属性
inline、block切换 1、让一个inline元素从新行开始； 2、让块元素和其他元素保持在一行上； 3、控制inline元素的宽度（对导航条非凡有用）； 4、控制inline元素的高度；
5、无须设定宽度即可为一个块元素设定与文字同宽的背景色。

<div class="parents">
      <div class="red">1</div>
      <div class="black">2</div>
      <div class="pink">3</div>
    </div>

float:left

在这里插入图片描述
别扭的浮动

粉色仍为block，red和black换成display:inline，不再单独起新行，高宽无效

全部改为inline-blcok，出现浮动效果

关于中间的空行解决

a.上面可以看到用了display:inline-block后，存在间隙问题，间隙为4像素，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。

b.去除空隙的方法：对父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙

父元素的字体回车会引起空格，直接全为零font-size: 0px;

 .parents {
      width: 200px;
      height: 200px;
      font-size: 0px;
      border: 1px solid yellow;
    }

display：inline-block的布局方式和浮动的布局方式，究竟使用哪个，我觉得应该根据实际情况来决定的：
　　a.对于横向排列东西来说，我更倾向与使用inline-block来布局，因为这样清晰，也不用再像浮动那样清除浮动，害怕布局混乱等等。
　　b.对于浮动布局就用于需要文字环绕的时候，毕竟这才是浮动真正的用武之地，水平排列的是就交给inline-block了

不同大小下的水平浮动
在这里插入图片描述
浮动会被挡住，inline-block可以水平

艰难的block、inline、inline-block之后


.baloon {
  position: absolute;
  top: 5%;
  left: 20%;
  width: 35px;
  height: 35px;
  background: linear-gradient(5deg, #86b6c6, #5c93aa);

  border-bottom-left-radius: 425%;
  border-bottom-right-radius: 425%;
  border-top-left-radius: 425%;
  /* border-top-radius: 220%; */
  transform: rotate(135deg);
  /* z-index: 2; */
}

/* 父元素转子元素也转 */
#span1 {
  position: relative;
  top: -27%;
  left: 86%;
  /* background-color: red; */
  /* 内联元素inline要靠内容撑起来 */
  display: inline-block;
  /* 设置元素的最低高度 */
  min-height: 0.5em;
  min-width: 0.5em;
  border-radius: 50%;
  border-bottom-left-radius: 52%;
  border-bottom-right-radius: 72%;
  border-top-left-radius: 72%;
  border-top-right-radius: 420%;
  border: 1px solid #000;
  border-top-color: transparent;
  border-right-color:transparent;
  transform: rotate(180deg);
  /* z-index: 8; */
}

#span2{
  position: relative;
  border-radius:4px;
  top: -53%;
  left: 75%;
  right: 450px;
  display: inline-block;
  height:12px;
  width: 15px;
  border: 3px;
  background-color: #ce7d5d;
  transform: rotate(45deg);
}

在这里插入图片描述
接下来是动画部分，有点蒙


.baloon_container{
   top: 15%;
  left: 20%;
  /* 定义动画名称 动画时长 线性走 动画播放次数 */
  animation: balloonmove 50s linear infinite;
}

/* @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果 */
@keyframes balloonmove{
  0%,100%{
    /* translateX()函数表示在二维平面上水平方向移动元素 */
    transform: translateX(0%);
    }
  90%{
    transform: translateX(90%);
    }
}

在这里插入图片描述
作者就写了那么多，但感觉有些功能没有实现，等明天自己在试试可不可以完善。

我怎么就吃不饱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
艰难学习codepen之landscape

学习自codepen大概就是css画图学习html部分 <div class="container"> <div class="disc-1"></div> <div class="disc-2"></div> <div class="disc-3"></div> <div class="landscape-1"></div> &lt
复制链接

扫一扫