十四、CSS 3新特性详解(二)——2D转换(transform)、动画(animation)、动画序列

HTML5 第二天

一、rotate

2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

使用步骤:

  1. 给元素添加转换属性 transform
  2. 属性值为 rotate(角度)transform:rotate(30deg) 顺时针方向旋转30度
div{transform: rotate(0deg);
}
二、三角
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.box {position: relative;width: 300px;height: 35px;border: 1px solid #ccc;}.box::after {position: absolute;top: 10px;right: 10px;content: '';width: 10px;height: 10px;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;transform: rotate(45deg); /* 旋转45°,形成往下的箭头 */transition: all 0.3s;/* 旋转的时候产生过渡效果 */}/* 鼠标经过box盒子时,让after伪类生成的箭头进行旋转过渡,并重新定位箭头的位置 */.box:hover::after {transform: rotate(225deg);position: absolute;top: 15px;right: 10px;}</style></head><body><div class="box"></div></body>
</html>
二、设置元素旋转中心点(transform-origin)
  1. transform-origin 基础语法
transform-origin: x y;
  1. 重要知识点
  • 注意后面的参数 x 和 y 用空格隔开
  • x y 默认旋转的中心点是元素的中心 (50% 50%),等价于 center center
  • 还可以给 x y 设置像素或者方位名词(topbottomleftrightcenter)
三、旋转中心案例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>旋转中心点案例</title><style type="text/css">div {width: 200px;height: 200px;background-color: pink;margin: 100px auto;transition: all 0.4s;/* 1.设置旋转中心点 transform-origin后面可以跟方位名词 *//* transform-origin: left bottom; *//* 2.默认的旋转中心点是 50%  50% 等价于 center center *//* 3.可以是px像素 */transform-origin: 50px 50px;}div:hover {transform: rotate(360deg);}</style></head><body><div></div></body>
</html>
四、2D 转换之 scale
  1. scale 的作用

    • 用来控制元素的放大与缩小
  2. 语法

    transform: scale(x, y)
    
  3. 知识要点

    • 注意,x 与 y 之间使用逗号进行分隔
    • transform: scale(1, 1): 宽高都放大一倍,相当于没有放大
    • transform: scale(2, 2): 宽和高都放大了二倍
    • transform: scale(2): 如果只写了一个参数,第二个参数就和第一个参数一致
    • transform:scale(0.5, 0.5): 缩小
    • scale 最大的优势:可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子
  4. 代码演示

       div:hover {/* 1.注意,数字是倍数的含义,1就是1倍,所以不需要加单位 。第一个参数为宽度,第二个参数为高度*//* transform: scale(2, 2) *//* 2.实现等比缩放,同时修改宽与高 *//* transform: scale(2) *//* 3.小于 1 就等于缩放*/transform: scale(0.5, 0.5)/* 4. scale 的优势之处: 不会影响其他的盒子 而且可以设置缩放的中心点*//* width: 300px;height: 300px; */transform: scale(2);}
五、图片放大案例
  • 代码演示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {overflow: hidden;float: left;margin: 10px;}div img {transition: all .4s;vertical-align: middle; /* 必须加上这句 代码,因为img 图片默认是基线对齐,把它修改成中线对齐,才能实现放大后的图片不会超出原本的div的高度 */}div img:hover {transform: scale(1.1);}</style>
</head><body><div><a href="#"><img src="media/scale.jpg" alt=""></a></div><div><a href="#"><img src="media/scale.jpg" alt=""></a></div><div><a href="#"><img src="media/scale.jpg" alt=""></a></div>
</body></html>
六、分页按钮案例
  • 代码演示
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>li {float: left;width: 30px;height: 30px;border: 1px solid pink;margin: 10px;text-align: center;line-height: 30px;list-style: none;border-radius: 50%;cursor: pointer;transition: all .4s;}li:hover {transform: scale(1.2);}</style>
</head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
</body></html>

在这里插入图片描述

七、 2D 转换综合写法以及顺序问题
  1. 知识要点

  2. 同时使用多个转换,其格式为 transform: translate() rotate() scale()

  3. 顺序会影响到转换的效果(先旋转会改变坐标轴方向)

  4. 但我们同时有位置或者其他属性的时候,要将位移放到最前面

  5. 代码演示

div:hover {transform: translate(200px, 0) rotate(360deg) scale(1.2)
}

2D转换总结:

  1. 转换transform我们简单理解就是变形有2D和3D之分 .我们暂且学了三个分别足位移旋转和缩放
  2. 2D移动translate(x,y)最大的优势足不影响其他盒子,里面参数用%,是相对于自身宽度和高度来计算的
  3. 可以分开写比如translateX(x)和translateY(y)
  4. ·2D旋转rotate(度数)可以实现旋转元素废数的单位是deg
  5. 2D缩放 sacle(x,y)里面参数是数字不跟单位,可以是小数,最大的优势不影响其他盒子
  6. 设置转换中心点traisform-origin:xy;参数可以百分比像素或者是方位名词
  7. 当我们进行综合写法,同时有位移和其他属性的时候,记得要将位移放到最前
八、 动画(animation)
  1. 什么是动画

    • 动画是 CSS3 中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果
  2. 动画的基本使用

    • 先定义动画
    • 在调用定义好的动画
  3. 语法格式(定义动画)

    写法一:
    @keyframes 动画名称 {0% {width: 100px;}100% {width: 200px}
    }
    
写法二:
```html@keyframes move{from {transform: translate(0px,0px);}to {transform: translate(200px,200px);}}

4.  语法格式(使用动画)

div {
/* 调用动画 /
animation-name: 动画名称;
/
持续时间 */
animation-duration: 持续时间;
}

5. 动画序列- 0% 是动画的开始,100 % 是动画的完成,这样的规则就是动画序列
- 在 @keyframs 中规定某项 CSS 样式,就由创建当前样式逐渐改为新样式的动画效果
- 动画是使元素从一个样式逐渐变化为另一个样式的效果,可以改变任意多的样式任意多的次数
- 用百分比来规定变化发生的时间,或用 `from` 和 `to`,等同于 0% 和 100%6. 代码演示```css
<style>div {width: 100px;height: 100px;background-color: aquamarine;animation-name: move;animation-duration: 0.5s;}@keyframes move{0% {transform: translate(0px)}100% {transform: translate(500px, 0)}}</style>
九、动画序列
  • 代码演示:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* from to 等价于  0% 和  100% *//* @keyframes move {from {transform: translate(0, 0);}to {transform: translate(1000px, 0);}} *//* 动画序列 *//* 1. 可以做多个状态的变化 keyframe 关键帧 *//* 2. 里面的百分比要是整数 *//* 3. 里面的百分比就是 总的时间(我们这个案例10s)的划分 25% * 10  =  2.5s */@keyframes move {0% {transform: translate(0, 0);}25% {transform: translate(1000px, 0)}50% {transform: translate(1000px, 500px);}75% {transform: translate(0, 500px);}100% {transform: translate(0, 0);}}div {width: 100px;height: 100px;background-color: pink;animation-name: move;animation-duration: 10s;}</style>
</head><body><div></div>
</body></html>
十、动画常见属性
  1. 常见的属性
    在这里插入图片描述

  2. 代码演示

    div {width: 100px;height: 100px;background-color: aquamarine;/* 动画名称 */animation-name: move;/* 动画花费时长 */animation-duration: 2s;/* 动画速度曲线 */animation-timing-function: ease-in-out;/* 动画等待多长时间执行 */animation-delay: 2s;/* 规定动画播放次数 infinite: 无限循环 */animation-iteration-count: infinite;/* 是否逆行播放 */animation-direction: alternate;/* 动画结束之后的状态 */animation-fill-mode: forwards;
    }div:hover {/* 规定动画是否暂停或者播放 */animation-play-state: paused;
    }
    
十一、 动画简写方式
  1. 动画简写方式
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode
  1. 知识要点
  • 简写属性里面不包含 animation-paly-state
  • 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
  • 要想动画走回来,而不是直接调回来:animation-direction: alternate
  • 盒子动画结束后,停在结束位置:animation-fill-mode: forwards
  1. 代码演示

    animation: move 2s linear 1s infinite alternate forwards;
    
十二、速度曲线细节
  1. 速度曲线细节

    • animation-timing-function: 规定动画的速度曲线,默认是ease
      在这里插入图片描述
  2. 代码演示

    div {width: 0px;height: 50px;line-height: 50px;white-space: nowrap;overflow: hidden;background-color: aquamarine;animation: move 4s steps(24) forwards;
    }@keyframes move {0% {width: 0px;}100% {width: 480px;}
    }
    
十三、奔跑的熊大
  1. 代码演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {background-color: #ccc;}      div {position: absolute;width: 200px;height: 100px;background: url(media/bear.png) no-repeat;/* 我们元素可以添加多个动画, 用逗号分隔 */animation: bear .4s steps(8) infinite, move 3s forwards;}@keyframes bear {0% {background-position: 0 0;}100% {background-position: -1600px 0;}}@keyframes move {0% {left: 0;}100% {left: 50%;/* margin-left: -100px; */transform: translateX(-50%);}}</style>
</head><body><div></div>
</body></html>

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

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

相关文章

pip/conda导出 requirements.txt 注意事项

pip 使用 pip freeze > ./requirements.txt 导出 requirements.txt 发现很多包没有版本号&#xff0c;而是 file:/// 使用pip list --formatfreeze > ./requirements.txt 导入安装 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple -r requirements.txt con…

fortune命令简介

本文转自《阮志峰的网络日志》&#xff0c;原文网址&#xff1a;http://www.ruanyifeng.com/blog/2015/04/fortune.html 作者&#xff1a; 阮一峰 日期&#xff1a; 2015年4月14日 美国中餐馆的最后一道菜&#xff0c;往往是小甜饼&#xff0c;叫做"幸运饼"&#xff…

十五、CSS 3新特性详解(三)——3D转换(位移、旋转、呈现)、透视perspective、旋转rotateX、Y、Z、呈现transform-style

HTML5 第三天 一、 认识 3D 转换 3D 的特点 近大远小物体和面遮挡不可见 三维坐标系 x 轴&#xff1a;水平向右 – 注意&#xff1a;x 轴右边是正值&#xff0c;左边是负值 y 轴&#xff1a;垂直向下 – 注意&#xff1a;y 轴下面是正值&#xff0c;上面是负值 z 轴&#x…

用计算机表白的数字,用数字表白的句子大全 如何用数字表白一段话

表白总是一个让人十分难忘的经历&#xff0c;如果大家想要对喜欢的人表白&#xff0c;又不好意思直说自己的想法&#xff0c;那么今天的这份用数字表白的句子大全就对你们很有帮助了。跟我一起看看&#xff0c;如何用数字表白一段话呢&#xff1f;一、用数字表白的句子大全1、3…

pip安装pytorch1.10.1+paddlepaddle-gpu2.2.1+cuda10.2+cudnn7.6.5

NV驱动下载安装https://www.nvidia.cn/Download/index.aspx多卡的话&#xff0c;安装 NCCL https://developer.nvidia.com/nccl/nccl-download配置 pip 源 vim ~/.pip/pip.conf [global] index-url https://pypi.tuna.tsinghua.edu.cn/simple安装virtualenv包pip install vir…

jQuery学习笔记系列(一)——入口函数,jQuery对象和DOM对象,jQuery选择器、样式操作、效果(显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列)

day01 - jQuery 学习目标&#xff1a; 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 jQuery 选择器 能够操作 jQuery 样式 能够写出常用的 jQuery 动画 1.1. jQuery 介绍 1.1.1 JavaScript 库 ​…

计算机主机显卡安装,安装后如何在计算机中启用独立显卡

如今&#xff0c;许多朋友对他们的计算机配置不满意&#xff0c;希望将计算机配置提高一些. 现在&#xff0c;我将告诉您如何设置带有高性能图形卡的笔记本电脑.详细信息如下:1. 第一步&#xff0c;在打开计算机电源后&#xff0c;右键单击桌面&#xff0c;然后在出现的菜单中显…

RHadoop和CDH整合实例(三)- RHive

五、 RHive的安装及测试 RHive依赖于Rserve&#xff0c;所有首先需要安装Rserve(在各个namenode上)&#xff0c;接下来在所有节点上启动Rserve&#xff1a; > sudo R > install.packages("Rserve") > q() > Rserve --RS-conf /usr/lib64/R/Rserv.…

LeetCode 2144. 打折购买糖果的最小开销(贪心)

文章目录1. 题目2. 解题1. 题目 一家商店正在打折销售糖果。每购买 两个 糖果&#xff0c;商店会 免费 送一个糖果。 免费送的糖果唯一的限制是&#xff1a;它的价格需要小于等于购买的两个糖果价格的 较小值 。 比方说&#xff0c;总共有 4 个糖果&#xff0c;价格分别为 1…

淘宝弹性布局方案lib-flexible实践

2个月前&#xff0c;写过一篇文章《从网易与淘宝的font-size思考前端设计稿与工作流》总结过一些移动web中有关手机适配的一些思路&#xff0c;当时也是因为工作的关系分析了下网易跟淘宝的移动页面&#xff0c;最后才有那篇文章的总结&#xff0c;可惜的是因为项目的关系&…

jQuery学习笔记系列(二)

day02 - jQuery 学习目标&#xff1a; 能够操作 jQuery 属性 能够操作 jQuery 元素 能够操作 jQuery 元素尺寸、位置 1.1. jQuery 属性操作 ​ jQuery 常用属性操作有三种&#xff1a;prop() / attr() / data() ; 1.1.1 元素固有属性值 prop() ​ 所谓元素固有属性就是元素本…

LeetCode 2145. 统计隐藏数组数目(前缀和)

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始且长度为 n 的整数数组 differences &#xff0c;它表示一个长度为 n 1 的 隐藏 数组 相邻 元素之间的 差值 。 更正式的表述为&#xff1a;我们将隐藏数组记作 hidden &#xff0c;那么 differences[i] hidden[i 1] -…

简单table分页

html <table id"pagingTable"><thead><tr><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td><td>第五列</td></tr></thead><tbody><tr><td…

logisim实验——通过2个半加器实现1-bit全加器,通过4个一位全加器构成4-bit加法器(详解)

一、由异或门和与门所构成的半加器&#xff1a; 二、由两个半加器构成的1-bit全加器&#xff1a; 注意&#xff1a;下图中所使用的四个1-bit全加器&#xff08;也就是正方形区域&#xff09;都是经过了封装的&#xff0c;所以外观与上图中的1-bit全加器有所区别&#…

LeetCode 2146. 价格范围内最高排名的 K 样物品(BFS)

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始的二维整数数组 grid &#xff0c;它的大小为 m x n &#xff0c;表示一个商店中物品的分布图。数组中的整数含义为&#xff1a; 0 表示无法穿越的一堵墙。1 表示可以自由通过的一个空格子。所有其他正整数表示该格子内的…

一、操作系统——处理机(作业)调度算法:先来先服务算法FCFS、最短作业优先算法SJF(非抢占式)、 最短剩余时间优先算法SRTN(抢占式)、最高响应比优先算法HRRN

各种调度算法的学习思路&#xff1a; 调度算法的评价指标&#xff1a; 一、先来先服务算法&#xff08;FCFS&#xff09;&#xff1a;First Come First Serve 二、最短作业优先算法&#xff08;SJF非抢占式&#xff09;&#xff1a;Shortest Job First 三、最短剩余时间优先算法…

LeetCode 2147. 分隔长廊的方案数

文章目录1. 题目2. 解题1. 题目 在一个图书馆的长廊里&#xff0c;有一些座位和装饰植物排成一列。 给你一个下标从 0 开始&#xff0c;长度为 n 的字符串 corridor &#xff0c;它包含字母 ‘S’ 和 ‘P’ &#xff0c;其中每个 ‘S’ 表示一个座位&#xff0c;每个 ‘P’ 表…

二、操作系统——用信号量机制实现进程互斥、同步、前驱关系(详解)

一、什么是进程同步&#xff1f; 二、什么是进程互斥&#xff1f; 临界资源&#xff1a;一个时间段内只允许一个进程使用的资源 为了实现对临界资源的互斥访问&#xff0c;同时保证系统整体性能&#xff0c;需要遵循以下原则&#xff1a; 空闲让进。临界区空闲时&#xff…

firefox 插件 取消认证签名

Firebug Tab Mix plus :系统退出自动保存tab List。 tab mix options>Session>start/exit>when browse start>select "restore" option. zoom page 100%-downloadDownThemAll&#xff08;2016.5.26 record&#xff09; 未签名插件不能用了&#xff0c;比…

三、操作系统——生产者-消费者问题(两个同步一个互斥)

一、问题描述 信号量机制实现进程互斥的步骤&#xff1a; 设置初值为1的互斥信号量在访问临界区之间进行P操作在访问完临界区之后进行V操作 信号量机制实现进程同步的步骤&#xff1a; 设置初值为0的同步信号量在前操作之后对同步信号量执行V操作在后操作之前对同步信号量执…