css动画（详解带图）
css动画
- 过渡
- 过渡 （transition）的作用
- 常用属性
- 实例
- 动画
- 动画的简介
- 设置关键帧
- 动画常用属性
- 实例
- 变形
- 变形(transform)的简介
- 常用属性(transform)
- Z轴平移实例
- 旋转
- 旋转(transform)的简介
- (transform)常用属性
- 时钟实例
- 立方体实例
- 缩放
- (transform)常用属性
- 图片放大实例:
过渡
过渡 （transition）的作用
1.通过过渡可以指定一个属性发生变化时的切换方式
2.通过过渡可以创建一些非常好的效果，提升用户的体验常用属性
2.transition-duration:指定过渡效果的持续时间
时间单位:s 和 ms 1s=1000ms
可以分别指定时间（transition-duration: 100ms,2s;）3.transition-timing-function:过渡的时序函数
指定过渡的执行的方式
可选值:
ease 默认值 ，慢速开始，先加速，再减速实例
linear 匀速运动
ease-in加速运动
减速运动ease-out
先加速在减速ease-in-out
cubic-bezier(0,.5,.97,-0.31)用贝塞尔曲线来指定时序函数
分步steps(3)可以设置一个第二个值，end在时间结束时执行过渡（默认值）例：steps(3,end)，start在时间开始时执行过程
4. transition-delay:过渡效果的延迟，等待一段时间后在执行过渡
transition-delay:2s ;
5.transition:可以同时设置过度相关的所有属性,只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟。
<!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;}.box1{width: 800px;height: 400px;background-color: silver;margin-left: 0;}.box1 div{width: 100px;height: 100px;margin-bottom: 100px;}.box2{background-color: red;/* transition: all 2s; */transition-property: all;transition-duration: 2s;/* transition-timing-function:cubic-bezier(0,.5,.97,-0.31) ; *//* transition-timing-function: steps(3,end); *//* transition-delay:2s ; */transition: margin-left 2s 1s;} .box3{background-color: orange;transition-property: all;transition-duration: 2s;transition-timing-function: ease;}.box1:hover div{/* width: 200px; *//* height: 200px; *//* background-color: orange; */margin-left: 700px;}</style>
</head>
<body><div class="box1"><div class="box2"></div><div class="box3"></div></div>
</body>
</html>
动画
动画的简介
1.动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发动画可以自动触发动态效果
2.设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤设置关键帧
/*@keyframes后跟的是关键帧的名字（可以随便起）*/@keyframes text {/*from表示动画的开始位置 也可以使用0%*/from{margin-left: 0;}/*to动画的结束位置 也可以使用100%*/to{margin-left: 700px;}}
动画常用属性
1.animation-name:指定要对当前元素生效的关键帧的名字2.animation-duration:指定动画的执行时间3.animation-timing-function:跟transition-timing-function用法一样4. animation-iteration-count:指定动画执行的次数 animation-iteration-count:infinite;（无限执行）5.animation-direction:指定动画运行的方向
normal 默认值 从from向to运行 每次都是这样
reverse 从 to 向 from 运行 每次都是这样
alternate 从 from 向 to 运行 重复执行动画时反向执行
alternate-reverse 从 to 向 from 运行 重复执行动画时反向执行6. animation-play-state:设置动画的执行状态
可选值:
running 默认值 动画执行
paused 动画暂停7.animation-fill-mode:指定动画的填充模式
可选值:
none 默认值 动画执行完毕元素回到原来位置
forwards 动画执行完毕元素会停止在动画结束的位置
backwards 动画延时等待时，元素就会处于开始位置
both 结合了 forwards 和 backwards8.animation-delay:设置动画的延时8.transition:可以同时设置动画相关的所有属性,只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟。
sprite animation(百度搜索可以得到动画素材)
实例
<!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>.box1{background-image: url(./image/雪人.jpg);height:180px;width: 123px;margin: 0 auto;animation-name: run;animation-duration: 2s;animation-iteration-count: infinite;animation-timing-function: steps(4);}@keyframes run{from{background-position: 0 0;}to{background-position: -487px 0;}}</style>
</head>
<body><div class="box1"></div>
</body>
</html>
实例:
代码:
<!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>.outer{height: 500px;border-bottom: 10px black solid;margin: 50px auto;/* 解决外边距重叠 */overflow: hidden;}.outer div{float: left;width: 100px;height: 100px;border-radius: 50%;background-color: red;animation: ball .3s forwards linear infinite alternate;}div.box2{background-color: orange;animation-delay: .1s;}div.box3{background-color: yellow;animation-delay: .2s;}div.box4{background-color: yellowgreen;animation-delay: .3s;}div.box5{background-color: blueviolet;animation-delay: .4s;}div.box6{background-color: pink;animation-delay: .5s;}div.box7{background-color: skyblue;animation-delay: .6s;}div.box8{background-color: chocolate;animation-delay: .7s;}div.box9{background-color: blue;animation-delay: .8s;}/* 小球下落的动画 */@keyframes ball{from{margin-top: 0;}to{margin-top: 400px; }} </style>
</head>
<body><div class="outer"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div><div class="box6"></div><div class="box7"></div><div class="box8"></div><div class="box9"></div></div></body>
</html>
变形
变形(transform)的简介
1.变形就是指通过css来改变元素的形状或位置
2.变形不会影响到页面的布局(不会脱离文档流)
3.平移元素，百分比是相对于自身计算的常用属性(transform)
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>html{/* 设置当前网页的视距为800px，人眼距离网页的距离 */perspective: 800px;}.box1{width: 400px;height: 400px;margin: 0 auto;margin-top: 200px;background-color: silver;} .box2{width: 150px;height: 200px;background-color:skyblue; margin: 0 auto;}.box2:hover{transform: translateZ(200px);}</style>
</head>
<body><div class="box1"><div class="box2"></div></div></body>
</html>
实例:
代码:
<!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>*{background-color: rgb(155, 148, 148);}/* .box1{width: 200px;height: 200px;background-color: #bfa;margin: 0 auto;margin-top: 200px;/* transform用来设置元素的变形效果 *//* transform: translateX();沿着x轴平移 *//* transform: translateY();沿着y轴平移 *//* transform: translateZ();养着z轴平移 *//* transform: translateZ(-50%) translateY(-50%); } */.box2{width: 150px;height: 200px;background-color:skyblue;margin: 0 auto;margin-top: 200px;transition: transform , .3s;}.box2:hover{transform: translateY(-10px);box-shadow:0 0 10px rgba(0, 0, 0, .3);}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>
旋转
旋转(transform)的简介
1.通过旋转可以使用元素沿着x y 或 z旋转指定的角度
(transform)常用属性
<!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>html{perspective: 800px;}.box1{width: 200px;height: 200px;margin: 0 auto;margin-top: 200px;background-color: silver;/* transform: rotateX();transform: rotateY();transform: rotateZ(); */transition: all 2s;} /* .box2{width: 150px;height: 200px;background-color:skyblue; margin: 0 auto;} */.box1:hover{transform: rotateY(180deg) translateZ(400px);}</style>
</head><body><div class="box1"></div><div class="box2"></div>
</body>
</html>
实例:
<!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>html{perspective: 800px;}.box1{width: 200px;height: 200px;margin: 0 auto;margin-top: 200px;background-color: silver;/* transform: rotateX();transform: rotateY();transform: rotateZ(); */transition: all 2s;} /* .box2{width: 150px;height: 200px;background-color:skyblue; margin: 0 auto;} */.box1:hover{/* transform: rotateY(180deg) translateZ(400px); */transform: translateZ(400px) rotateY(180deg);}</style>
</head><body><div class="box1"></div><div class="box2"></div>
</body>
</html>
时钟实例
素材:
效果:
代码:
<!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;}/* 设置表的样式 */.clock{width: 500px;height: 500px;margin: 0 auto;border-radius: 50%;/* border: 10px solid black; */position: relative;background-image: url(./image/表盘.jpg);background-size:cover;background-position:center;}.clock > div{position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}/* 设置时针 */.hour-wrapper{ height: 40%;width: 40%;animation: run 7200s linear infinite;}.hour{height: 50%;width: 6px;background-color: black;margin: 0 auto;}/* 设置分针 */.min-wrapper{height: 60%;width: 60%;animation: run 600s steps(60) infinite;}.min{height: 50%;width:4px;background-color: black;margin: 0 auto;}/* 设置秒针 */.sec-wrapper{height: 80%;width: 80%;animation: run 10s steps(60) infinite;}.sec{height: 50%;width:2px;background-color: red;margin: 0 auto;}/* 旋转的关键帧 */@keyframes run{from{transform: rotateZ(0deg);}to{transform: rotateZ(360deg);}}</style>
</head>
<body><!-- 创建表的容器 --><div class="clock"><!-- 创建时针--><div class="hour-wrapper"><div class="hour"></div></div><!-- 创建分针--><div class="min-wrapper"><div class="min"></div></div><!-- 创建秒针--><div class="sec-wrapper"><div class="sec"></div></div></div></body>
</html>
立方体实例
用到的属性:
/* 设置当前网页的视距为800px，人眼距离网页的距离 */
perspective: 800px;
/* transform默认情况下是2d变形 如果想要设置3d变形效果需要设置 transform-style: preserve-3d;*/
transform-style: preserve-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>html{/* 设置当前网页的视距为800px，人眼距离网页的距离 */perspective: 800px;}.cube{width: 400px;height: 400px;margin: 150px auto;/* transform默认情况下是2d变形 如果想要设置3d变形效果需要设置 transform-style: preserve-3d;*/transform-style: preserve-3d;animation: rotate 3s linear infinite;}.cube > div{opacity: .8;position: absolute;}img{width: 400px;height: 400px;vertical-align: top;}.box1{transform: rotateY(90deg) translateZ(200px);}.box2{transform: rotateY(-90deg) translateZ(200px);}.box3{transform: rotateX(90deg) translateZ(200px);}.box4{transform: rotateX(-90deg) translateZ(200px);}.box5{transform: rotateX(0deg) translateZ(-200px);}.box6{transform:translateZ(200px) rotateY(180deg) ;} @keyframes rotate{from{transform: rotateX(0) rotateZ(0);}to{/* turn表示转一圈 */transform: rotateX(1turn) rotateZ(1turn);}}</style>
</head>
<body><!-- 创建一个外部的容器 --><div class="cube"><!-- 引入图片 --><div class="box1"><img src="./beauty_image/2.jpg" alt=""></div><div class="box2"><img src="./beauty_image/3.jpg" alt=""></div><div class="box3"><img src="./beauty_image/4.jpg" alt=""></div><div class="box4"><img src="./beauty_image/5.jpg" alt=""></div><div class="box5"><img src="./beauty_image/6.jpg" alt=""></div><div class="box6"><img src="./beauty_image/7.jpg" alt=""></div> </div>
</body>
</html>
缩放
(transform)常用属性
transform-origin: 0 0;设置变形的原点 默认值(center)
1.scaleX(2)沿着X轴放大两倍;
2.scaleX(.2)沿着X轴缩小两倍;
3.scaleY(2)沿着Y轴放大两倍;
4.scaleY(.2)沿着Y轴缩小两倍;
4.scale(2)沿着Y轴和X轴放大两倍;
4.scale(.2)沿着Y轴和X轴缩小两倍;
图片放大实例:
<!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>.box1{width: 100px;height: 100px;background-color: #bfa;transition: 2s;margin: 100px auto;}.box1:hover{transform: scale(2);}.img-wrapper{margin: 100px auto;width: 200px;height: 200px;/* border: 1px red solid; */overflow: hidden;}img{transition: .8s;}.img-wrapper:hover img{transform: scale(1.2);}</style>
</head>
<body><div class="box1"></div><div class="img-wrapper"><img src="./beauty_image/3.jpg" width="100%" height="100%"></div>
</body>
</html>
css动画（详解带图）相关推荐
- css动画详解 (transition animation)
属性 transition(4个属性): transition: width 5s ease 3s; /*简写*/transition-property: width; /*过渡属性名*/transi ...
- CSS基本操作详解及截图演示
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
- [转] ReactNative Animated动画详解
http://web.jobbole.com/84962/ 首页 所有文章 JavaScript HTML5 CSS 基础技术 前端职场 工具资源 更多频道▼ - 导航条 -首页所有文章JavaScr ...
- [转]超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解 本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究. 本文地址:http://www.zhangxinxu.com/word ...
- 2000坐标系xy坐标几位_详解| 带你认识新一代坐标系——2000国家大地坐标系
原标题:详解| 带你认识新一代坐标系--2000国家大地坐标系 2018年7月1日起全面使用2000国家大地坐标系的消息,让不少人感慨国之大动作的同时,纷纷摸不着头脑.何为2000国家大地坐标系?对日 ...
- Android Animation动画详解（二）： 组合动画特效
前言 上一篇博客Android Animation动画详解(一): 补间动画 我已经为大家介绍了Android补间动画的四种形式,相信读过该博客的兄弟们一起都了解了.如果你还不了解,那点链接过去研读一 ...
- 超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解 本文摘自超级强大的SVG SMIL animation动画详解_Zoomla!逐浪CMS官网 (z01.com),网站看上去有年头了,担心哪天会 ...
- css名词解析,小说CSS样式详解
CSS格式详解 字体格式(font) 字体 表格题目位置 once:只朗读一次(默许值): always:多次朗读: inherit:启当: 文字年夜小 font-size: xx-small | x ...
- vue3过渡和动画详解
vue3过渡和动画详解 一.认识动画 二.Vue的transition动画 三.Transition组件的原理 四.class添加的时机和命名规则 五.过渡css动画 六.同时设置过渡和动画 七.过渡 ...
最新文章
- synchronized底层是怎么实现的？年薪超过80万！
- 那些年我们程序员欠下的技术债
- 未来期间的过帐运行已申请（检查条目）
- bootstrap 模态 modal 小例子【转】
- 开发你的酷炫装备 Jetson TX1使用指南
- html课做一个网页,菜鸟自学建站 HTML 第三课 制作我的第一个网页_html/css_WEB-ITnose...
- mysql 日志 设置 set_MySQL 慢查询日志的开启与配置
- centos上升级node_在centos7安装nodejs并升级nodejs到最新版本
- 分库分表读写分离总结
- Fortinet SIEM 设备被曝存在硬编码 SSH 公钥
- 如何在Mongoose中更新/更新文档？
- Digilent提供的Pmod AD5驱动程序
- java wifi 对讲机_freevoice(局域网对讲机)——Android4项目实战视频教程 - 移动编程 - 私塾在线 - 只做精品视频课程服务...
- Allegro导入Altium Designer的pcb文件
- 机器学习——概率论基础
- android蜂巢效果、环形菜单、Kotlin影视应用、简约时钟、查看导出App、支付宝AR扫码效果等源码...
- 关闭 C4996 警告(_CRT_SECURE_NO_DEPRECATE)方法
- 反击！紫光集团怒斥赵伟国
- Java实现输出特殊偏旁的汉字的功能
- 算法竞赛进阶指南：0x14：后缀数组