2.css动画(空间转换,动画)
1空间转换
使用transform属性实现元素在空间内的位移、旋转、缩放等效果
空间：是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
空间转换也叫3D转换
1.1空间位移
使用translate实现元素空间位移效果
1.1.1translatez轴
/* 3d变换连写 transform: translate3d(x轴,y轴,z轴) */transform: translateZ(400px)
1.1.2perspective(透视)属性
使用perspective属性实现透视效果
transform: translateZ(400px);看不到z轴的变化情况,因为大小不变看不出变化;
通过给父级加perspective(透视)属性
(取值推荐800-1200透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。)
,实现近大远小,近实远虚的效果
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* transform: translateZ(400px);看不到z轴的变化情况,因为大小不变看不出变化;通过给父级加perspective(透视)属性(取值推荐800-1200透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。),实现近大远小,近实远虚的效果 */body {perspective: 800px;}.box {width: 200px;height: 200px;background-color: pink;transition: all .8s;margin: 200px auto;}.box:hover {transform: translate3d(400px, 200px, 200px);/* 3d变换连写 transform: translate3d(x轴,y轴,z轴) */}</style>
</head><body><div class="box"></div>
</body></html>1.2空间旋转
3d空间旋转
transform: rotate3d(x, y, z, 角度度数):用来设置自定义旋转轴的位置及旋转的角度;
x，y，z 取值为0-1之间的数字
角度单位是:deg,turn
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;/* background-color: pink; */margin: 200px auto;}.box img {width: 100%;transition: all .8s;height: 100%;}.box:hover img{/* transform: rotatex(180deg ); *//* x轴,正值从上往下翻 *//* transform: rotatey(360deg ); *//* y轴,正值从左往右翻 *//* transform: rotatez(180deg ); *//* z轴,正值从顺时针转圈 */transform: rotate3d(1,1,1,1turn)/* 3d空间旋转 transform: rotate3d(x, y, z, 角度度数):用来设置自定义旋转轴的位置及旋转的角度;x，y，z 取值为0-1之间的数字角度单位是:deg,turn*/}</style>
</head><body><div class="box">
<img src="../images/heart.png" alt=""></div>
</body></html>1.3立体呈现(transform-style: preserve-3d)
由于perspective透视属性不能呈现立体图形，perspective只增加近大远小、近实远虚的视觉效果。
所以我们对子元素的父元素使用transform-style: preserve-3d; 使子元素处于真正的3d空间.
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {position: relative;transform-style: preserve-3d;width: 200px;height: 200px;margin: 100px auto;background-color: aqua;transition: all .9s;}.box:hover {transform: rotatey(0.5turn);}.one,.two {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: red;transform: translateZ(100px);}.two {background-color: pink;transform: translateZ(-100px);}</style>
</head><body><div class="box"><div class="one">前面</div><div class="two">后面</div></div>
</body></html>1.4立体按钮
鼠标移动到'首页'时,上方的index旋转至正面,实现代码如下.
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}a {text-decoration: none;color: #fff;}.box {width: 800px;height: 50px;margin: 100px auto;}.box li {perspective:800px;width: 120px;height: 50px;float: left;margin-right: 50px;}.box li a {/* 开启3d */transform-style: preserve-3d;position: relative;display: block;width: 100%;height: 100%;/* background-color: pink; */transition: all .9s;}.box li a:hover {transform: rotateX(-90deg);}.box li span {position: absolute;left: 0;top: 0;display: block;width: 100%;height: 100%;text-align: center;line-height: 50px;}.box li span:first-child {transform:translatey(-25px) rotateX(90deg) ;background-color: yellowgreen;}.box li span:last-child {background-color: blue;transform: translateZ(25px);}</style>
</head><body><div class="box"><ul><li><a href="#"><span>index</span><span>首页</span></a></li><li><a href="#"><span>login</span><span>登录</span></a></li><li><a href="#"><span>register</span><span>注册</span></a></li></ul></div>
</body></html>注意:包含'index'的span需要先y轴上升高盒子高度的一半(25px),然后再绕x轴转90度;
.box li span:first-child {transform:translatey(-25px) rotateX(90deg) ;background-color: yellowgreen;}1.5 3d缩放 scale
正常情况下z轴正对我们的方向,即使z轴的高放大我们也无法看到,
所以通过 perspective的近大远小效果,来看到z轴的高的放大,盒子向内转90度后,盒子的z轴高度就能被我们看到.
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {perspective: 800px;/* 透视默认中心点在盒子中间,所以以后记得把盒子居中 */}.box {width: 400px;height: 400px;background-color: pink;margin: 200px auto;transition: all .9s;}.box:hover {/* transform: scalex(2); *//* scalx,放大的是宽 *//* transform: scaley(2); *//* scaly,放大的是高 */transform: scalez(200) rotatex(90deg);/* scalz,放大的是高 */}</style>
</head><body><div class="box"></div>
</body></html>2.动画animation
过渡与动画的区别?
1.过渡实现的是2个状态间的变化过程,而动画可以实现多个状态间的变化过程.,且动画过程可控（重复播放、最终画面、是否暂停）
2.过渡通常要与伪类选择器:hover搭配使用,而动画不必要
2.1 实现动画的步骤
2.1.1 定义一个动画 @keyframes 动画名{}
@keyframes run {100%{background-position: -1680px 0;}2.1.1.1定义动画第一种方式
@keyframes move{from{transform: translate(0, 0);}to{transform: translate(1000px, 0);}}2.1.1.2定义动画第二种方式
@keyframes run {0%{background-position: 0 0; }100%{background-position: -1680px 0;}}注意:
1.0%到100%之间可以写多个值,如0%,25%,50%,75%,100%
2.如果from或者0%的盒子位置状态不发生变化可以省略,如:
@keyframes run {100%{background-position: -1680px 0;}}2.1.2 调用动画 animation: 动画名 动画花费时长
animation: run 2s infinite alternate linear;
2.1.3
animation的连写方式:
2.1.4
animation的部分属性和属性值:
2.2 逐帧动画
使用steps实现逐帧动画
逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。
animation-timing-function: steps(N)；含义:将动画过程等分成N份
实现剑客奔跑效果
精灵图:
注意:
1.定义动画中(keyframs中)改变背景图的位置移动的距离就是精灵图的宽度.
@keyframes run {100%{background-position: -1680px 0;}}2.添加速度曲线steps(n)时,n就是精灵图上小图的个数.
animation: run 2s steps(12) infinite,move 3s infinite linear;3.添加无限重复效果infinite
animation: run 2s steps(12) infinite,move 3s infinite linear;代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 140px;height: 140px;background-color: green;/* border-radius: 50%; */background-image: url(../images/bg.png);animation: run 2s steps(12) infinite,move 3s infinite linear;}@keyframes run {100%{background-position: -1680px 0;}}/* @keyframes move {100%{transform: translate(1900px,0) rotate(3turn);}} */</style>
</head>
<body><div class="box"></div>
</body>
</html>2.3 轮播图实现
实现轮播框内七个图无缝循环播放,鼠标移动上去会暂停.
注意:
当原本七个图结束后会出现空白,同时会突兀的转到第一二三张图出现在展示框内.
为了解决这个问题,使不出现空白并且使连接第一二三张图更加无缝,我们在原本的七个li后增加三个li,这三个li复制于前三张图,所以其实ul中一共有7+3=10张图.
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 600px;height: 150px;border: 3px solid #000;margin: 100px auto;overflow: hidden;}.box ul {width: 2000px;list-style: none;animation: move 6s infinite linear;}ul:hover{animation: move 3s infinite linear paused;}.box ul li {float: left;}a {display: block;width: 200px;height: 150px;}img {width: 100%;height: 100%;}@keyframes move {100% {transform: translate(-1400px, 0);}}</style>
</head><body><div class="box"><ul><li><a href="#"><img src="../images/1.jpg" alt=""></a></li><li><a href="#"><img src="../images/2.jpg" alt=""></a></li><li><a href="#"><img src="../images/3.jpg" alt=""></a></li><li><a href="#"><img src="../images/tyre1.png" alt=""></a></li><li><a href="#"><img src="../images/tyre.png" alt=""></a></li><li><a href="#"><img src="../images/product.jpg" alt=""></a></li><li><a href="#"><img src="../images/rotate.png" alt=""></a></li><li><a href="#"><img src="../images/1.jpg" alt=""></a></li><li><a href="#"><img src="../images/2.jpg" alt=""></a></li><li><a href="#"><img src="../images/3.jpg" alt=""></a></li><!-- 解决动画留白问题,在后面补上最前面三个图,造成一种接到第一个的假象 --></ul></div>
</body></html>2.css动画(空间转换,动画)相关推荐
- CSS的补充（3 空间转换 动画）
一.空间转换 属性 transform 语法 transform:translate3d(x,y,z) 透视 属性 perspective(添加给父级)视距,指人眼到屏幕的距离 取值 像素单位,数一般 ...
- 【CSS3】 平面转换 空间转换 动画
目录 平面转换 平移 缩放 倾斜 旋转 transform复合属性 空间转换 空间位移 空间旋转 呈现立体图形 空间缩放 动画 动画属性 steps逐帧动画 多组动画 平面转换 CSS3中动画效果包括 ...
- CSS 空间转换3D和动画
空间转换3D 3D坐标系 一定要记住3个坐标轴取值的正反: X 轴 往右越大,是正值, 否则反之 Y 轴 往下越大,是正值,否则反之 Z轴 (指向我们)越大,是正值,否则反之 3D位移 完整写法 tr ...
- CSS空间转换和动画
一.空间转换 3D 3D坐标系 3D 坐标系比2D 多了一个Z轴. 一定要记住3个坐标轴取值的正反: X 轴 往右越大,是正值, 否则反之 Y 轴 往下越大,是正值,否则反之 Z轴 (指向我们)越大, ...
- CSS——空间转换 和 动画
一.空间转换 空间:x.y.z三个坐标轴,z轴和用户的视线在一条直线上,z轴的正轴指向用户自己:空间转换也叫3D转换:(不是网页开发重点.因为目前设计师追求简洁风,空间转换用得少) 属性:transf ...
- 浅学一点空间转换3D和动画知识
一 . 空间转换3D 3D坐标系 3D坐标系比2D多了一个Z轴. 一定要记住3个坐标轴取值的正反: X 轴 往右越大,是正值, 否则反之 Y 轴 往下越大,是正值,否则反之 Z轴 (指向我们)越大,是 ...
- CSS转换动画与移动web
CSS转换与移动web 一.课前导学 1.阶段目标: 使用字体图标.平面转换.动画等C3属性丰富网页效果和呈现方式 2.CSS3 目标:使用平面.空间转换和动画属性,丰富网页元素 3.Flex 了解移 ...
- 空间转换 3D； 动画（重点）
一.空间转换 3D 1. 3D坐标系 3D 坐标系比2D 多了一个Z轴. 一定要记住3个坐标轴取值的正反: X 轴 往右越大,是正值, 否则反之 Y 轴 往下越大,是正值,否则反之 Z轴 (指向我 ...
- HTML里关于空间转换3D和动画效果的实现
一.3D坐标系 一定要记住3个坐标轴取值的正反: X 轴 往右越大,是正值, 否则反之 Y 轴 往下越大,是正值,否则反之 Z轴 (指向我们)越大,是正值,否则反之 3D 位移动 transform: ...
最新文章
- iOS安全攻防（十七）：Fishhook
- asp.net模版页面的高级应用
- 用C++开发与调用WebService的例子
- [转]Django 好用的第三方包
- 记一次海洋cms任意代码执行漏洞拿shell(url一句话)
- MSSQL 同步两个数据库的示例
- python爬虫框架论文开题报告范文_论文开题报告范文
- 关于HikariCP的见解
- DongTai--被动型IAST工具部署体验
- 找不到本地计算机策略组,Win10家庭版找不到本地组策略gpedit.msc解决办法
- 国内首款红外测温5G手机；华为5G汽车模组正式商用；台湾发放首张5G牌照
- NET Reflector 8 使用
- 用数学语言说我爱你怎么说_你会说我的语言吗
- 计算机二级考试公网入口和教育网入口,考试入口
- IT经理-从新手到老鸟
- 【Bugfix系列】/usr/bin/ld: cannot find -lxxx 的解决办法
- 2019年淘宝新店如何引流
- Java将对象的属性值合并
- Python数据可视化第 2 讲：matplotlib 绘图中文字体设置
- Spring基于AspectJ实现AOP操作