变换,动画

面试题——需求:在不知道父元素与子元素的宽高时
如何让子元素在父元素内居中?
1.定位 父相子绝
2.子元素 top:50% left:50%
3.子元素 transform: translate(-50%,-50%)

        .parent{height: 500px;background-color: red;position: relative;}.child{width: 200px;height: 200px;background-color: yellow;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
<div class="parent"><div class="child"></div>
</div>

在这里插入图片描述

旋转变换(需要设置旋转的角度)

旋转有3个方向
延x轴transform:rotateX(30deg) 延x轴旋转30度
延y轴transform:rotateY(30deg) 延y轴旋转30度
延z轴transform:rotateZ(30deg) 延z轴旋转30度
transform:rotate(30deg)延z轴旋转30度

修改旋转的基准点

transform-origin:
默认值:center 元素的正中心
可选值:top left (0 0) 元素左上角
top center (50% 0) 上边线中点
top right (100% 0) 右上角
bottom left (0 100%) 左下角
bottom center (0 100%) 下边线中点
bottom right (0 100%) 右下角

放大与缩小

transform:scaleX(2) 宽度乘以2
scaleY(0.6) 高度乘以0.6
scale(1.5)宽高都乘以1.5 最常见
特殊的:scaleX(-2) 先延X轴翻转,然后宽度乘以2
scaleY(-0.6)先延Y轴翻转,然后高度乘以0.6
scale(-1.5)沿X轴和Y轴都翻转,然后宽高都乘以1.5

动画

设置关键帧

        @keyframes changeBgcolor {0%{background-color: red;}100%{background-color: yellow;}}
        div{background-color: red;width: 100px;height: 100px;animation: changeBgcolor 10s;}

@keyframes 关键字
changeBgcolor 给动画关键帧取名字
关键帧内必须设置
0% 初始样式
100% 结束样式
在元素的样式中使用动画关键帧可以让这个元素从0%的样式变化到100%的样式,形成动画
此例中,div使用了动画关键帧changeBgcolor,所以div的样式会从红色背景变化到绿色背景。

动画和过渡的区别

1.动画自动播放,过渡需要伪类触发
2.过渡只要来时状态和结束状态
3.动画通过关键帧可以在多个样式间切换

动画的使用

关键帧名称
animation-name: 无默认值

动画执行时间
animation-duration: 无默认值

动画的变化速率
animation-timing-function: 默认值 ease 可选值 linear

动画延迟时间
animation-delay: 默认值 0s

动画执行次数
animation-iteration-count: 默认值1
可选值: 任意大于0的整数
infinite 无限次

是否回到初始样式
animation-fill-mode: 默认值 backwards (回到动画动画执行之前的样式)
可选值:forwords 保持在动画结束节点(100%关键帧)的样式

动画是否自动播放
animation-play-state: 默认值 running 自动播放

可选值:pause 不自动播放
注:非自动播放需要伪类触发播放

动画简写
animation: 动画关键帧名称 执行时间

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

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

相关文章

Docker compose部署redis哨兵集群

Docker compose部署redis哨兵集群 安装Docker和docker-compose准备docker-compose文件redis exporter本地部署准备Redis配置文件ACL用户权限配置Linux内核参数优化启停Redis实例主从复制配置 环境准备&#xff1a; IP版本角色172.x.x.11RHEL 7.9master172.x.x.12RHEL 7.9repli…

在QDialog中嵌入QML

在一些一开始使用QWidget的项目&#xff0c;现由于要支持的硬件及系统已升级&#xff0c;可以很好的使用QML。在这种情况下&#xff0c;就需要通过QWidget与QML混合使用的方式来慢慢把整个项目过渡到纯QML工程。这时在QWidget中嵌入QML是经常要做的事&#xff0c;现就说一说在Q…

Lesson 6 Convolutional Neural Network(CNN)

听课&#xff08;李宏毅老师的&#xff09;笔记&#xff0c;方便梳理框架&#xff0c;以作复习之用。本节课主要讲了CNN的适用范围&#xff0c;整体架构与工作流程&#xff0c;CNN的应用&#xff0c;CNN的缺点以及解决方法。 1. CNN的输入与输出 CNN是专门为了图像而设计的一…

【web | CTF】SQL注入打法

题目一&#xff1a;叠堆注入&#xff0c;使用预处理来拼接select查询 进去先判断拼接的是单引号&#xff0c;再发现是可以叠堆注入&#xff0c;然后用预处理执行SQL语句 【web | CTF】BUUCTF [强网杯 2019]随便注-CSDN博客

面试经典150题——合并两个有序链表

You just work on it. Time will do the rest! 1. 题目描述 2. 题目分析与解析 2.1 思路一 这个题目还是比较简单的&#xff0c;通过分析题目&#xff0c;我们可以知道题目中关键信息为&#xff1a; 所以我们只需要从前向后遍历两个链表&#xff0c;在两个链表不空的情况下&…

电流环,速度环,位置环以及PID算法的简单了解

PID算法的通俗讲解 PID算法的江湖地位&#xff1f; PID算法在控制领域是非常常见的算法&#xff0c;小到控制温度&#xff0c;大到控制飞机的飞行姿态&#xff0c;基本上算是在控制领域万能的算法。 关于PID算法的生活小故事&#xff1a; 假设一辆慢点量的车&#xff0c;跑着跑…

HTML静态网页成品作业(HTML+CSS)——原神介绍设计制作(4个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有4个页面。 二、作品演示 三、代…

CUDA学习笔记06:共享内存加速矩阵乘法

参考资料 CUDA编程模型系列六(利用shared memory和统一内存优化矩阵乘)_哔哩哔哩_bilibili 代码片段 #include "cuda_runtime.h" #include "device_launch_parameters.h" #include <stdio.h> #include <math.h>#define M 1000 #define N 50…

llama2c(4)之forward、sample、decode

1、forward float* logits forward(transformer, token, pos); 输入transformer的参数&#xff0c;当前token&#xff0c;pos位置&#xff0c;预测出下一个token的预测值&#xff08;用矩阵乘&#xff0c;加减乘除等运算构成Transformer&#xff09; (gdb) p *logits $9 2.19…

YOLOv8.1.0安装

【YOLO】YOLOv8训练环境配置 python 3.8.18 cuda 11.3.1 cudnn 8.2.1 pytorch 1.12.1-gpu版 - 知乎 (zhihu.com) 一、Anaconda 默认装好了可用的Anaconda&#xff0c;安装教程见Win10系统anaconda安装 - 知乎 (zhihu.com) 二、在虚拟环境下用conda安装 1.创建虚拟环境 …

大唐杯学习笔记:Day9

1.1 HARQ总体介绍 HARQ是FEC和ARQ的一种混合技术机制。在纠错能力范围内进行自动纠正错误,超出纠错范围则要求发送端重新发送,增加了系统的可靠性,提高了传输效率。HARQ是MAC层的快速传输机制,NR中上下行均采用异步HARQ。 支持多个并行的stop-and-wait进程,进程号在PDCCH的DCI…

【力扣白嫖日记】1164.指定日期的产品价格

前言 练习sql语句&#xff0c;所有题目来自于力扣&#xff08;https://leetcode.cn/problemset/database/&#xff09;的免费数据库练习题。 今日题目&#xff1a; 1164.指定日期的铲平价格 表&#xff1a;Products 列名类型product_idintnew_priceintchange_datedate (pr…

记录汇川:IO隔离编程

IO隔离&#xff1a;方便程序修改 无论是输入点坏了还是输出点坏了&#xff0c;或者人为接错线&#xff0c;或者对调点&#xff0c;我们只需要更改IO隔离得输入输出就可以了。方便。 停止按钮外接常闭&#xff0c;里面也使用常闭&#xff0c;为了断线检测功能(安全)&#xff…

300分钟吃透分布式缓存-23讲:Redis是如何淘汰key的?

淘汰原理 首先我们来学习 Redis 的淘汰原理。 系统线上运行中&#xff0c;内存总是昂贵且有限的&#xff0c;在数据总量远大于 Redis 可用的内存总量时&#xff0c;为了最大限度的提升访问性能&#xff0c;Redis 中只能存放最新最热的有效数据。 当 key 过期后&#xff0c;或…

room数据库升级

room数据库升级 一、操作步骤说明 增加数据库版本号 在Database注解中增加版本号(version)&#xff0c;比如从version 1升级到version 2。 Database(entities [Song::class,],**version 1**,//1->2 ) abstract class AppDataBase : RoomDatabase() { }定义数据库变化 根据…

一个爬虫自动化数据采集的故事~

目录 一、原文二、故事前半段背景内容三、正经的讲点DrissionPage知识四、故事的收尾 一、原文 原文来自一个爬虫自动化数据采集的故事~ , 建议点击链接看文章末尾的视频笔者不擅长自动化&#xff0c;一个小小故事分享给大家&#xff0c;仅个人观点 二、故事前半段背景内容 …

剑指offer面试算法题目,自己总结的

JZ31 栈的压入、弹出序列-C++-CSDN博客 剑指 Offer(C++版本)系列:从尾到头打印单链表(C++)-CSDN博客 剑指offer》15--二进制中1的个数[C++]-CSDN博客 《剑指offer》14--剪绳子(整数拆分)[C++]-CSDN博客 剑指 Offer 12. 矩阵中的路径-CSDN博客 C++--机器人的运动范围…

IP-guard邮件管控再升级,记录屏幕画面,智能阻断泄密邮件

邮件是工作沟通以及文件传输的重要工具,却也成为了信息泄露的常见渠道。员工通过邮件对外发送了什么内容,是否含有敏感信息都无从得知,机密通过邮件渠道外泄也难以制止。想要防止企业的重要信息通过邮件方式泄露,我们不仅需要通过技术措施对外发邮件的行为进行规范,也要对…

使用大带宽服务器对网站有什么好处?

近年来大带宽服务器频频出现在咱们的视野当中&#xff0c;选用的用户也在与日增长。那么究其主要原因是什么?租用大带宽服务器的好处又有哪些? 今天德迅云安全带您来了解下。1.有效提升网站访问速度 一般来说&#xff0c;正规的网站对用户体验度都是非常有讲究的&#xff0c;…

L-2:插松枝(Python)

作者 陈越 单位 浙江大学 人造松枝加工场的工人需要将各种尺寸的塑料松针插到松枝干上&#xff0c;做成大大小小的松枝。他们的工作流程&#xff08;并不&#xff09;是这样的&#xff1a; 每人手边有一只小盒子&#xff0c;初始状态为空。每人面前有用不完的松枝干和一个推送…