前端学习-day10

已于 2024-06-17 17:27:37 修改
阅读量577 收藏 10
点赞数 4
文章标签： 前端 学习 css3
于 2024-06-17 17:27:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qyk666/article/details/139746981
版权

文章目录

01-体验平面转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            /* :转变 过度 */
            transition: all 1s;
        }
        div:hover{
            /* 变压器 */
            transform: translate(800px) rotate(360deg) scale(2) skew(180deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

02-平移效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 500px;
            height: 300px;
            margin: 50px auto;
            border: 1px solid #000;
        }
        .son{
            width: 200px;
            height: 100px;
            background-color: pink;
            transition: all 1s;
        }
        /* 鼠标移入到父盒子，son改变位置 */
        .father:hover .son{
            transform: translate(200px,100px);

            /* 百分比参照盒子自身尺寸改变位置 */
            transform: translate(50%,100%);

            /* 只写一个数 只移动x方向 */
            transform: translate(100px);

            /* 可以单独移动Y方向的 */
            transform: translateY(100px);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

03-绝对定位元素居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position: absolute;
            left: 50%;
            top: 50%;

            

            /* 向左向上移动自身尺寸的一半 */
            transform: translate(-50%,-50%);


            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述

04-案例-双开门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 1.布局：父子结构，父级是大图，子级是左右小图 */
        .father{
            display: flex;
            margin: 0 auto;
            width: 1366px;
            height: 600px;
            background-image: url(./images/bg.jpg);
            overflow: hidden;
        }
        .father .left,
        .father .right{
            width: 50%;
            height: 600px;
            background-image: url(./images/fm.jpg);
            transition: all 1s;
        }
        .father .right{
            /* background-position是对当前区域的背景进行移动 */
            background-position: right 0;
        }

        /* 2.鼠标悬停的效果：左右移动 */
        .father:hover .left{
            transform: translate(-100%);
        }
        .father:hover .right{
            transform: translate(100%);
        }

    </style>
</head>
<body>
    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

在这里插入图片描述

06-转换旋转中心点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 200px;
            border: 1px solid #000;
            transition: all 1s;
            /* 转换原点 */
            transform-origin: right bottom;
        }
        img:hover{
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./images/rotate.png" alt="">
</body>
</html>

在这里插入图片描述

07-案例-时钟-转换原点


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .clock {
        width: 250px;
        height: 250px;
        border: 8px solid #000;
        border-radius: 50%;
        margin: 100px auto;
        position: relative;
      }

      .line {
        /* 1.定位 */
        position: absolute;
        width: 4px;
        height: 250px;
        background-color: #999;
        left: 50%;
        transform: translate(-50%);
      }

      /* 线2: 旋转, 每条线旋转角度不同, 单独选中不同的line, 写rotate代码 */
      /* 一圈是360度, 等分成  xx 份 */
      .line:nth-child(2) {
        transform: translate(-50%) rotate(30deg);
      }

      .line:nth-child(3) {
        transform: translate(-50%) rotate(60deg);
      }

      .line:nth-child(4) {
        transform: translate(-50%) rotate(90deg);
      }

      .line:nth-child(5) {
        transform: translate(-50%) rotate(120deg);
      }

      .line:nth-child(6) {
        transform: translate(-50%) rotate(150deg);
      }

      /* 第一根和第四跟宽度大一些 */
      .line:nth-child(1),
      .line:nth-child(4) {
        width: 5px;
      }

      /* 遮罩圆形 */
      .cover {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        background-color: #fff;
        border-radius: 50%;
      }

      /* 表针 */
      /* 并集选择器放在单独选择器的上面, 避免transform属性的层叠 */
      .hour,
      .minute,
      .second {
        position: absolute;
        left: 50%;
        /* 盒子底部在盒子中间 */
        bottom: 50%;


        /* 使三个指针围绕底部定点旋转 */
        transform-origin: center bottom;
      }

      .hour {
        width: 6px;
        height: 50px;
        background-color: #333;
        margin-left: -3px;
        /* 这是设置的旋转度数 */
        transform: rotate(15deg);
      }

      .minute {
        width: 5px;
        height: 65px;
        background-color: #333;
        margin-left: -3px;
        transform: rotate(90deg);
      }

      .second {
        width: 4px;
        height: 80px;
        background-color: red;
        margin-left: -2px;
        transform: rotate(240deg);
        
      }

      /* 螺丝 */
      .dotted {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 18px;
        height: 18px;
        background-color: #333;
        border-radius: 50%;
      }
    </style>
  </head>

  <body>
    <div class="clock">
      <!-- 刻度线 -->
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>

      <!-- 遮罩圆形 -->
      <div class="cover"></div>
      <!-- 表针 -->
      <div class="hour"></div>
      <div class="minute"></div>
      <div class="second"></div>

      <!-- 螺丝 -->
      <div class="dotted"></div>
    </div>
  </body>
</html>

在这里插入图片描述

08-平面转换-多重转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 200px;
            border: 1px solid #000;
        }
        img{
            width: 200px;
            transition: all 1s;
        }
        .box:hover img{
            /* 先平移后旋转 */
            transform: translate(600px) rotate(360deg);
            /* 多重转换会以第一种转换形态的坐标轴为准 */
            /* transform: rotate(360deg) translate(600px); */


            /* 层叠性 */
            /* transform: translate(600px); */
            /* transform: rotate(360deg); */
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/tyre.png" alt="">
    </div>
</body>
</html>

在这里插入图片描述

09-缩放效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        width: 300px;
        height: 210px;
        margin: 100px auto;
    }
    .box img{
        width: 100%;
        transition: all 0.5s;
    }
    .box:hover img{
        /* 只设置宽高的效果是从左上角发生改变 */
        /* width: 500px; */
        /* height: 400px; */


        /* 沿着中心点向四周放大 */
        /* 大于1 ：放大   小于1：缩小   等于1 ：不变 */
        transform: scale(2);
        transform: scale(0.2);
        transform: scale(1);




    }
</style>
<body>
    <div class="box">
        <img src="./images/product.jpeg" alt="">
    </div>
</body>
</html>

10-案例-按钮缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        img{
            width: 100%;
        }
        .box{
            width: 249px;
            height: 210px;
            margin: 50px auto;
        }
        .box p{
            color: #3b3b3b;
            padding: 10px 10px 0 10px;
        }


        li{
            overflow: hidden;
        }

        /* 1.摆放播放的按钮——>放到图片区域的中间 */
        .box .pic{
            position: relative;
        }

        .pic::after{
            /* 2. after是行内元素，宽高不生效，但是加了position 变成行内块，宽高就生效了 */
            position: absolute;
            /* 1.after 不加content 不生效 */
            top: 50%;
            left: 50%;
            /* transform: translate(-50%,-50%); */
            /* margin-left: -28px; */
            /* margin-top: -28px; */
            content: '';
            width: 58px;
            height: 58px;
            background-image: url(./images/play.png);
            /* 变成复合属性，防止标签层叠 */
            transform: translate(-50%,-50%) scale(5);
            opacity: 0;
            transition: all .5s;
        }
        /* 2.设置鼠标悬停状态 */
        li:hover .pic::after{
            opacity: 1;
            transform: translate(-50%,-50%) scale(1);
        }

    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <div class="pic">
                    <img src="./images/party.jpeg" alt="">
                </div>
                <p>【和平精英】</p>
            </li>
        </ul>
    </div>
    
</body>
</html>

在这里插入图片描述
在这里插入图片描述

11-倾斜效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin: 100px auto;
            width: 100px;
            height: 200px;
            background-color: pink;
            transition: all 1s;
        }
        div:hover{
            transform: skew(30deg);
            transform: skew(-30deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

12-渐变-线性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
            background-image: linear-gradient(
                red,
                blue
            );
            background-image: linear-gradient(
                to right,
                red,
                blue
            );
            background-image: linear-gradient(
                45deg,
                red,
                blue
            );
            background-image: linear-gradient(
                red 80%,
                blue
            );
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述

13-案例-产品展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position: relative;
            width: 300px;
            height: 212px;
        }
        .box img{
            width: 300px;
        }
        .box .title{
            position: absolute;
            left: 15px;
            bottom: 20px;

            /* 堆叠顺序： 谁的index属性值大，就不会被盖住  */
            z-index: 2;
            width: 260px;
            color: #fff;
            font-size: 20px;
            font-weight: 700px;
        }
        .mask{
            position: absolute;
            top: 0;
            width: 300px;
            height: 212px;
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0,0.5)
            );
            opacity: 0;
            transition: all .5s;
        }
        .box:hover .mask{
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/product.jpeg" alt="">
        <div class="title">和代表参加答辩首都机场难道你</div>
        <div class="mask"></div>
    </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

14-渐变-径向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50%;
            /* 正圆 */
            background-image: radial-gradient(
                50px at center center,
                red,
                pink
            );

            /* 椭圆 */
            background-image: radial-gradient(
                50px 20px at center center,
                red,
                pink
            );

            background-image: radial-gradient(
                50px at 50px 30px,
                red,
                pink 50%
                /* 半径的50%前是渐变  50%后是pink颜色 */
            );
            
        }
        button{
            width: 100px;
            height: 40px;
            background-color: green;
            border: 0;
            border-radius: 5px;
            color: #fff;
            background-image: radial-gradient(
                50px at 30px 20px,
                rgba(255,255,255,0.2),
                transparent
            );
        }
    </style>
