Day10:平面转换、渐变色

目标:使用位移、缩放、旋转、渐变效果丰富网页元素的呈现方式。


一、平面转换

1、简介

作用:为元素添加动态效果,一般与过渡配合使用。

概念:改变盒子在平面内的形态(位移、旋转、缩放、倾斜)。

在这里插入图片描述

平面转换也叫 2D 转换,属性是 transform

2、平移
transform: translate(X轴移动距离, Y轴移动距离);
  • 取值

    • 像素单位数值
    • 百分比(参照盒子自身尺寸计算结果)
    • 正负均可,正值:向左、向下;负值:向右、向上
  • 技巧

    • translate() 只写一个值,表示沿着 X 轴移动
    • 单独设置 X 或 Y 轴移动距离:translateX() 或 translateY()
练习:定位居中
  • 方法一:margin-left, margin-top 设置为负值
  • 方法二:使用 transform 向左向上移动自身尺寸的一半
<head><style>.box {background-color: pink;position: absolute;left: 50%;top: 50%;/* 方法一: margin-left, margin-top 设置为负值 *//* margin-left: -100px;margin-top: -50px; *//* 方法二: 使用 transform 向左向上移动自身尺寸的一半 */transform: translate(-50%, -50%);width: 200px;height: 100px;}</style>
</head><body><div class="box"></div>
</body>
3、旋转
transform: rotate(旋转角度);
  • 取值:角度单位是 deg

  • 技巧

    • 取值正负均可
    • 取值为正,顺时针旋转
    • 取值为负,逆时针旋转
4、转换原点

默认情况下,转换原点是盒子中心点。可以通过 transform-origin 修改转换原点位置。

transform-origin: 水平原点位置 垂直原点位置;
  • 取值:
    • 方位名词(left、top、right、bottom、center)
    • 像素单位数值
    • 百分比
5、多重转换

同时使用平移和旋转,实现下面效果:

在这里插入图片描述

transform: translate() rotate();

技巧:要先平移再旋转

多重转换原理:以第一种转换方式的坐标轴为准
(1)旋转会改变网页元素的坐标轴向
(2)先写旋转, 则后面的平移效果的坐标轴以旋转后的坐标轴为准,旋转时坐标轴在不停的变化,平移额方向也在不停的变化

错误案例:先写旋转,再写平移,效果如下:

在这里插入图片描述

