会动的LUNA

2020-07-29 本文已影响0人 darkTi

一、实现思路

画出LUNA
①要使它适应手机端，即在手机里不会那么小，但不让它随屏幕宽高变化而变化；那么图形的宽高如何确定呢？
a. 先测出图形的实际宽高，为了能适应不同类型手机的最小尺寸，比如320px（即让图片外框宽度为320px，不会出现在手机上展示不全的现象）；
b. 320/图形实际宽度 = h/图形实际高度，h就是按比例缩小后的高度；缩小比例系数为320/图形实际宽度;
c. 图中所有部位都按照比例系数计算得出即可；
②其余就是熟练运用border-radius
以前只会用border-radius:50%来写圆，对于它的属性值都不是很了解，经过这次大概对border-radius有了一些理解。
border-radius.png

⑴border-radius是border-top-left-radius，border-top-right-radius，border-bottom-left-radius，border-bottom-right-radius的简写，设置顺序按照左上→右上→右下→左下，具体和border的方向设置思想是一样的；
⑵border-radius的属性值：水平半径和垂直半径，但是还要结合不同边角的水平半径和垂直半径，这下就有点繁琐了，下面用代码来演示~以一个宽高都为100px的div为例：

border-radius:50%;
//这个很简单，它是个圆（前提是div的宽高一致），意思就是所有边角的水平半径和垂直半径都为宽高的50%，具体代码如下
border-top-left-radius:50%;
border-top-right-radius:50%;
border-bottom-right-radius:50%;
border-bottom-left-radius:50%;

border-radius:10px 20px;
//形状如图1，意思为左上和右下（即对角）的水平半径和垂直半径都为10px，右上和左下的水平半径和垂直半径为20px；具体代码如下
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:10px;
border-bottom-left-radius:20px;

1.png
那么怎么设置不同的水平半径和垂直半径呢？利用一个小小的斜杠/即可完成。

border-radius:10px/20px;
//见图2，它的意思为所有边角的水平半径为10px，垂直半径为20px，具体代码如下
border-top-left-radius:10px 20px;
border-top-right-radius:10px 20px;
border-bottom-right-radius:10px 20px;
border-bottom-left-radius:10px 20px;

所以可以这么记，/左边的值是水平半径，右边的值是垂直半径，但是要谨记，只有border-radius里可以出现/，且只允许出现一次，所以一出现/就要注意啦，说明水平半径和垂直半径是不同的值啦~那么如果每个边角的水平半径和垂直半径都不一样呢，这样该怎么统一写在一起呢，继续看下面的代码~

2.png

border-radius:5px 10px 15px 20px/20px 15px 10px 5px;
//斜杠左边依次代表左上、右上、右下、左下的水平半径，斜杠右边依次代表左上、右上、右下、左下的垂直半径，具体代码如下
border-top-left-radius:5px 20px;
border-top-right-radius:10px 15px;
border-bottom-right-radius:15px 10px;
border-bottom-left-radius:20px 5px;

所有如果各个边角的水平半径和垂直半径都不一样的话，建议还是分开来写~虽然写border-radius还是靠试为主，但是每个参数的含义清楚后，就能更快地试出来啦

总结：总之记住两点，1.border-radius里没有/就说明边角的水平半径和垂直半径是一致的，它的弧度是1/4圆（即90°直角所对的弧度），边角方向参考border；2.border-radius里出现/就说明边角的水平半径和垂直半径是不一致的，此时最好是分开单独来写半径（注意单个边角的水平半径和垂直半径设置时就不要加/了哈~）

代码动起来且样式也随变化的代码而变化
①主要运用<pre></pre>标签，它会把里面的代码完完全全地展示出来；使用setTimeout()方法就能使代码一点一点地装进<pre></pre>标签；
②使用setTimeout()方法把代码装进<pre></pre>标签的同时，还要把代码装进<style></style>标签中，这样样式也会随之变化；
代码高亮

使用第三方库prism.js，引入prism.css和prism.js
Prism.highlight(code, Prism.languages.css)，对code的代码进行高亮并返回出code;

二、代码知识点

substring()
①stringObject.substring(start,stop)方法用于提取字符串中介于两个指定下标之间的字符;返回的子串包括 start 处的字符，但不包括 stop 处的字符（到stop索引值前一位）。

start：必需。一个非负的整数，规定要提取的子串的第一个字符在stringObject 中的位置；
stop：可选。一个非负的整数。如果不写此项，则返回的子串会一直到字符串的结尾。（如果从0开始截取时，那么此值可暂表示为截取的字符串的长度）；
如果参数 start 与 stop 相等，那么该方法返回的就是一个空字符串；
参数不接受负值；

<audio></audio>

audio.volume = 0.1：控制音量
audio.play()：播放
audio.pause()：暂停

CSS-animation

animation-play-state:paused/running;：动画状态暂停/运行

伪元素

作用呢，就是可以少写一个div~
代码：

div::before{
    content:'';
    display:block;
    ......
}
div::after{
    content:'';
    display:block;
    ......
}

before与after没有过多的区别

@keyframes动画

通过 @keyframes 规则，能够创建动画，创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式，以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%，0% 是动画的开始时间，100% 动画的结束时间。
语法：

@keyframes animationname {keyframes-selector {css-styles;}}

div{
     animation:myname 1s infinite;
}
@keyframes myname{
    0%{transform:rotate(-10deg);}
    50%{transform:rotate(10deg);}
    100%{transform:rotate(-10deg);}
}

animation 属性是一个简写属性,它包括animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，不过一般只需要设置名字、间隔和循环次数即可

会动的LUNA

一、实现思路

二、代码知识点

猜你喜欢

热点阅读