VSCode自定义代码片段7——CSS动画
Posted 浅香沉木
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VSCode自定义代码片段7——CSS动画相关的知识，希望对你有一定的参考价值。
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自定义代码片段7——CSS动画的主要内容，如果未能解决你的问题，请参考以下文章