</head>
<body>
    <div></div>
    <button>按钮</button>
</body>
</html>

在这里插入图片描述

15-综合案例-喜马拉雅

点击查看

heibut不相信眼泪
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web前端学习-day03-JavaScript
Javaw1212的博客
08-26 3974
交互性强: 由于JS语言是嵌入到HTML页面中undefined最终执行在客户端的浏览器中的语言undefined和用户是直接接触undefined Java语言是运行在服务器的语言undefined 用户需要进行交互的话必须通过网络才可以undefined所以JS语言的交互性会更强.==和===区别: ==先统一等号两边变量的类型 再比较值undefined ===先比较两个变量的类型undefined类型一致后再比较值. "666"==666 true "666"===666 false。...
前端学习--Day06
Cure The World的博客
08-27 885
选择器 元素选择器 用标签名作为选择器，选中所有相应的元素 类选择器 根据class的属性来选择元素，样式定义为：.classname { } ID选择器 根据id名来选择元素，样式定义为：#idname{ } 属性选择器 选择器 描述 [attribute] 选取带有指定属性的元素。12456 [attribute=value] 选取带有指定属性和值的元素。6 [attribute~=value] 选取属性值中包含指定词汇的元素。456 [attribute|=value]
前端学习--Day04
Cure The World的博客
08-25 1676
1.css基本概念 2.选择器 3.三种连接方式 4字体相关属性
前端学习--Day03
Cure The World的博客
08-24 3548
1、table的介绍 2、table合并单元格及其他基础标签案例 3、div的介绍 4、块级标签与行内标签的行内块标签的特点以及区别
系统学习前端之CSS---day04
weixin_63522291的博客
12-25 1636
文本的baseline是字母x的下方inline-block默认的baseline 是margin-bottom的底部，没有margin就是盒子底部inline-block有文字的时候，baseline是最后一行文本x的下方vertical-align这个属性的各种值理解baselin（默认值）：基线对齐top：把行内级盒子的顶部和line box顶部对齐middle：行内级盒子的中心点与父盒子基线加上x-height一半的线对齐。
前端学习--Day01
Cure The World的博客
08-22 4321
Web前端基础知识 HBuilder中Chrome无法运行问题 一、Web基本概念 Web：网页、公众号、动画 H5：html5 URL：网络资源的地址 服务器：一个性能比较高（内存大、运行速度快）的电脑，安装了提供服务的软件（Apache，tomcat，ISS，Nginx） 云服务器：阿里云、腾讯云、百度云、华为云 有专门的团队提供维护工作 浏览器：能帮我们打开网页，Google Chrome、IE、火狐 二、标记语言 用各种标签将相关的信息或者关键字包裹起来，方便搜索引擎的抓
前端学习--Day02
Cure The World的博客
08-23 2790
Web前端基础知识 一、
系统学习前端之CSS---day01
weixin_63522291的博客
12-24 1362
和
学习前端-HTML-day01
08-17
学习前端-HTML-day01
前端学习day01-HTML标签01
06-21
本教程“前端学习day01-HTML标签01”着重讲解HTML的基本概念和常用的HTML标签，旨在帮助初学者入门HTML，了解其在网页设计中的重要作用。 HTML由一系列元素组成，这些元素通过标签来表示。标签通常成对出现，比如`...
06day_前端学习资料_
09-30
【前端学习资料】是针对...这些知识点构成了一个完整的前端学习路径，通过【06day】的学习资源，你可以逐步深入每个主题，从基础到高级，系统地提升自己的前端技能。记住，持续学习和实践是成为优秀前端开发者的关键。
苍穹外卖前端课程 day03-套餐管理
03-09
### 苍穹外卖前端课程 Day03 - 套餐管理知识点详解 #### 一、套餐分页查询 ##### 1.1 需求分析与接口设计 ...通过对这些知识点的学习和实践，学员能够掌握前端开发中常见的业务逻辑和技术实现方式。
vito的Web前端学习_JavaScript_Day1
03-04
在“vito的Web前端学习_JavaScript_Day1”这个课程中，我们将会深入探讨JavaScript的基础概念和核心特性，为日后的Web开发打下坚实的基础。 首先，我们要理解JavaScript与ECMAScript的关系。JavaScript是基于...
前端字符串将其分割成长度为 32 的子字符串数组
人与人之间最小的差别是智商，最大的差别是坚持。
08-19 386
要实现这个需求，可以编写一个简单的 JavaScript 函数来处理字符串并将其分割成长度为 32 的子字符串数组。将字符串切割后，对list数据进行数据处理。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 325
【代码】【js】各类前端输入校验方法。
vue中定义一个url文件,在vue文件中引入
最新发布
weixin_65767506的博客
08-22 186
1.在src/utils文件夹下创建一个url.js。3.在其他vue文件中引入。2.url.js的内容为。4.在挂载时打印一下。打印出来就可以用了.
浅谈JavaScript 框架在现代 Web 开发中的作用
08-21 450
随着近年来 Web 开发的快速发展，JavaScript 框架已成为用于构建任何应用程序的强大、灵活和可扩展元素的重要实用程序。一些框架，如Angular、React、Vue.JS等，有助于以系统的方式处理固有的网站开发复杂性，以提高效率。它们提供已经为基本编程功能和常规任务编写的 JavaScript 代码，从而缩短了必要的原始编码时间。此外，它们还增加了 Web 应用程序的功能和交互性，从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值