您的位置: 首页  >  文章  >  前端培训第一天

前端培训第一天

分类: 文章 • 2022-11-05 18:54:29

任务一.做一个跳动的爱心

知识点:

1.伪元素选择器
（1）写法：
#heart:before{}
#heart:after{}
（2）特征：
伪元素选择器是在当前元素上派生出一个新的相同元素
并且无论原来的选择器是否是块状元素，派生出来的元素都具有行内元素的特征（无法设置宽和高），除非浮动或者给了一个定位。代码如下（rgba中的a表示透明度的意思，但是透明度会叠加，所以未设置透明度）
前端培训第一天
2.动画的四种方式
transform（rotate（x deg））-- 旋转 – 旋转多少度（默认是X轴顺时针）
transform（translate（x px， y px ）-- 同时向x轴和y轴平移多少像素
transform(scale(num)) — 放大倍数 – num代表放大的倍速，可用小数

3.代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #heart {
            content: "";
            width: 300px;
            height: 300px;
            /*background-color: #f00;*/
            position: relative;
            margin: 100px auto;
            animation: heart 1.5s infinite;//设置动画的连写方式，heart是名字，1.5s是时间，infinite代表无限次循环。
        }

        #heart:before {
            content: "";
            width: 300px;
            height: 300px;
            background-color: rgba(255,0,0);
            position: absolute;
            left: -100px;
            border-radius: 50%;
          }

        #heart:after {
            content: "";
            width: 300px;
            height: 300px;
            background-color: rgba(255,0,0);
            position: absolute;
            right: -100px;
            border-radius: 50%;
            /*display: inline-block;*/
        }

        #heart div{
            width:300px;
            height: 300px;
            bottom: -100px;
            transform: rotate(45deg);
            background-color: rgba(255,0,0);
            position: absolute;
        }

        @keyframes heart {
            0{}
            50%{transform: scale(1.5) translateX(100px) rotate(360deg)}
            100%{transform: scale(1) translateX(0px)}
        }
    </style>
</head>
<body>
    <div id="heart">
        <div></div>
    </div>
</body>
</html>

任务二：太极图

知识点：
前端培训第一天
1.animation动画的连写方式：参数1：动画名字 参数2：循环时间 参数3：循环方式（linear为匀速） 参数4：无限次循环（infinite）

2.设置position:absolute;则会脱离文档流，产生层级关系

3.浮动可以让元素默认转换为行内块
如果给行内元素添加了float，此时不需要转化了，这个元素也可以有宽高

4.块状元素通过margin方式进行居中对齐

5.代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #ccc;
        }

        #wrap {
            width: 300px;
            height: 300px;
            border:1px solid white;
            margin: 100px auto;
            animation: circle 1s linear infinite;
        }

        .leftBox,.rightBox {
            position: relative;
            float: left;
            background-color: white;
            width: 150px;
            height: 300px;
            border-radius: 150px 0 0 150px;
         }

        .rightBox {
            background-color: black;
            border-radius: 0 150px 150px 0;
        }

        .topbox,.bottombox{
            width: 150px;
            height:150px;
            position: absolute;
            background-color: black;
            left:75px;
            border-radius: 50%;
        }

        .bottombox{
            background-color: white;
            left:-75px;
            top: 150px;
        }

        .whitebox,.blackbox {
            width: 50px;
            height:50px;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            left: 50px;
            top: 50px;
            z-index: 100;
        }

        .blackbox {
            background-color: black;
            border-radius: 50%;
        }

        @keyframes circle {
            0{transform: rotate(0deg)}
            100%{transform: rotate(360deg)}
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div class="leftBox">
            <div class="topbox">
                <div class="whitebox"></div>
            </div>
        </div>
        <div class="rightBox">
            <div class="bottombox">
                <div class="blackbox"></div>
            </div>
        </div>
    </div>
</body>
</html>

任务三：图片特殊的显示方式（滑动相册）

知识点：
前端培训第一天
1.图片上代码ul：hover的含义为鼠标经过 ul后产生的事件（由于ul包含li，所以鼠标经过任一li就会触发）
ul:hover li:not(:hover) 这句即表示触发ul事件后，其中没有被选中的li产生的效果 。

2.overflow: hidden;（溢出隐藏 scroll溢出来的内容添加滚轮，auto自动检测是否溢出，添加滚动条*）

3.transition: all 0.7s;（transition过渡 all要改变的属性 时间s）

4.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            width: 650px;
            height: 300px;
            overflow: hidden;
            margin: 100px auto;
        }

        ul li {
            list-style: none;
            float: left;
            width: 130px;
            /*overflow: hidden;*/
            transition: all 0.7s;
        }

        li:hover {
            width: 450px;
        }
        ul:hover li:not(:hover) {
            width:50px;
        }
    </style>
</head>
<body>
    <ul>
        <li><img src="img/1.jpg" alt="haha" title="hello"></li>
        <li><img src="img/2.jpg" alt="ss" title="hell"></li>
        <li><img src="img/3.jpg" alt="aa" title="hel"></li>
        <li><img src="img/4.jpg" alt="dd" title="he"></li>
        <li><img src="img/5.jpg" alt="aa" title="h"></li>
    </ul>
</body>
</html>

思考

由于之前自学过html、css，所以布置任务时问题不是很多。几道题都能正常的写出来
压力很大，可能是因为年龄（三本大龄转行），也可能是因为心态
目前的学习还没有遇到过多的困难，因为学的比较浅显
放弃了安逸的工作，放弃了固定的经济来源，花了万把块钱参加了培训班
不知道自己能不能成功，也不知道未来能不能找到工作，但是人生总是需要去尝试。
今天终于走出了第一步，也许是一小步，也许是一大步，谁知道呢
反正，我也只是万千迷途中不多不少的哪一个

相关推荐