首页
Search
1
pc端小米官网首页部分练习
659 阅读
2
js中的内置对象
618 阅读
3
CSS实现动画效果
597 阅读
4
DOM(节点操作children-自定义属性-)
576 阅读
5
CSS中的选择器
549 阅读
HTML
标签
JAVAScript
js数组
js函数
js基础
js循环
js对象
DOM
CSS
VUE
exercise
js练习
HTML/CSS练习
登录
Search
标签搜索
冒泡排序
css
float
clear
边框
字体
font
meta标签
声明bianl
标识符
Number
数据类型
css常用选择器
css关系选择器
css属性选择器
css伪类选择器
css伪元素
css选择器的权重
a元素的伪类
浮动
Typecho
累计撰写
35
篇文章
累计收到
0
条评论
今日撰写
0
篇文章
首页
栏目
HTML
标签
JAVAScript
js数组
js函数
js基础
js循环
js对象
DOM
CSS
VUE
exercise
js练习
HTML/CSS练习
页面
用户登录
登录
搜索到
1
篇与
的结果
2021-12-19
CSS实现动画效果
目录:一.过渡效果过渡 transition-property: 过渡效果 transition-duration: 指定过渡效果的持续时间 时间单位:s 和ms 过渡(trannsition) -通过过渡可以指定一个属性发生变化时的切换方式 -通过过渡可以创建一些非常好的效果,提升用户的体验 transition-property : 指定过渡的属性,多个属性见使用,隔开,如果所有属性过渡,则使用all关键字 transition-duration: 指定过渡效果的持续时间 单位:s和ms transition-timing-function: 过渡的时序函数 指定过渡的执行的方式 可选值: ease 默认值,慢速开始,先加速,再减速 linear 匀速运动 ease-in 加速运动 ease-out 减速运动 ease-in-out 先加速,后减速 cubic-bezier() 来指定时序函数 https://cubic-bezier.com steps() 分布执行过渡效果 可以设置一个第二个值: end,在时间结束时,执行过渡(默认) start 在时间开始时执行过渡 使用方法: transition-timing-function: cubic-bezier(.24,.95,.82,-0.88); transition-timing-function: steps(2,start); transition-delay:过渡效果的延迟,等待一段时间后执行过渡 transition-delay: 2s; 动画效果<!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: 0px; } .box1{ width: 800px; height: 800px; background-color: silver; overflow: hidden; } .box1 div{ width: 100px; height: 100px; margin-top: 20px; } .box1:hover div{ animation-play-state: paused; } .box2{ background-color: #bfa; 设置动画 必须设置关键帧 animation-nam : 要对当前元素生效的关键帧的名 animation-name: text; animation-duration : 动画的执行时间 animation-duration: 4s; 动画的延时 animation-delay: 2s; animation-timing-function:ease-in-out; 动画执行次数 animation-iteration-count 动画执行的次数 可选值: 次数 infinite 无线执行 animation-iteration-count: infinite; animation-direction:指定动画运行的方向 可选值: normal 默认值 从from 向 to 运行 每次都是这样 reverse 从 to 运行 from 每次都是这样 alternate 从from 向to 运行 重复执行动画反向执行 alternate-reverse 从to 向from运行 重复执行动画时方向执行 animation-direction: alternate; animation-fill-mode: 动画填充模式 可选值: none 默认值 动画执行完毕回到原来位置 forwards 动画执行完毕元素会停止在动画结束的位置 backwards 动画延迟等待时,元素就会处于开始位置 both 结合 forward 和backwards animation-play-state: 设置动画的执行状态 可选值: running 默认值 动画执行 paused 动画暂停 } 动画 动画和过渡类似,都可以实现一些动态效果 不同的是过渡需要在某个属性发生变化时才会触发 动画可以自动触发动态效果 设置动画效果,必须要设置一个关键帧,关键帧设置了动画执行的每一个步骤 @keyframes text { from{ margin-left: 0px; } to{ margin-left: 700px; } } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>三.变形transform 用来设置变形效果 -平移: translateX() 沿者x轴方向平移 translateY() 沿者y轴方向平移 translateZ() 沿者z轴方向平移 -平移元素,百分比是相对于自身计算的 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> 设置当前网页的视距为800px 人眼距离网页的距离 body{ perspective: 800px; } .box1{ width: 200px; height: 200px; background-color: #fba; margin: 200px auto; transition: 2s; } z轴平移:调整元素在z轴的位置,正常情况就是调整元素和人眼之间的距离 距离越大,元素离人越近 z轴平移属于立体效果(近大远小),默认情况下网页是不支持透视的, 如果需要看见效果必须需设置网页的视距 */ body{ border: 1px solid red; } body:hover .box1{ /*transform: translateZ(800px) translateX(500px); */ 旋转可以使元素沿者x y 或 z 旋转指定的角度 rotateX() rotateY() rotateZ() /* transform: rotateZ(180deg) translateZ(400px); */ transform: rotateY(180deg); 是否显示元素的背面 backface-visibility visible 显示 hidden 不显示 */ backface-visibility: visible; } 缩放:scale() 对元素进行缩放的函数 scaleX() 水平方向缩放 scaleY() 垂直方向缩放 scale() 双方向缩放 transform:scale(2) 缩放两倍 变形原点默认值center transform-origin:20px 20px; </style> </head> <body> <div class="box1"></div> </body> </html>
2021年12月19日
597 阅读
0 评论
0 点赞