关键词：
CSS动画
// CSS'animation
// 7 如何自定义用户代码片段：VSCode =》左下角设置 =》用户代码片段 =》新建全局代码片段文件... =》自定义片段名称 =》编辑用户片段 =》ctrl+S 保存
// CSS的动画
"Print to console":
"prefix": "CSS'animation",
"body": [
"<!DOCTYPE html>",
"<html lang=\\"en\\">",
"<head>",
" <meta charset=\\"UTF-8\\">",
" <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\">",
" <title>动画</title>",
" <style>",
" .box1",
" width:700px;",
" height:700px;",
" background-color: #ddd;",
" transition:all 2s;",
" ",
" .box2",
" margin-left:0;",
" width:100px;",
" height:100px;",
" background-color: #ff0;",
" /* 加上动画效果 */",
" /* 动画名字 */",
" animation-name:identifier;",
" /* 动画执行时间 */",
" animation-duration: 2s;",
" /* 动画的延时 */",
" animation-delay: .1s;",
" /* 动画的时序函数 */",
" animation-timing-function: ease-in-out;",
" /* 动画的简写方式(有延时则写在执行时间后) animation:2s identifier .1s ease-in-out; */",
"",
" /* 动画执行的次数 */",
" animation-iteration-count:infinite;",
" /* animation-iteration-count:动画执行的重复次数",
" 可选值：",
" infinite 无限执行",
" n 任意正整数",
" */",
" animation-duration:alternate ;",
" /* animation-duration: 指定动画运行方向",
" 可选值：",
" normal 默认的从from向to运行，每次都是这样",
" reverse 从to向from运行，每次都是这样",
" alternate 从from 向to运行重复执行动画时反向执行",
" alternate-reverse 从to 向from运行重复执行动画时反向执行",
" */",
" /* 设置动画的执行状态 */",
" animation-play-state:running;",
" /* animation-play-state:设置动画的执行状态",
" 可选值：",
" running 默认值 动画执行",
" paused 动画暂停",
" */",
" /* 动画的填充模式 */",
" animation-fill-mode:none;",
" /* 可选值：",
" none 默认值，动画执行完毕元素回到原来的状态",
" forwards 动画执行完毕元素保持最终状态",
" backwards 动画延时等等时，元素就会处于开始位置",
" both 结合了forwards 和 backwards",
" */",
" ",
" .box1:hover .box2",
" margin-left:600px; ",
" ",
" /* 动画和过渡效果类似，都是可以实现一些动态的效果 ",
" 不同的是过渡需要在某个属性发生变化时才会触发",
" 动画可以自动触发动态效果",
" 首先，设置动画效果，必须先要设置一个关键帧，关键设置了动画执行每一个步骤",
" */",
" @keyframes identifier/* @关键帧 关键帧的名字 */",
" /* from（或0%）表示动画的开始位置 */",
" from",
" margin-left:0;",
" ",
" /* from（100%）动画的结束位置 */",
" to",
" margin-left:600px;",
" ",
" ",
" </style>",
"</head>",
"<body>",
" <div class=\\"box1\\">",
" <div class=\\"box2\\"></div>",
" </div>",
"</body>",
"</html>",
],
"description": "CSS动画"
@沉木
vscode自定义代码片段——css动画(代码片段)
CSS动画//CSS'animation//如何自定义用户代码片段：VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存//CSS的动画"Printtoconsole":"prefix"... 查看详情
vscode自定义代码片段6——css选择器(代码片段)
...代码片段//CSS'selector//6如何自定义用户代码片段：VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存//CSS选择器 "Printtoconsole": "pref... 查看详情
csscss动画阴影文本-css自定义属性(代码片段)
vscode自定义代码片段3——url大全(代码片段)
url大全 //url' //3如何自定义用户代码片段：VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //url大全 "Printtoconsole": "prefix":... 查看详情
jquery动画之自定义动画(代码片段)
...成后，立即执行的回调函数。作用：执行一组CSS属性的自定义动画示例代码：<!DOCTYPEhtml><htmllang="en"><head><me 查看详情
vscode自定义代码片段1——vue主模板(代码片段)
VSCode自定义代码片段(vue主模板) //vue //1，自定义用户代码片段：VSCode=》左下角设置=》用户代码片段=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //vue主模板 "Printtoconsole": "prefix":"vue"... 查看详情
vscode自定义代码片段8——声明函数(代码片段)
声明函数 //f' //8如何自定义用户代码片段：VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //声明函数 "Printtoconsole": "prefix"... 查看详情
vscode自定义代码片段3——url大全(代码片段)
url大全 //url' //3如何自定义用户代码片段：VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //url大全 "Printtoconsole": "prefix":... 查看详情
vscode自定义代码片段5——html元素结构(代码片段)
...素结构 //HTML'element //5如何自定义用户代码片段：VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //HTML元素结构 "Printtoconsole": "... 查看详情
vscode中自定义emmet代码片段(代码片段)
原文：https://blog.csdn.net/zjthorse/article/details/83048869vscode中内置了Emmet的扩展，这让我们在写网页代码时方便了很多，但是有时我们也需要自定义一些Emmet的代码片段来实现一些特殊代码的生成，比如：自动导入一些来自CDN的js或css... 查看详情
vscode自定义代码片段10——数组的响应式方法(代码片段)
...式方法 //arr'fuction //10如何自定义用户代码片段：VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //数组的响应式方法: "Printtoconsole"... 查看详情
vscode自定义代码片段11——vue路由的配置(代码片段)
...由的配置 //v'router //11如何自定义用户代码片段：VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //vue的路由 "Printtoconsole": "pref... 查看详情
vscode自定义代码片段2——.vue文件的模板(代码片段)
.vue文件的模板 //v' //2如何自定义用户代码片段：VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //.vue文件的模板 "Printtoconsole": &#... 查看详情
vscode自定义代码片段12——javascript的promise对象(代码片段)
...romise对象 //JS'Promise //12如何自定义用户代码片段：VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //JavaScript的Promise对象 "Printtoconsole&... 查看详情
vscode自定义代码片段13——vue的状态大管家(代码片段)
...状态大管家 //V'Vuex //13如何自定义用户代码片段：VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //Vue的状态大管家 "Printtoconsole": ... 查看详情
vscode自定义代码片段13——vue的状态大管家(代码片段)
...状态大管家 //V'Vuex //13如何自定义用户代码片段：VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //Vue的状态大管家 "Printtoconsole": ... 查看详情
vscode自定义代码片段15——git命令操作一个完整流程(代码片段)
...整流程 //git'command //15如何自定义用户代码片段：VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //git命令操作一个完整流程 "Printtocon... 查看详情
vscode自定义代码片段9——js中的面向对象编程(代码片段)
...向对象编程 //JS'OOP //9如何自定义用户代码片段：VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //JS中的面向对象编程 "Printtoconsole... 查看详情