【web前端HTML5+CSS3】08CSS--animation（动画） less
2024-06-14 23:19:41
目录
1.过渡
2.米兔过渡练习
3.动画
4.奔跑的少年练习
5.关键帧
6.变形平移
7.Z轴平移
8.旋转
9.鸭子表练习
10.复仇者联盟练习
11.缩放
12.less简介
13.less中的变量
14.父元素&扩展&混合函数
15.less的补充
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>*{margin: 0;padding: 0;}.box1{width: 800px;height: 800px;background-color: silver;overflow: hidden;}.box1 div{width: 100px;height: 100px;margin-bottom: 100px;margin-left: 0;}.box2{background-color: #bfa;/* margin-left: auto; *//* transition:all 2s; *//* 过渡（transition）- 通过过渡可以指定一个属性发生变化时的切换方式- 通过过渡可以创建一些非常好的效果，提升用户的体验*//* transition-property: 指定要执行过渡的属性 多个属性间使用,隔开 如果所有属性都需要过渡，则使用all关键字大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡*//* transition-property: height , width; *//* transition-property: all; *//*transition-duration: 指定过渡效果的持续时间时间单位：s 和 ms 1s = 1000ms*//* transition-duration: 100ms, 2s; *//* transition-duration: 2s; *//* transition-timing-function: 过渡的时序函数指定过渡的执行的方式 可选值：ease 默认值，慢速开始，先加速，再减速linear 匀速运动ease-in 加速运动ease-out 减速运动ease-in-out 先加速 后减速cubic-bezier() 来指定时序函数https://cubic-bezier.comsteps() 分步执行过渡效果可以设置一个第二个值：end ， 在时间结束时执行过渡(默认值)start ， 在时间开始时执行过渡*//* transition-timing-function: cubic-bezier(.24,.95,.82,-0.88); *//* transition-timing-function: steps(2, start); *//* transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡 *//* transition-delay: 2s; *//* transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟 */transition:2s margin-left 1s cubic-bezier(.24,.95,.82,-0.88);}.box3{background-color: orange;transition-property: all;transition-duration: 2s;}.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>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>.box1{height: 271px;width: 132px;margin: 0 auto;background-image: url(./img/11/bigtap-mitu-queue-big.png);background-position: 0 0;transition:0.3s steps(3);}.box1:hover{background-position: -396px 0;}</style>
</head>
<body><div class="box1"></div></body>
</html>3.动画
<!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>*{margin: 0;padding: 0;}.box1{width: 800px;height: 800px;background-color: silver;overflow: hidden;}.box1 div{width: 100px;height: 100px;margin-bottom: 100px;margin-left: 10px;}.box2{background-color: #bfa;/* 设置box2的动画 *//* animation-name: 要对当前元素生效的关键帧的名字 *//* animation-name: test; *//* animation-duration: 动画的执行时间 *//* animation-duration: 4s; *//* 动画的延时 *//* animation-delay: 2s; *//* animation-timing-function: ease-in-out; *//* animation-iteration-count 动画执行的次数 可选值：次数infinite 无限执行*//* animation-iteration-count: 1; *//*animation-direction指定动画运行的方向可选值：normal 默认值 从 from 向 to运行 每次都是这样 reverse 从 to 向 from 运行 每次都是这样 alternate 从 from 向 to运行 重复执行动画时反向执行alternate-reverse 从 to 向 from运行 重复执行动画时反向执行*//* animation-direction: alternate-reverse; *//* animation-play-state: 设置动画的执行状态 可选值：running 默认值 动画执行paused 动画暂停*//* animation-play-state: paused; *//* animation-fill-mode: 动画的填充模式可选值：none 默认值 动画执行完毕元素回到原来位置forwards 动画执行完毕元素会停止在动画结束的位置backwards 动画延时等待时，元素就会处于开始位置both 结合了forwards 和 backwards*//* animation-fill-mode: both; */animation: test 2s 2 1s alternate;}.box1:hover div{animation-play-state: paused;}/* 动画动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发动画可以自动触发动态效果设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤*/@keyframes test {/* from表示动画的开始位置 也可以使用 0% */from{margin-left: 0;background-color: orange;} /* to动画的结束位置 也可以使用100%*/to{background-color: red;margin-left: 700px;}}</style></head>
<body><div class="box1"><div class="box2"></div><!-- <div class="box3"></div> --></div></body>
</html>4.奔跑的少年练习
<!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>.box1{width: 256px;height: 256px;margin: 0 auto;background-image: url('./img/12/bg2.png');animation: run 1s steps(6) infinite;}/* 创建关键帧 */@keyframes run {from{background-position: 0 0;}to{background-position: -1536px 0;}}</style>
</head>
<body><div class="box1"></div>
</body>
</html>5.关键帧
<!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>.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: #bfa;animation: ball .5s 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: blue;animation-delay: .4s;}div.box6{background-color: pink;animation-delay: .5s;}div.box7{background-color: tomato;animation-delay: .6s;}div.box8{background-color: skyblue;animation-delay: .7s;}div.box9{background-color: chocolate;animation-delay: .8s;}/* 创建小球下落的动画 */@keyframes ball {from{margin-top: 0;}to{margin-top: 400px;}/* 2 to{margin-top: 400px;animation-timing-function: ease-in;}40%{margin-top: 100px;}80%{margin-top: 200px;} */}</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>6.变形平移
<!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: rgb(236, 236, 236);}.box1{width: 200px;height: 200px;background-color: #bfa;margin: 0 auto;margin-top: 200px;/* 变形就是指通过CSS来改变元素的形状或位置- 变形不会影响到页面的布局- transform 用来设置元素的变形效果- 平移：translateX() 沿着x轴方向平移translateY() 沿着y轴方向平移translateZ() 沿着z轴方向平移- 平移元素，百分比是相对于自身计算的*//* transform: translateY(-100px); */transform: translateX(100%);}/* .box2{width: 200px;height: 200px;background-color: orange;margin: 0 auto;} */.box3{background-color: orange;position: absolute;/* 这种居中方式，只适用于元素的大小确定top: 0;left: 0;bottom: 0;right: 0;margin: auto; */left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);}.box4, .box5{width: 220px;height: 300px;background-color: #fff;float: left;margin: 0 10px;transition:all .3s;}.box4:hover,.box5:hover{transform: translateY(-4px);box-shadow: 0 0 10px rgba(0, 0, 0, .3)}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><!-- <div class="box3">aaaa</div> --><div class="box4"></div><div class="box5"></div></body>
</html>7.Z轴平移
<!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>html{/* 设置当前网页的视距为800px，人眼距离网页的距离 */perspective: 800px;}body{border: 1px red solid;background-color: rgb(241, 241, 241);}.box1{width: 200px;height: 200px;background-color: #bfa;margin: 200px auto;/* z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果必须要设置网页的视距*/transition:2s;}body:hover .box1{transform: translateZ(800px);}</style>
</head>
<body><div class="box1"></div></body>
</html>8.旋转
<!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>html{perspective: 800px;}body{border: 1px red solid;background-color: rgb(241, 241, 241);}.box1{width: 320px;height: 320px;background-color: #bfa;margin: 200px auto;transition:2s;}body:hover .box1{/*通过旋转可以使元素沿着x y 或 z旋转指定的角度rotateX()rotateY()rotateZ()*//* transform: rotateZ(.25turn); *//* transform: rotateY(180deg) translateZ(400px); *//* transform: translateZ(400px) rotateY(180deg) ; */transform: rotateY(180deg);/* 是否显示元素的背面 */backface-visibility: hidden;}</style>
</head>
<body><div class="box1"><img src="an.jpg" alt=""></div></body>
</html>9.鸭子表练习
<!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>* {margin: 0;padding: 0;}/* 设置表的样式 */.clock {width: 500px;height: 500px;margin: 0 auto;margin-top: 100px;border-radius: 50%;/* border: 10px solid black; */position: relative;background-image: url(./img/13/bg3.jpg);background-size: cover;}.clock>div {position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}/* 设置时针 */.hour-wrapper {height: 70%;width: 70%;animation: run 7200s linear infinite;}.hour {height: 50%;width: 6px;background-color: #000;margin: 0 auto;}/* 设置分针 */.min-wrapper {height: 80%;width: 80%;animation: run 600s steps(60) infinite;}.min {height: 50%;width: 4px;background-color: #000;margin: 0 auto}/* 设置秒针 */.sec-wrapper {height: 90%;width: 90%;animation: run 10s steps(60) infinite;}.sec {height: 50%;width: 2px;background-color: #f00;margin: 0 auto}/* 旋转的关键帧
*/@keyframes run {from {transform: rotateZ(0);}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>10.复仇者联盟练习
<!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>html {perspective: 800px}.cube {width: 200px;height: 200px;/* background-color: #bfa; */margin: 100px auto;/* 设置3d变形效果 */transform-style: preserve-3d;/* transform: rotateX(45deg) rotateZ(45deg); */animation: rotate 20s infinite linear;/* transform:rotateY(45deg) scaleZ(2); */}.cube>div {width: 200px;height: 200px;/* 为元素设置透明效果 */opacity: 0.7;position: absolute;}img {vertical-align: top;}.box1 {transform: rotateY(90deg) translateZ(100px);}.box2 {transform: rotateY(-90deg) translateZ(100px);}.box3 {transform: rotateX(90deg) translateZ(100px);}.box4 {transform: rotateX(-90deg) translateZ(100px);}.box5 {transform:rotateY(180deg) translateZ(100px);}.box6 {transform: rotateY(0deg) translateZ(100px);}@keyframes rotate {form{transform:rotateX(0) rotateZ(0)}to{transform:rotateX(1turn) rotateZ(1turn)}}</style>
</head><body><!-- 创建一个外部的容器 --><div class="cube"><!-- 引入图片 --><div class="box1"><img src="./img/14/1.jpg"></div><div class="box2"><img src="./img/14/2.jpg"></div><div class="box3"><img src="./img/14/3.jpg"></div><div class="box4"><img src="./img/14/4.jpg"></div><div class="box5"><img src="./img/14/5.jpg"></div><div class="box6"><img src="./img/14/6.jpg"></div></div>
</body></html>11.缩放
<!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>html{perspective:800px;}.box1{width: 100px;height: 100px;background-color: #bfa;transition:2s;margin: 100px auto;/* 变形的原点 默认值 center*//* transform-origin:20px 20px; */}.box1:hover{/* 对元素进行缩放的函数：scaleX() 水平方向缩放scaleY() 垂直方向缩放scale() 双方向的缩放*/transform:scale(2)}.img-wrapper{width: 200px;height: 200px;border: 1px red solid;overflow: hidden;}img{transition: .2s;}.img-wrapper:hover img{transform:scale(1.2);}</style>
</head>
<body><div class="box1"></div><div class="img-wrapper"><img src="an.jpg" width="100%"></div></body>
</html>12.less简介
使用less要在VScode中安装以下的插件 ：
<!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>html{/* css原生也支持变量的设置 */--color:#ff0;--length:200px;}.box1{/* calc()计算函数 */width: calc(200px*2);height: var(--length);background-color: var(--color);}.box2{width: var(--length);height: var(--length);color: var(--color);}.box3{width: var(--length);height: var(--length);border: 10px solid var(--color);}</style>
</head>
<body><!-- less是一门css的预处理语言- less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式- 在less中添加了许多的新特性：像对变量的支持、对mixin的支持... ...- less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，所以浏览器无法直接执行less代码，要执行必须向将less转换为css，然后再由浏览器执行div{width:100px;}divwidth 100px--><div class="box1">aaaa</div><div class="box2">aaaa</div><div class="box3">aaaa</div>
</body>
</html>13.less中的变量
<!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><link rel="stylesheet" href="css/syntax.css">
</head>
<body><div class="box1"></div>
</body>
</html>新建syntax.less文件保存，VScode会自动生成syntax.css，在引用时引入的是syntax.css
// less中的单行注释，注释中的内容不会被解析到css中/*css中的注释，内容会被解析到css文件中
*/
.box1{background-color: #bfa;.box2{background-color: #ff0;.box4{color: red;}}.box3{background-color: orange;}
}//变量，在变量中可以存储一个任意的值
// 并且我们可以在需要时，任意的修改变量中的值
// 变量的语法： @变量名
@a:200px;
@b:#bfa;
@c:box6;.box5{//使用变量是，如果是直接使用则以 @变量名 的形式使用即可width: @a;color:@b;
}//作为类名，或者一部分值使用时必须以 @{变量名} 的形式使用
.@{c}{width: @a;background-image: url("@{c}/1.png");
}@d:200px;
@d:300px;div{// 变量发生重名时，会优先使用比较近的变量@d:115px;width: @d;height: @e;
}//可以在变量声明前就使用变量
@e:335px;div{width: 300px;// 新版的语法// height: $width;
}14.父元素&扩展&混合函数
.box1{.box2{color: red;}>.box3{color: red;&:hover{color: blue;}}//为box1设置一个hover//& 就表示外层的父元素&:hover{color: orange;}div &{width: 100px;}
}.p1{width: 100px;height: 200px;
}//:extend() 对当前选择器扩展指定选择器的样式（选择器分组）
.p2:extend(.p1){color: red;
}.p3{//直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制//mixin 混合.p1();
}// 使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins
.p4(){width: 100px;height: 100px;
}.p5{.p4;
}//混合函数 在混合函数中可以直接设置变量
.test(@w:100px,@h:200px,@bg-color:red){width: @w;height: @h;border: 1px solid @bg-color;
}div{//调用混合函数，按顺序传递参数// .test(200px,300px,#bfa);.test(300px);// .test(@bg-color:red, @h:100px, @w:300px);
}span{// 对两个颜色的平均值color: average(red,blue);
}html{width: 100%;height: 100%;
}
body {width: 100%;height: 100%;background-color: #bfa;
}body:hover{// 加深颜色background-color: darken(#bfa,50%);
}15.less的补充
//import用来将其他的less引入到当前的less
//可以通过import来将其他的less引入到当前的less中
@import "syntax2.less";.box1{// 在less中所有的数值都可以直接进行运算// + - * /width: 100px + 100px;height: 100px/2;background-color: #bfa;}想要在开发者工具中查看网页的样式的代码显示的是less中的位置，需要在设置中配置一下代码
"less.compile": {"outExt": ".wxss","compress": false, // true => remove surplus whitespace"sourceMap": true, // true => generate source maps (.css.map files)"out": true // false => DON'T output .css files (overridable per-file, see below)}【web前端HTML5+CSS3】08CSS--animation（动画） less相关推荐
- 尚硅谷新版Web前端HTML5+CSS3知识点集合篇【p1-p8】
尚硅谷新版Web前端HTML5+CSS3知识点集合笔记篇 尚硅谷新版Web前端HTML5+CSS3全套基础教程完整版(初学者零基础入门) p1(22:55) 一.软件的分类: 1.系统软件 -wind ...
- Web前端html5+css3前端开发入门学习笔记
文章目录 前言 HTML 认识HTML 1. 网页组成和本质 2.了解浏览器 3.web标准 4.HTML感知 5.HTML骨架 6.编译软件vscode的简介和使用 7.注释 8.标签组成和关系 9 ...
- web前端html5+css3学习笔记(1)
开启我的第一篇博客~~~ 记录学习html+css的笔记 目录 一.认识两位先驱 二.计算机的组成 1.硬件 2.软件 三.浏览器与内核 四.网页标准 五.HTML历史* 一.认识两位先驱 图灵:人工 ...
- 尚硅谷web前端HTML5+CSS3笔记
目录 1尚硅谷-课程简介 2尚硅谷-网页简史 3尚硅谷-HTML简史 4尚硅谷-编写你的第一个网页 5尚硅谷-安装notepad++ 6尚硅谷-自结束标签和注释 7尚硅谷-标签中的属性 8尚硅谷-文档 ...
- web前端+HTML5+CSS3学习笔记
文章目录 HTML认知 网页的基本组成和本质 HTML初始概念 HTML标签学习 HTML基础 列表 表格 表单 语义化标签 字符实体 CSS基础 基础认知 选择器 文字字体 Emmet语法 CSS进 ...
- web前端html5+css3学习笔记(3)——标签
目录 一.排版标签 1.标题标签 2.段落标签 二.语义标签 三.块级元素和行内元素 1.块级元素 2.行内元素 四.文本标签 1.常用文本标签 2.不常用文本标签 五.图片标签 六.相对路径与绝对路 ...
- 【web前端HTML5+CSS3】03CSS--layout（布局）之盒模型
目录 1.文档流 2.盒模型 3.盒模型--边框 4.盒模型--内边距 5.盒模型--外边距 6.盒子的水平布局 7.盒子的垂直布局 8.外边框的折叠 9.行内元素的盒模型 10.默认样式 11.练习 ...
- web前端html5+css3学习笔记(2)
文章目录 目录 一.标签 二.HTML基本结构 三.vscode 1.插件 2.注释 3.文档声明 四.字符编码 五.设置语言 六.页面图标 一.标签 标签(也叫元素),需要小写 <marque ...
- python 50 前端 html5 css3
1 # 前端 2 3 接下来我们进入前端知识的学习,前端的学习目的就是为我们开发的应用程序提供一个与用户进行交互的界面,前端分为HTML5.CSS3.JavaScript三大部分,我们学习内容共分 ...
最新文章
- Oracle三级联动单表地址数据
- 欧拉遗留240多年的问题，被物理学家用量子力学解决
- python爬虫教程视频-python爬虫（入门教程、视频教程）
- shell sqlplus执行sql文_各主流数据库非交互执行
- Deep GSP ： 面向多目标优化的工业界广告智能拍卖机制
- 腾讯开源国内首个H.266/VVC视频播放器
- 左侧栏下拉框HTML代码,html5下拉菜单代码
- Win10 OneDrive无法同步文件怎么办？一个命令搞定
- strict standards php报错,Bigcommerce:PHP版本升级错误解决办法_PHP教程
- java中float double利用BigDecimal运算
- 汉王考勤机 二次开发
- Ant实现自动打包部署
- 综合日语第一册第十一课
- 【鸟哥的Linux私房菜】第十二章、学习shell脚本
- 内存回收导致关键业务抖动案例分析-论云原生OS内存QoS保障
- 【CF85D】 Sum of Medians
- 如何给apk安装包去毒，避免被识别为病毒和木马
- 第十二天 结构体大全
- 路由器vueRouter
- 服务器神器——tmux