自学前端一段时间时间，了解了html css JavaScript

自学了前端一段时间，从b站上寻找视频内容现在已经学到了JavaScript部分。但是学习的内容老是很容易忘记，所以又在b站上找了一些up主的视频马，模仿敲代码。

我在b站发现了很多很厉害的前端up主，今天我分享的up主是 编译中梦见未来 ，他有一个专栏叫做一百天挑战一百个前端效果，我就一边看视频一边跟着up主敲打码。今天就分享我学习的第一个前端效果。

gif效果图

html代码:

<div>
    
    <h1>编译中梦见未来</h1>
</div>

不知为和bilibili这段不能显示，bilibili这元素是用svg完成的，svg暂时还不是很了解但日后会深入学习。源码地址：dishiduo.coding.net/public/hcj/…

css代码： *{ margin: 0; padding: 0; }

/* 利用通用选择器 * 设定全局的 margin 和 padding 的值为0 */

body { width: 100vw; height: 100vh; background-color: #000; display: flex; justify-content: center; align-items: center; flex-direction: column;

/* 设置body 的样式 / / vh: 相对于视窗的高度, 视窗被均分为100单位的vh 可视窗口的单位 ;

vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;  可视窗口的单位  */


/*  
利用display布局 
display: flex;
justify-content: center; 垂直居中
align-items: center;  水平居中
flex 布局
 flex-direction: column; 以列的模式布局
*/

}

h1 { position: relative; font-size: 100px; color: #544E58;

} .logo { /* 向上偏移100像素 / margin-top: -100px; / 增加一个渐显动画 / / 动画名称为show_logg / / 持续时间2秒 / / 动画线性结束放慢 / / 延迟时间为0秒 / / 动画循坏执行1次 / / 结束停止在最终帧 / / 同意使用show动画 */ animation: show 3.5s ease-out 0s 1 forwards;

}

@keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } }

h1::before { position: absolute; content: '\7f16\8bd1\4e2d\68a6\89c1\672a\6765'; /* 颜色改为透明颜色让背景颜色显示出来 / color: transparent; / 使用linear-gradient 函数生成一个渐变图片背景*/ /* 这个函数不是很了解 */ background-image: linear-gradient(to right, #bed742, #f8aba6, #585eaa, #ed1941, #7fb80e, #f26522, #ffc20e, #7c8577, #009ad6, #65c294, #f47920, #f15b6c, #2e3a1f);

/*  linear-gradient() 是一个什么函数 

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的<image>数据类型。
 渐变轴为45度，从蓝色渐变到红色 
linear-gradient(45deg, blue, red);

从右下到左上、从蓝色渐变到红色 
linear-gradient(to left top, blue, red);

从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 
linear-gradient(0deg, blue, green 40%, red);

*/

 /* 这个谷歌浏览器不起作者用 */
 background-clip: text;
 /* 谷歌浏览器适配 */
 -webkit-background-clip: text;

 /* 这是什么属性？
  -webkit-background-clip: text; */
 /* 制作一个斜矩形遮罩 */
 /* 使用polygon方法 */
 /* 矩形需要定义四个角的坐标，顺时针方向定义 */
 /* 分别为左上 右上 右下 左下 */
 /* 位置以百分比为单位 */
 clip-path: polygon(-20% 0%, 0% 0%, -10% 100%, -30% 100%);

 /* 这是什么方法
   clip-path: polygon(-20% 0%, 0% 0%, -10% 100%, -30% 100%); 
   
   clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
   
   */



 /* 增加动画 */
 /* 动画名称light */
/* 持续时间2秒 */
/* 延迟0秒执行 */
/* 直接方式循环  */
/* 延迟2秒执行等待显示 */
 animation: light 2s 2s infinite;

}

/* 创建动画 light */

/* 初始于结束保持一致 */

/* 中间阶段为最右侧 */

@keyframes light { 0% { clip-path: polygon(-20% 0%, 0% 0%, -10% 100%, -30% 100%); } 50% { clip-path: polygon(100% 0%, 120% 0%, 110% 100%, 90% 100%); }

100% {
    clip-path: polygon(-20% 0%, 0% 0%, -10% 100%, -30% 100%);
}

}

小白第一次写文章，很多地方都不怎么明白，有点懵懵懂懂，只能多看多写了。

跟着b站大神自学前端

自学前端一段时间时间，了解了html css JavaScript