<head><title>多重转换</title><style>.box {margin-left: 600px;margin-top: 500px;width: 800px;height: 200px;border: 1px solid #000;}img {width: 200px;transition: all 5s;}/* 鼠标移入box,图片边走边转 */.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/tyre1.png" alt="" /></div>
</body>
6、缩放
transform: scale(缩放倍数);
transform: scale(X轴缩放倍数, Y轴缩放倍数);
  • 技巧
    • 通常,只为 scale() 设置一个值,表示 X 轴和 Y 轴等比例缩放
    • 取值大于1表示放大,取值小于1表示缩小
7、倾斜

在这里插入图片描述

transform: skew();
  • 取值:角度度数 deg
<head><title>倾斜效果</title><style>body {background-color: #eee;}div {margin: 100px auto;width: 100px;height: 200px;background-color: pink;transition: all 0.5s;}div:hover {transform: skew(30deg);/* transform: skew(-30deg); */}</style>
</head><body><div></div>
</body>

二、渐变

渐变是多个颜色逐渐变化的效果,一般用于设置盒子背景。

分类:

  • 线性渐变

在这里插入图片描述

  • 径向渐变

在这里插入图片描述

1、线性渐变
background-image: linear-gradient(渐变方向,颜色1 终点位置,颜色2 终点位置,......
);

取值:

  • 渐变方向:可选,如果不写方向,默认是从上向下,即 to bottom 或 180deg

    • to 方位名词,to right,to bottom…
    • 角度度数,0deg,90deg,180deg…
  • 终点位置:可选

    • 百分比,这个颜色所占的比例,如果不写,默认是几个颜色平分
<head><title>线性渐变</title><style>body {background-color: #eee;}div {margin-left: 100px;margin-top: 100px;width: 200px;height: 200px;/* 设置了渐变色, 就是设置了 background-image, 背景色被覆盖, 除非渐变色设置透明 transparent */background-color: yellow;/* 默认从上到下的方向 */background-image: linear-gradient(red,transparent);background-image: linear-gradient(to right,red,green);/* 使用角度, 0deg 是从下向上开始, 正值顺时针旋转, 90deg 从左到右 */background-image: linear-gradient(0deg,red,green);/* 属性一样, 最后写的会覆盖前面的属性 *//* 默认从上向下, 红色占比 80% */background-image: linear-gradient(red 80%,green);}</style>
</head><body><div></div>
</body>

在这里插入图片描述

设置了渐变色,就是设置了 background-image,背景色会被覆盖,除非渐变色设置了透明 transparent。

2、径向渐变
background-image: radial-gradient(半径 at 圆心位置,颜色1 终点位置,颜色2 终点位置,......
);

取值:

  • 半径可以是 2 条,则为椭圆
  • 圆心位置取值:像素单位数值 / 百分比 / 方位名词
  • 超过半径的区域显示渐变色设置的最后一个颜色值
  • 如果想要超过半径的区域显示背景色,可以将最后一个颜色设置为透明色 transparent

三、综合案例

使用今日所学的平面转换和渐变色,实现下面网页中的特效。

在这里插入图片描述

想要完整代码的,点击这里获取Day10综合案例完整代码。完全免费,仅供学习参考使用。



在这里插入图片描述

乾坤未定,你我皆是黑马


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/845191.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Tale全局函数对象base

目录 1、 Tale全局函数对象base 1.1、 * tale alert删除 1.2、 * 成功弹框 1.3、 * 弹出成功,并在500毫秒后刷新页面 1.4、 * 警告弹框 1.5、 * 询问确认弹框,这里会传入then函数进来

【前端Vue】——课堂笔记(二)

&#x1f4bb;博主现有专栏&#xff1a; C51单片机&#xff08;STC89C516&#xff09;&#xff0c;c语言&#xff0c;c&#xff0c;离散数学&#xff0c;算法设计与分析&#xff0c;数据结构&#xff0c;Python&#xff0c;Java基础&#xff0c;MySQL&#xff0c;linux&#xf…

小米投屏怎么投?收好这3个投屏指南!(2024新)

近年来&#xff0c;小米凭借过硬的品质和合理的价格成为手机市场的一股强劲力量。随着其销量的上升&#xff0c;人们可以通过多种方式使用它来获得乐趣和便利。比如小米MIUI 11自带一个“光环”——Miracast&#xff0c;可以让用户在电脑上控制小米/红米/小米&#xff0c;获得更…

The book

Deep Learning for Coders with Fastai and PyTorch: AI Applications Without a PhD is the book that forms the basis for this course. We recommend reading the book as you complete the course. There’s a few ways to read the book – you can buy it as a paper bo…

flask流式接口

一、接口封装 from flask import Flask, request, Response, stream_with_context app Flask(__name__) app.logger.disabled Truedef chat_stream_(prompt):for new_text in [1,2,3]:yield new_textapp.route(/chat_stream, methods[POST]) def chat_stream():prompt requ…

CameraProvider启动流程

从Android 8.0之后&#xff0c;Android 引入Treble机制&#xff0c;主要是为了解决目前Android 版本之间升级麻烦的问题&#xff0c;将OEM适配的部分vendor与google 对android 大框架升级的部分system部分做了分离&#xff0c;一旦适配了一个版本的vendor信息之后&#xff0c;之…

【excel】设置可变下拉菜单(一级联动下拉菜单)

文章目录 【需求】制作动态下拉菜单&#xff0c;显示无重复的“班级”列表【思路】设置辅助列&#xff0c;使用UNIQUE()函数去重&#xff0c;并用FILTER()去掉结果中的“0”【步骤】step1 辅助列step2 设置下拉菜单 【总结】 【需求】制作动态下拉菜单&#xff0c;显示无重复的…

工业通信原理——LVDS通信原理

工业通信原理——LVDS通信原理 简介 LVDS&#xff08;Low Voltage Differential Signaling&#xff0c;低压差分信号传输&#xff09;是一种数字信号传输技术&#xff0c;通常用于高速数据传输&#xff0c;特别是在需要长距离传输、抗干扰能力强的场景中应用广泛。下面我将详…

深度学习之AlexNet、VGG-19、VGG-16、LeNet-5、ResNet模型的训练

一&#xff0e;AlexNet 1.1.导入资源包 import cv2 import matplotlib.pyplot as plt import numpy as np import os import random注&#xff1a; cv2&#xff1a;这是 OpenCV 模块&#xff0c;用于处理图像和视频&#xff0c;包括摄像头捕捉、图像处理、特征检测等。 matpl…

Playwright 自动化操作

之前有见同事用过playwright进行浏览器模拟操作&#xff0c;但是没有仔细了解&#xff0c;今天去详细看了下&#xff0c;发现playwright着实比selenium牛逼多了 Playwright 相对于selenium优点 1、自动下载chromnium, 无需担心chrome升级对应版本问题&#xff1b; 2、支持录屏操…

干Java的有4年的工作经验;想转行做labview能行吗?

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「 Java的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01;bVIEW和Java都是软件工具&a…

推荐几款优秀的文档加密软件 | 企业文件加密解决方案

在数字化时代&#xff0c;信息安全问题日益突出&#xff0c;文档加密软件成为了保护数据安全的重要手段。但是&#xff0c;市面上的文档加密软件种类繁多&#xff0c;功能各异&#xff0c;如何选择一款好用的文档加密软件成为了许多用户关注的焦点。本文将为大家提供一份实用的…

【第十三节】C++控制台版本坦克大战小游戏

目录 一、游戏简介 1.1 游戏概述 1.2 知识点应用 1.3 实现功能 1.4 开发环境 二、项目设计 2.1 类的设计 2.2 各类功能 三、程序运行截图 3.1 游戏主菜单 3.2 游戏进行中 3.3 双人作战 3.4 编辑地图 一、游戏简介 1.1 游戏概述 本项目是一款基于C语言开发的控制台…

5. MySQL运算符和函数

文章目录 【 1. 算术运算符 】【 2. 逻辑运算符 】2.1 逻辑非 (NOT 或者 !)2.2 逻辑与运算符 (AND 或者 &&)2.3 逻辑或 (OR 或者 ||)2.4 异或运算 (XOR) 【 3. 比较运算符 】3.1 等于 3.2 安全等于运算符 <>3.3 不等于运算符 (<> 或者 !)3.4 小于等于运算符…

Linux基本命令的使用(cp mv)

一、cp命令-1 1、CP命令作用&#xff1a;复制一个源文件到目标文件&#xff08;夹&#xff09; 2、 语法&#xff1a;cp [选项] 源文件 目标文件&#xff08;夹&#xff09; ① 复制到文件夹下&#xff0c;则文件名保持不变 ② 复制到文件中&#xff0c;则文件名变更 二、cp命…

微服务保护-雪崩问题

雪崩&#xff1a; 微服务调用链路中的某个微服务故障&#xff0c;引起整个链路微服务都不可用&#xff0c;这就是雪崩。&#xff08;在微服务中&#xff0c;某个微服务故障&#xff0c;导致整个微服务都不可用&#xff09; 雪崩产生的原因&#xff1a; 微服务相互调用&#xf…

【文件fd】回顾C语言文件操作 | 详细解析C语言文件操作写w追加a | 重定向和“w““a“

目录 前言 回顾C语言的操作 Q1 Q2 Q3 C语言文件操作 w方式 a方式 重定向和"w""a"方式 前言 前面进程虚拟地址空间让我们对进程的理解更加深入。在基础IO我们会详细介绍文件和文件系统。本专题的核心内容是文件。 深刻理解文件&#xff08;站在…

Linux shell 实现版本号自增,文件自动保存

Linux shell脚本实现x.x.x格式递增版本号&#xff0c;每次运行脚本自动将最后一位版本号1&#xff0c;每次更新后将最新的版本号保存到当前txt文件内容&#xff0c;以保持连续递增版本号。 脚本文件目录 rootubuntu01:/scripts/version# tree . ├── increment_version.sh └…

两数之和 II - 输入有序数组,三数之和

题目一&#xff1a; 代码如下&#xff1a; vector<int> twoSum(vector<int>& numbers, int target) {int left 0;int right numbers.size() - 1;vector<int> ret;while (left < right){int tmp numbers[left] numbers[right];if (tmp target){r…

2024全国青少年电子信息智能创新大赛(决赛)python·模拟二卷解析

2024全国青少年电子信息智能创新大赛(决赛)python模拟二卷解析 一、程序题第一题: 描述 随机生成的 10 个在[1,100)范围内整数存入列表;输入一个待查找的整数 k,运用二分法在列表中查找 k,根据查找状态输出对应的结果。 输入: [13, 25, 27, 41, 52, 66, 67, 69, 72, 75] 7…