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动画相关推荐

VSCode自定义代码片段6——CSS选择器
CSS选择器自定义代码片段 { // CSS'selector // 6 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 => 新建全局代码片段文件... = ...
VSCode自定义代码片段1——vue主模板
VSCode自定义代码片段(vue主模板) {// vue// 1,自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 => 自定义片段名称 =>编辑用户片段 ...
vscode自定义代码片段（新手交流）
一.为什么要用js代码片段运用js代码片段,能有效地帮助我们提高代码效率,减少繁琐代码的记忆过程.也是搜集过很多代码片段设置的文章,但步骤不太明确,经实际操作后整理了以下步骤,供大家学习参考,如有不 ...
VSCode自定义代码片段2——.vue文件的模板
.vue文件的模板 {// v'// 2 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... => 自定义片段名称 => ...
VSCode自定义代码片段13——Vue的状态大管家
Vue的状态大管家 {// V'Vuex// 13 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片段名称 ...
VSCode自定义代码片段11——vue路由的配置
vue路由的配置 {// v'router// 11 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片段名称 ...
VSCode自定义代码片段15——git命令操作一个完整流程
git命令操作一个完整流程 {// git'command// 15 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 => 新建全局代码片段文件... =&g ...
VSCode自定义代码片段3——url大全
url大全 {// url'// 3 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片段名称 =>编辑 ...
VSCode自定义代码片段5——HTML元素结构
HTML元素结构 {// HTML'element// 5 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片 ...

VSCode自定义代码片段7——CSS动画

CSS动画

@沉木

VSCode自定义代码片段7——CSS动画相关推荐

最新文章

热门文章