{"id":15893852,"url":"https://github.com/chinanf-boy/hover-css-explain","last_synced_at":"2025-04-02T18:16:23.891Z","repository":{"id":90548418,"uuid":"120163990","full_name":"chinanf-boy/hover-css-explain","owner":"chinanf-boy","description":"explain := hover.css about *:hover up css skill for need one","archived":false,"fork":false,"pushed_at":"2018-02-12T06:40:28.000Z","size":11,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-08T08:47:13.810Z","etag":null,"topics":["css","explain","hover","less","sass"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chinanf-boy.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-04T07:21:53.000Z","updated_at":"2018-02-04T07:22:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"9d1a1359-a4ff-4c56-bc61-427dd88c8719","html_url":"https://github.com/chinanf-boy/hover-css-explain","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinanf-boy%2Fhover-css-explain","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinanf-boy%2Fhover-css-explain/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinanf-boy%2Fhover-css-explain/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinanf-boy%2Fhover-css-explain/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chinanf-boy","download_url":"https://codeload.github.com/chinanf-boy/hover-css-explain/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246866100,"owners_count":20846496,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","explain","hover","less","sass"],"created_at":"2024-10-06T08:13:55.210Z","updated_at":"2025-04-02T18:16:23.858Z","avatar_url":"https://github.com/chinanf-boy.png","language":null,"readme":"# hover\n\n一组CSS3动力悬停效果应用于链接，按钮，标志，SVG，精选图片等等。 轻松应用到自己的元素，修改或只是用于启发。 可用CSS，Sass和LESS。\n\n[![explain](http://llever.com/explain.svg)](https://github.com/chinanf-boy/Source-Explain)\n    \nExplanation\n\n\u003e \"version\": \"1.0.0\" 让我们开始，漫长的`css`之旅吧\n\n[github source](https://github.com/IanLunn/Hover)\n\n~~[english](./README.en.md)~~\n\n---\n\n[hover 官方 demo](http://ianlunn.github.io/Hover/)\n\n---\n\n无可否认, css 每个属性的相关性, 都需要斟酌, 繁琐漫长\n\n我们也总会找到, 一劳永逸的方式, css框架-比如最出名的[·bootstrap·](https://github.com/twbs/bootstrap)\n\n似乎，每个公司都有自己的css框架，!那是一定的! 网站对应风格嘛, \n\n所以深层的道理是一样\u003c开发者的事情❤️`me`\u003e, \n\n看到的每个网站却也是不同的\u003c那是设计师的事情💔\u003e\n\n---\n\n## hover-explain-目录\n\n- [css-框架的第一眼-bower.json](#css-入口)\n\n- [复制-粘贴-一个效果](#复制-粘贴-一个效果)\n\n- [从这里开始，我会分效果解释](#分隔-css-效果-解释)\n\n---\n\n## css-入口\n\nbower.json\n\n``` json\n  \"main\": \"css/hover.css\",\n```\n\n## 复制-粘贴-一个效果\n\ncss 并不像 js 相互关联, \n\n也许一个效果, 只需要几行css代码, 所以复制/粘贴也是很重要的😊\n\n比如`Grow 效果`-[codepen-例子](https://codepen.io/china-boy/pen/yvOgLV)\n\n1. 下载Hover.css\n\n2. 在中`css/hover.css`，找到`Grow CSS`（每个效果都使用上面的注释命名）：\n\n``` css\n/* Grow */\n.hvr-grow {\n    display: inline-block;\n    vertical-align: middle;\n    transform: translateZ(0);\n    box-shadow: 0 0 1px rgba(0, 0, 0, 0);\n    backface-visibility: hidden;\n    -moz-osx-font-smoothing: grayscale;\n    transition-duration: 0.3s;\n    transition-property: transform;\n}\n\n.hvr-grow:hover,\n.hvr-grow:focus,\n.hvr-grow:active {\n    transform: scale(1.1);\n}\n```\n\n3. 复制此效果，然后将其粘贴到您自己的样式表中。\n\n4. 在您想要显示效果的HTML文件中，将`class`添加`.hvr-grow`到您选择的元素。\n\n``` html\n\u003ca href=\"#\" class=\"hvr-grow\"\u003eAdd to Basket\u003c/a\u003e\n```\n\n## 分隔-css-效果-解释\n\n正如我上面所写, css-效果, 大多数情况下, 并不需要整个css文件\n\n甚至说, 不会这个效果, 打开调试器, 找到css, 复制/粘贴就好了\n\n还需要特地解释嘛, \n\n我也只能说, `知彼知己, 百战百胜`\n\n\u003e 接下来，我会根据-hover-给出的效果进行解释, 章节过长, 请选择感兴趣的🌟, 需要的❤️, 就好\n\n反正, 转头就忘了, 这就是-css\n\n---\n\n[单个css-属性-解释](#css-属性-解释)\n\n---\n\n分-动画效果类型 \u003c 前面详细, 后面只解释不同 \u003e\n\n- [ \u003e\u003e 2D-Transitions](#2d-transitions)\n\n\u003cdetails\u003e\n\n \u003csummary\u003e更多 css 动画效果\u003c/summary\u003e\n\n- [-\u003e 文件Background-Transitions](./background-transitions.md)\n\n- [-\u003e 文件Icons](./icons.md)\n\n- [-\u003e 文件Border-Transitions](./border-transitions.md)\n\n- [-\u003e 文件Shadow-and-Glow-Transitions](./shadow-and-glow-transitions.md)\n\n- [-\u003e 文件Speech-Bubbles](./speech-bubbles.md)\n\n- [-\u003e 文件Curl](./curl.md)\n\n\u003c/details\u003e\n\n## 2D-Transitions\n\n\u003cdetails open\u003e\n\n \u003csummary\u003e1. Grow \u003c/summary\u003e\n\n``` css\n/* Grow */\n.hvr-grow {\n    display: inline-block; \n    /* 显示方式 \u003e 内嵌区块 */\n    vertical-align: middle;\n    /* 反正就是对齐 */\n    transform: translateZ(0);\n    /*  */\n    box-shadow: 0 0 1px rgba(0, 0, 0, 0);\n    /* 区块阴影 */\n    backface-visibility: hidden;\n    /* 表示背面不可见 */\n    -moz-osx-font-smoothing: grayscale;\n    /* Firefox 用灰度抗锯齿渲染文本 */\n    transition-duration: 0.3s;\n    /*  动画时间 */\n    transition-property: transform;\n    /* css属性-transform 渐进变化 */\n}\n\n.hvr-grow:hover, /* 鼠标位于元素 */\n.hvr-grow:focus,/* 当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发 */\n.hvr-grow:active {/* 它代表的是用户按下按键和松开按键之间的时间 */\n    transform: scale(1.1);\n    /* 放大 */\n}\n```\n\n\u003e [css-属性解释](#css-属性-解释)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n \u003csummary\u003e2. Shrink\u003c/summary\u003e\n\n``` css\n/* Shrink */\n.hvr-shrink {\n  display: inline-block;\n  vertical-align: middle;\n  -webkit-transform: perspective(1px) translateZ(0);\n  /* -webkit- 各大内核的试验效果前缀 */\n  /* perspective 属性指定了观察者与z=0平面的距离 */\n  transform: perspective(1px) translateZ(0);\n  box-shadow: 0 0 1px transparent;\n  -webkit-transition-duration: 0.3s;\n  transition-duration: 0.3s;\n  -webkit-transition-property: transform;\n  transition-property: transform;\n}\n.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {\n  -webkit-transform: scale(0.9);\n  transform: scale(0.9);\n  /* 缩小 */\n}\n```\n\n\u003e [transform:perspective](#transform)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n \u003csummary\u003e3. Pulse\u003c/summary\u003e\n\n``` css\n/* Pulse */\n@-webkit-keyframes hvr-pulse {/*  动画效果名称-定义 */\n  25% {  /* 时间 0% ～ 25% */\n    -webkit-transform: scale(1.1);\n    transform: scale(1.1);\n    /*  先大 */\n  }\n  75% { /* 时间 25% ～ 75% */\n    -webkit-transform: scale(0.9);\n    transform: scale(0.9);\n    /* 后小 */\n  }\n}\n@keyframes hvr-pulse {\n  25% {\n    -webkit-transform: scale(1.1);\n    transform: scale(1.1);\n  }\n  75% {\n    -webkit-transform: scale(0.9);\n    transform: scale(0.9);\n  }\n}\n.hvr-pulse {\n  display: inline-block;\n  vertical-align: middle;\n  -webkit-transform: perspective(1px) translateZ(0);\n  transform: perspective(1px) translateZ(0);\n  box-shadow: 0 0 1px transparent;\n}\n.hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active {\n  /* 鼠标位于元素 */\n/* 当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发 */\n/* 它代表的是用户按下按键和松开按键之间的时间 */\n\n  -webkit-animation-name: hvr-pulse;\n  animation-name: hvr-pulse;\n  /* 动画名字 */\n  -webkit-animation-duration: 1s;\n  animation-duration: 1s;\n  -webkit-animation-timing-function: linear;\n  animation-timing-function: linear;\n  /* 动画-运动速率 */\n  -webkit-animation-iteration-count: infinite;\n  animation-iteration-count: infinite;\n  /* infinite 无限循环播放动画. */\n\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n \u003csummary\u003e4. Pulse-Grow\u003c/summary\u003e\n\n``` css\n/* Pulse Grow */\n@-webkit-keyframes hvr-pulse-grow {\n  to {       /* 元素动画-最终形态 */\n    -webkit-transform: scale(1.1);\n    transform: scale(1.1);\n  }\n}\n@keyframes hvr-pulse-grow {\n  to {\n    -webkit-transform: scale(1.1);\n    transform: scale(1.1);\n  }\n}\n.hvr-pulse-grow {\n  display: inline-block;\n  vertical-align: middle;\n  -webkit-transform: perspective(1px) translateZ(0);\n  transform: perspective(1px) translateZ(0);\n  box-shadow: 0 0 1px transparent;\n}\n.hvr-pulse-grow:hover, .hvr-pulse-grow:focus, .hvr-pulse-grow:active {\n  /* 鼠标位于元素 */\n/* 当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发 */\n/* 它代表的是用户按下按键和松开按键之间的时间 */\n\n  -webkit-animation-name: hvr-pulse-grow;\n  animation-name: hvr-pulse-grow;\n  -webkit-animation-duration: 0.3s;\n  animation-duration: 0.3s;\n  -webkit-animation-timing-function: linear;\n  animation-timing-function: linear;\n  -webkit-animation-iteration-count: infinite;\n  animation-iteration-count: infinite;\n  /* infinite 无限循环播放动画. */\n  -webkit-animation-direction: alternate;\n  animation-direction: alternate;\n  /* 动画交替反向运行 */\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n \u003csummary\u003e5. Pulse-Shrink\u003c/summary\u003e\n\n``` css\n/* Pulse Shrink */\n@-webkit-keyframes hvr-pulse-shrink { \n  /* 动画名称-动作定义 */\n  to {\n    -webkit-transform: scale(0.9);\n    transform: scale(0.9);\n  }\n}\n@keyframes hvr-pulse-shrink {\n  to {\n    -webkit-transform: scale(0.9);\n    transform: scale(0.9);\n  }\n}\n.hvr-pulse-shrink {\n  display: inline-block;\n  vertical-align: middle;\n  -webkit-transform: perspective(1px) translateZ(0);\n  transform: perspective(1px) translateZ(0);\n  box-shadow: 0 0 1px transparent;\n}\n.hvr-pulse-shrink:hover, .hvr-pulse-shrink:focus, .hvr-pulse-shrink:active {\n  /* 鼠标位于元素 */\n/* 当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发 */\n/* 它代表的是用户按下按键和松开按键之间的时间 */\n\n  -webkit-animation-name: hvr-pulse-shrink;\n  animation-name: hvr-pulse-shrink;\n  -webkit-animation-duration: 0.3s;\n  animation-duration: 0.3s;\n  -webkit-animation-timing-function: linear;\n  animation-timing-function: linear;\n  -webkit-animation-iteration-count: infinite;\n  animation-iteration-count: infinite;\n    /* infinite 无限循环播放动画. */\n  -webkit-animation-direction: alternate;\n  animation-direction: alternate;\n   /* 动画交替反向运行 */\n}\n```\n\n- [perspective](#transform)\n\n\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n \u003csummary\u003e6. Push\u003c/summary\u003e\n\n``` css\n/* Push */\n@-webkit-keyframes hvr-push {\n  /*  0%~50% 先小 */\n  50% {\n    -webkit-transform: scale(0.8);\n    transform: scale(0.8);\n  }\n  /* 50%～100% 后大 */\n  100% {\n    -webkit-transform: scale(1);\n    transform: scale(1);\n  }\n}\n@keyframes hvr-push {\n  50% {\n    -webkit-transform: scale(0.8);\n    transform: scale(0.8);\n  }\n  100% {\n    -webkit-transform: scale(1);\n    transform: scale(1);\n  }\n}\n.hvr-push {\n  display: inline-block;\n  vertical-align: middle;\n  -webkit-transform: perspective(1px) translateZ(0);\n  transform: perspective(1px) translateZ(0);\n  box-shadow: 0 0 1px transparent;\n}\n.hvr-push:hover, .hvr-push:focus, .hvr-push:active {\n  /* 鼠标位于元素 */\n  /* 当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发 */\n  /* 它代表的是用户按下按键和松开按键之间的时间 */\n\n  -webkit-animation-name: hvr-push;\n  animation-name: hvr-push;\n  -webkit-animation-duration: 0.3s;\n  animation-duration: 0.3s;\n  -webkit-animation-timing-function: linear;\n  animation-timing-function: linear;\n  -webkit-animation-iteration-count: 1;\n  animation-iteration-count: 1;\n  /*  运行一次 */\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n \u003csummary\u003e7. Pop\u003c/summary\u003e\n\n``` css\n/* Pop */\n@-webkit-keyframes hvr-pop {\n  /* 0~50% 大 */\n  50% {\n    -webkit-transform: scale(1.2);\n    transform: scale(1.2);\n  }\n}\n@keyframes hvr-pop {\n  50% {\n    -webkit-transform: scale(1.2);\n    transform: scale(1.2);\n  }\n}\n.hvr-pop {\n  display: inline-block;\n  vertical-align: middle;\n  -webkit-transform: perspective(1px) translateZ(0);\n  transform: perspective(1px) translateZ(0);\n  box-shadow: 0 0 1px transparent;\n}\n.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {\n  -webkit-animation-name: hvr-pop;\n  animation-name: hvr-pop;\n  -webkit-animation-duration: 0.3s;\n  animation-duration: 0.3s;\n  -webkit-animation-timing-function: linear;\n  animation-timing-function: linear;\n  -webkit-animation-iteration-count: 1;\n  animation-iteration-count: 1;\n  /* 运行1次 */\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \n\u003csummary\u003e8. Bounce In \u003c/summary\u003e\n\n\n``` css\n/* Bounce In */\n.hvr-bounce-in {\n  display: inline-block;\n  vertical-align: middle;\n  -webkit-transform: perspective(1px) translateZ(0);\n  transform: perspective(1px) translateZ(0);\n  box-shadow: 0 0 1px transparent;\n  -webkit-transition-duration: 0.5s;\n  transition-duration: 0.5s;\n}\n.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {\n  -webkit-transform: scale(1.2);\n  transform: scale(1.2);\n  /* 变大 */\n  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);\n  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);\n  /*  运动曲线 先快 中慢 后快 */\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003e9. Bounce Out \u003c/summary\u003e\n\n``` css\n/* Bounce Out */\n.hvr-bounce-out {\n  display: inline-block;\n  vertical-align: middle;\n  -webkit-transform: perspective(1px) translateZ(0);\n  transform: perspective(1px) translateZ(0);\n  box-shadow: 0 0 1px transparent;\n  -webkit-transition-duration: 0.5s;\n  transition-duration: 0.5s;\n}\n.hvr-bounce-out:hover, .hvr-bounce-out:focus, .hvr-bounce-out:active {\n  -webkit-transform: scale(0.8);\n  transform: scale(0.8);\n  /* 变小 */\n  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);\n  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);\n  /*  运动曲线 先快 中慢 后快 */\n  \n}\n```\n\n\u003c/details\u003e\n---\n\n### css-属性-解释\n\n#### display\n\n\u003e CSS属性指定用于元素的呈现框的类型\n\n#### vertical-align\n\n\u003e CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。\n\n\u003e middle - 元素中垂线与父元素的基线加上小写x一半的高度值对齐。\n\n#### transform\n\n\u003e CSS transform 属性允许你修改CSS视觉格式模型的坐标空间。使用它，元素可以被转换（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）。 只应用-`display:*block*` 的元素\n\n\u003e [perspective \u003e\u003e 属性指定了观察者与z=0平面的距离](https://developer.mozilla.org/zh-CN/docs/Web/CSS/perspective)\n\n#### box-shadow\n\n\u003e 定义元素-broder-边缘阴影\n\n#### backface-visibility\n\n\u003e  属性指定当元素背面朝向观察者时是否可见\n\n#### -moz-osx-font-smoothing\n\n\u003e Firefox 实现了名为 -moz-osx-font-smoothing 的相似属性。这个属性仅在 Mac OS X / macOS 下生效。\n\n#### transition-duration\n\n\u003e 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画\n\n#### transition-property\n\n\u003e 指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画，其它属性仍如通常那样瞬间变化。\n\n#### animation-direction\n\n\u003e  CSS 属性指示动画是否反向播放\n\n#### :hover\n\n\u003e CSS伪类适用于用户使用指示设备虚指一个元素（没有激活它）的情况\n\n#### :focus\n\n\u003e 当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发\n\n#### :active\n\n\u003e 它代表的是用户按下按键和松开按键之间的时间","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinanf-boy%2Fhover-css-explain","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchinanf-boy%2Fhover-css-explain","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinanf-boy%2Fhover-css-explain/lists"}