├── 404page ├── css3旋转边框404页面 │ ├── README.md │ ├── css │ │ └── style.css │ └── index.html ├── css3蜗牛404页面 │ ├── README.md │ ├── index.html │ └── style.css └── css3鬼步月球404页面 │ ├── README.md │ └── index.html ├── LICENSE ├── README.md ├── border ├── 6种炫酷css按钮边框 │ ├── README.md │ ├── be-0.gif │ ├── css │ │ ├── default.css │ │ ├── normalize.css │ │ └── styles.css │ └── index.html ├── css3发光边框.html ├── css3多组漂亮按钮边框.html ├── css3边框跑马灯.html ├── css3鼠标悬停边框 │ ├── README.md │ ├── index.html │ └── src │ │ └── style.css ├── 鼠标悬停图片边框跑马灯 │ ├── README.md │ ├── img │ │ └── 1.webp │ └── index.html └── 鼠标悬停边框环绕动画 │ ├── README.md │ ├── css │ └── style.css │ └── index.html ├── button └── css3粒子动效按钮 │ ├── README.md │ ├── css │ └── style.css │ └── index.html ├── images ├── 3.png └── qcode.gif ├── navbar ├── css3伸缩式导航栏 │ ├── README.md │ ├── css │ │ └── index.css │ └── index.html ├── css3侧边展开导航栏 │ ├── README.md │ ├── css │ │ ├── font-awesome.css │ │ └── index.css │ ├── fonts │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ ├── fontawesome-webfont.woff2 │ │ ├── fontawesome-webfont_1.eot │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.ttf │ │ ├── glyphicons-halflings-regular.woff │ │ └── glyphicons-halflings-regular.woff2 │ ├── images │ │ └── 1.jpg │ └── index.html └── css3弹性导航下拉菜单 │ ├── README.md │ ├── css │ ├── reset.min.css │ └── style.css │ └── index.html └── other ├── 3d-cutout-card ├── README.md ├── index.html └── style.css ├── HTML5模拟手电筒照明效果 ├── README.md ├── img │ └── codepen.jpg └── index.html ├── css33D文字阴影 ├── README.md ├── css │ └── style.css └── index.html ├── css3光标闪烁动态输入打字动画 ├── README.md ├── css │ └── style.css └── index.html ├── css3动画大风车.html ├── css3卡片悬停效果 ├── README.md ├── index.html └── src │ ├── img │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ └── 5.jpg │ ├── script.js │ └── style.css ├── css3可爱的恐龙夫妇 ├── README.md ├── css │ └── style.css └── index.html ├── css3图片淡入动画 ├── README.md ├── css │ └── style.css └── index.html ├── css3夜空北斗七星闪烁动画 ├── README.md ├── index.html ├── script.js └── style.css ├── css3天空云层动态特效 ├── README.md ├── css │ └── style.css ├── img │ ├── poster-about.jpg │ ├── poster-drop-animate1.png │ └── poster-drop-animate2.png └── index.html ├── css3太极动画-0.html ├── css3太极动画-1.html ├── css3太极鼠标触发旋转.html ├── css3定价表单悬停动画 ├── README.md ├── index.html └── style.css ├── css3实现地球自转 ├── README.md ├── arc-shadow.jpg ├── end-effect.gif ├── espaco.jpg ├── index.html ├── round-earth.jpg ├── static.jpg └── terra.jpg ├── css3实现星空动画 ├── README.md └── index.html ├── css3小黄人.html ├── css3弹性卡通怪物上下跳动 ├── README.md ├── css │ └── zzsc.css └── index.html ├── css3悬停百叶窗广告牌轮播特效 ├── README.md ├── css │ └── style.css ├── img │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ └── 4.jpg └── index.html ├── css3折叠图像 ├── README.md ├── css │ └── style.css └── index.html ├── css3文字弹跳 ├── README.md ├── index.html └── src │ ├── ppxapb.css │ ├── script.js │ └── style.css ├── css3新年快乐网页动画 ├── README.md ├── css │ └── style.css └── index.html ├── css3新拟态鼠标经过特效 ├── README.md ├── css │ └── index.css ├── images │ ├── 1.png │ ├── 10.png │ ├── 11.png │ ├── 12.png │ ├── 13.png │ ├── 14.png │ ├── 15.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ ├── 7.png │ ├── 8.png │ └── 9.png └── index.html ├── css3旅游画廊悬停放大动画 ├── README.md ├── index.html └── src │ ├── script.js │ └── style.css ├── css3母亲节寄语文字动画 ├── README.md ├── css │ └── style.css ├── img │ └── 802.jpg └── index.html ├── css3母亲节背景动画 ├── README.md ├── index.html └── style.css ├── css3气泡交叉游动网页加载图标动画 ├── README.md └── index.html ├── css3流星雨划过动画 ├── README.md ├── index.html └── style.css ├── css3渐变色动画边框.html ├── css3滚动显示页面 ├── README.md ├── index.html └── src │ └── style.css ├── css3火焰文字特效 ├── README.md ├── css │ └── style.css └── index.html ├── css3炫酷文字字体动画 ├── README.md ├── css │ └── style.css └── index.html ├── css3玻璃变形按钮悬停发光 ├── README.md ├── css │ └── style.css └── index.html ├── css3电视动画模型.html ├── css3登录注册表单切换效果 ├── README.md ├── css │ └── styles.css ├── img │ ├── Thumbs.db │ └── bg.jpg └── index.html ├── css3社交媒体图标按钮悬停动画 ├── README.md ├── css │ └── style.css └── index.html ├── css3类DNA细胞预加载动画 ├── README.md ├── index.html └── style.css ├── css3节日折叠卡片 ├── README.md ├── index.html └── style.css ├── css3透视按钮悬停效果 ├── README.md └── index.html ├── css3餐饮行业精美蒙版动画 ├── README.md ├── index.html └── src │ ├── fish-vegetables.jpg │ └── style.css ├── css3鼠标悬停剪辑路径图像效果 ├── README.md ├── css │ └── style.css └── index.html ├── css3鼠标悬停发光菜单 ├── README.md ├── index.html └── style.css ├── css3鼠标悬停名片图文切换 ├── README.md ├── css │ └── style.css ├── imgs │ └── qr.png └── index.html ├── css3鼠标悬停图像高亮放大 ├── README.md ├── index.html └── src │ └── style.css ├── css3鼠标悬停图片展示效果 ├── README.md ├── index.html └── static │ ├── css │ └── style.css │ └── picture │ └── tx.png ├── css3鼠标悬停图片扩展显示特效 ├── README.md ├── css │ └── style.css └── index.html ├── css3鼠标悬停图片特效 ├── README.md ├── index.html └── src │ └── style.css ├── css故障风格文字动画 ├── README.md ├── css │ └── style.css └── index.html ├── 卡片互动悬停下载动画 ├── README.md ├── css │ └── style.css └── index.html ├── 悬停放大的图片蒙版效果 ├── README.md ├── css │ └── style.css └── index.html ├── 旋转立方体特效.html ├── 精美图像画廊悬停特效 ├── README.md ├── css │ └── style.css └── index.html └── 鼠标悬停切换动画 ├── README.md ├── css └── style.css ├── index.html └── js └── script.js /404page/css3旋转边框404页面/README.md: -------------------------------------------------------------------------------- 1 | # 旋转边框效果404错误页面设计特效 2 | 3 | #### 介绍 4 | 5 | 一款旋转边框效果404错误页面设计特效，该特效实现了红色边框顺时针旋转的动画效果，精简易用。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.github.io/css-effects/404page/css3旋转边框404页面/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/404page/css3旋转边框404页面/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /404page/css3旋转边框404页面/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | height: 100vh; 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | background-color: rgb(20%, 20%, 20%); 8 | } 9 | 10 | .warning { 11 | color: whitesmoke; 12 | font-size: 80px; 13 | font-family: sans-serif; 14 | font-weight: bold; 15 | position: relative; 16 | padding: 0.6em 0.4em; 17 | } 18 | 19 | .warning::before, 20 | .warning::after { 21 | content: ''; 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | width: 100%; 26 | height: 100%; 27 | border: 0.2em solid transparent; 28 | box-sizing: border-box; 29 | color: orangered; 30 | animation: rotating 10s infinite; 31 | } 32 | 33 | .warning::before { 34 | border-top-color: currentColor; 35 | border-right-color: currentColor; 36 | z-index: -1; 37 | } 38 | 39 | .warning::after { 40 | border-bottom-color: currentColor; 41 | border-left-color: currentColor; 42 | box-shadow: 0.3em 0.3em 0.3em rgba(20%, 20%, 20%, 0.8); 43 | } 44 | 45 | @keyframes rotating { 46 | to { 47 | transform: rotate(360deg); 48 | } 49 | } -------------------------------------------------------------------------------- /404page/css3旋转边框404页面/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Box border stacking effect 6 | 7 | 8 | 9 | 10 | 11 |
ERROR 404
12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /404page/css3蜗牛404页面/README.md: -------------------------------------------------------------------------------- 1 | # CSS3蜗牛404页面设计 2 | 3 | #### 介绍 4 | 5 | 一款有趣的html错误页面模板，蜗牛404页面设计，画面中呈现了蜗牛行走的动画效果，简单实用，卡通有趣，适用于任意类型的网站。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/404page/css3蜗牛404页面/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/404page/ccss3蜗牛404页面/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /404page/css3蜗牛404页面/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17sucai - 404page 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
Oh no...something wrong
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
404
28 |
29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /404page/css3鬼步月球404页面/README.md: -------------------------------------------------------------------------------- 1 | # 纯css3鬼步月球404页面特效 2 | 3 | #### 介绍 4 | 5 | 纯css3鬼步月球404页面特效，模仿迈克杰克逊的鬼步舞在月球上漫步，看起来很有创意，适合做网站404页面模板使用。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/404page/css3鬼步月球404页面/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/404page/css3鬼步月球404页面/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 儒雅的烤地瓜 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /border/6种炫酷css按钮边框/README.md: -------------------------------------------------------------------------------- 1 | # 6种炫酷的css按钮边框特效 2 | 3 | #### 介绍 4 | 6种炫酷的css按钮边框特效，用鼠标滑过下面的按钮看看效果！ 5 | 6 | #### 在线预览 7 | 8 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/border/6种炫酷css按钮边框/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/border/6种炫酷css按钮边框/index.html) 9 | 10 | #### 软件架构 11 | 软件架构说明 12 | 13 | 14 | #### 安装教程 15 | 16 | 1. xxxx 17 | 2. xxxx 18 | 3. xxxx 19 | 20 | #### 使用说明 21 | 22 | 1. xxxx 23 | 2. xxxx 24 | 3. xxxx 25 | 26 | #### 参与贡献 27 | 28 | 1. Fork 本仓库 29 | 2. 新建 Feat_xxx 分支 30 | 3. 提交代码 31 | 4. 新建 Pull Request 32 | 33 | 34 | #### 特技 35 | 36 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 37 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 38 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 39 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 40 | 5. GitHub中文社区 https://www.githubs.cn/ 41 | -------------------------------------------------------------------------------- /border/6种炫酷css按钮边框/be-0.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/border/6种炫酷css按钮边框/be-0.gif -------------------------------------------------------------------------------- /border/6种炫酷css按钮边框/css/normalize.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} -------------------------------------------------------------------------------- /border/6种炫酷css按钮边框/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 6种炫酷的CSS3按钮边框动画特效 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |

6种炫酷的CSS3按钮边框动画特效 Button border animate

16 |
17 |
18 |

用鼠标滑过下面的按钮看看效果！

19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 | 28 | -------------------------------------------------------------------------------- /border/css3边框跑马灯.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | css实现边框跑马灯效果 8 | 83 | 84 | 85 | 86 |
小马跑起来~
87 | 88 | 89 | -------------------------------------------------------------------------------- /border/css3鼠标悬停边框/README.md: -------------------------------------------------------------------------------- 1 | # css3鼠标悬停边框图片特效 2 | 3 | #### 介绍 4 | 5 | 一款css3鼠标悬停边框图片特效，只需要将鼠标悬停在任意图像上，即产生边框包住图片的动画效果 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/border/css3鼠标悬停边框/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/border/css3鼠标悬停边框框/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /border/css3鼠标悬停边框/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS only Border hover effect 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /border/css3鼠标悬停边框/src/style.css: -------------------------------------------------------------------------------- 1 | img { 2 | --color: #8A9B0F; /* the border color */ 3 | --border: 10px; /* the border thickness*/ 4 | --offset: 20px; /* control the offset*/ 5 | --gap: 5px; /* the gap on hover */ 6 | 7 | --_c: var(--color) var(--border), #0000 0 calc(100% - var(--border)),var(--color) 0; 8 | --_o: calc(3*var(--offset)); 9 | padding: 10 | calc(var(--gap) + var(--border)) 11 | calc(var(--gap) + var(--border) + var(--offset)) 12 | calc(var(--gap) + var(--border) + var(--offset)) 13 | calc(var(--gap) + var(--border)); 14 | background: 15 | linear-gradient( var(--_c)) var(--_o) var(--_o), 16 | linear-gradient(90deg,var(--_c)) var(--_o) var(--_o); 17 | background-size: calc(100% - var(--_o)) calc(100% - var(--_o)); 18 | background-repeat: no-repeat; 19 | filter: grayscale(.4); 20 | transition: .5s; 21 | cursor: pointer; 22 | } 23 | img:hover { 24 | background-position: 0px 0px; 25 | background-size: calc(100% - var(--offset)) calc(100% - var(--offset)); 26 | filter: grayscale(0); 27 | } 28 | 29 | body { 30 | background: #e8e9ba; 31 | display: grid; 32 | grid-gap: 40px; 33 | height: 100vh; 34 | margin: 0; 35 | grid-auto-flow: column; 36 | place-content: center; 37 | } -------------------------------------------------------------------------------- /border/鼠标悬停图片边框跑马灯/README.md: -------------------------------------------------------------------------------- 1 | # 鼠标悬停显示图片边框的跑马灯动效 2 | 3 | #### 介绍 4 | 鼠标悬停显示图片边框跑马灯动效 5 | 6 | #### 在线预览 7 | 8 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/border/鼠标悬停图片边框跑马灯/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/border/鼠标悬停图片边框跑马灯/index.html) 9 | 10 | #### 软件架构 11 | 软件架构说明 12 | 13 | 14 | #### 安装教程 15 | 16 | 1. xxxx 17 | 2. xxxx 18 | 3. xxxx 19 | 20 | #### 使用说明 21 | 22 | 1. xxxx 23 | 2. xxxx 24 | 3. xxxx 25 | 26 | #### 参与贡献 27 | 28 | 1. Fork 本仓库 29 | 2. 新建 Feat_xxx 分支 30 | 3. 提交代码 31 | 4. 新建 Pull Request 32 | 33 | 34 | #### 特技 35 | 36 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 37 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 38 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 39 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 40 | 5. GitHub中文社区 https://www.githubs.cn/ 41 | -------------------------------------------------------------------------------- /border/鼠标悬停图片边框跑马灯/img/1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/border/鼠标悬停图片边框跑马灯/img/1.webp -------------------------------------------------------------------------------- /border/鼠标悬停图片边框跑马灯/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 鼠标悬停显示图片边框动画 9 | 100 | 101 | 102 | 103 |
104 |
105 | 106 | 107 | 108 | 109 |
110 | ! 111 |
112 | 113 | 114 | -------------------------------------------------------------------------------- /border/鼠标悬停边框环绕动画/README.md: -------------------------------------------------------------------------------- 1 | # 鼠标悬停边框环绕动画效果 2 | 3 | #### 介绍 4 | 5 | 一款css实现边框动态环绕效果，边框悬停特效，画面中是两张图片的对角边框，悬停任意一个即可产生边框动态环绕效果。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/border/鼠标悬停边框环绕动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/border/鼠标悬停边框环绕动画/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /border/鼠标悬停边框环绕动画/css/style.css: -------------------------------------------------------------------------------- 1 | img { 2 | --b: 8px; /* border thickness*/ 3 | --s: 60px; /* size of the corner*/ 4 | --g: 14px; /* the gap*/ 5 | --c: #EDC951; 6 | 7 | padding: calc(var(--b) + var(--g)); 8 | background-image: 9 | conic-gradient(from 90deg at top var(--b) left var(--b),#0000 25%,var(--c) 0), 10 | conic-gradient(from -90deg at bottom var(--b) right var(--b),#0000 25%,var(--c) 0); 11 | background-position: 12 | var(--_p,0%) var(--_p,0%), 13 | calc(100% - var(--_p,0%)) calc(100% - var(--_p,0%)); 14 | background-size: var(--s) var(--s); 15 | background-repeat: no-repeat; 16 | cursor: pointer; 17 | transition: 18 | background-position .3s var(--_i,.3s), 19 | background-size .3s calc(.3s - var(--_i,.3s)); 20 | } 21 | img.alt { 22 | background-image: 23 | conic-gradient(from 180deg at top var(--b) right var(--b),#0000 25%,var(--c) 0), 24 | conic-gradient(from 0deg at bottom var(--b) left var(--b),#0000 25%,var(--c) 0); 25 | background-position: 26 | calc(100% - var(--_p,0%)) var(--_p,0%), 27 | var(--_p,0%) calc(100% - var(--_p,0%)); 28 | } 29 | img:hover { 30 | background-size: calc(100% - var(--g)) calc(100% - var(--g)); 31 | --_p: calc(var(--g)/2); 32 | --_i: 0s; 33 | } 34 | 35 | 36 | 37 | body { 38 | margin: 0; 39 | min-height: 100vh; 40 | display: grid; 41 | grid-auto-flow: column; 42 | gap: 20px; 43 | place-content: center; 44 | place-items: center; 45 | background: #99B2B7; 46 | } -------------------------------------------------------------------------------- /border/鼠标悬停边框环绕动画/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Corner only with cool hover effect 6 | 7 | 8 | 9 | 10 | 11 | two old cars in front of a garage 12 | a very old volkswagen van 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /button/css3粒子动效按钮/README.md: -------------------------------------------------------------------------------- 1 | # CSS3实现一个粒子动效的按钮 2 | 3 | #### 介绍 4 | 5 | CSS3实现一个粒子动效的按钮。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/button/css3粒子动效按钮/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/button/css3粒子动效按钮/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /button/css3粒子动效按钮/css/style.css: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-block; 3 | padding: 1em 2em; 4 | background-color: #ff0081; 5 | color: #fff; 6 | border-radius: 4px; 7 | border: none; 8 | cursor: pointer; 9 | position: relative; 10 | box-shadow: 0 2px 25px rgba(233, 30, 99, 0.5); 11 | outline: 0; 12 | transition: transform ease-in 0.1s, background-color ease-in 0.1s, 13 | box-shadow ease-in 0.25s; 14 | } 15 | 16 | .button::before { 17 | position: absolute; 18 | content: ""; 19 | left: -2em; 20 | right: -2em; 21 | top: -2em; 22 | bottom: -2em; 23 | pointer-events: none; 24 | transition: ease-in-out 0.5s; 25 | background-repeat: no-repeat; 26 | background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), 27 | radial-gradient(circle, #ff0081 20%, transparent 20%), 28 | radial-gradient(circle, #ff0081 20%, transparent 20%), 29 | radial-gradient(circle, #ff0081 20%, transparent 20%), 30 | radial-gradient(circle, #ff0081 20%, transparent 20%), 31 | radial-gradient(circle, #ff0081 20%, transparent 20%), 32 | radial-gradient(circle, #ff0081 20%, transparent 20%), 33 | radial-gradient(circle, #ff0081 20%, transparent 20%), 34 | radial-gradient(circle, #ff0081 20%, transparent 20%), 35 | radial-gradient(circle, #ff0081 20%, transparent 20%), 36 | radial-gradient(circle, #ff0081 20%, transparent 20%), 37 | radial-gradient(circle, #ff0081 20%, transparent 20%), 38 | radial-gradient(circle, #ff0081 20%, transparent 20%), 39 | radial-gradient(circle, #ff0081 20%, transparent 20%), 40 | radial-gradient(circle, #ff0081 20%, transparent 20%), 41 | radial-gradient(circle, #ff0081 20%, transparent 20%); 42 | background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 43 | 10% 10%, 18% 18%, 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 44 | 20% 20%; 45 | background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%, 46 | 65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%, 47 | 64% 70%, 80% 71%; 48 | animation: bubbles ease-in-out 0.75s forwards; 49 | -webkit-animation: bubbles ease-in-out 0.75s forwards; 50 | } 51 | 52 | .button:active { 53 | transform: scale(0.95); 54 | background-color: #f3037c; 55 | box-shadow: 0 2px 25px rgba(233, 30, 99, 0.5); 56 | } 57 | .button:active::before { 58 | animation: none; 59 | background-size: 0; 60 | } 61 | @keyframes bubbles { 62 | 0% { 63 | background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%, 64 | 65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%, 65 | 64% 70%, 80% 71%; 66 | } 67 | 50% { 68 | background-position: 10% 44%, 0% 20%, 15% 5%, 30% 0%, 42% 0%, 62% -2%, 69 | 75% 0%, 95% -2%, 0% 80%, 95% 55%, 7% 100%, 24% 100%, 41% 100%, 55% 95%, 70 | 68% 96%, 95% 100%; 71 | } 72 | 100% { 73 | background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%, 74 | 100% -2%, -5% 80%, 100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%, 75 | 100% 100%; 76 | background-size: 0% 0%; 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /button/css3粒子动效按钮/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS3实现一个粒子动效的按钮 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/images/3.png -------------------------------------------------------------------------------- /images/qcode.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/images/qcode.gif -------------------------------------------------------------------------------- /navbar/css3伸缩式导航栏/README.md: -------------------------------------------------------------------------------- 1 | # HTML5+CSS3伸缩式导航栏 2 | 3 | #### 介绍 4 | HTML5+CSS3伸缩式导航栏 5 | 6 | #### 在线预览 7 | 8 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/navbar/css3伸缩式导航栏/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/navbar/css3伸缩式导航栏/index.html) 9 | 10 | #### 软件架构 11 | 软件架构说明 12 | 13 | 14 | #### 安装教程 15 | 16 | 1. xxxx 17 | 2. xxxx 18 | 3. xxxx 19 | 20 | #### 使用说明 21 | 22 | 1. xxxx 23 | 2. xxxx 24 | 3. xxxx 25 | 26 | #### 参与贡献 27 | 28 | 1. Fork 本仓库 29 | 2. 新建 Feat_xxx 分支 30 | 3. 提交代码 31 | 4. 新建 Pull Request 32 | 33 | 34 | #### 特技 35 | 36 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 37 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 38 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 39 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 40 | 5. GitHub中文社区 https://www.githubs.cn/ 41 | -------------------------------------------------------------------------------- /navbar/css3伸缩式导航栏/css/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | /* 页面初始化 清除页面元素原有的内外边距 */ 3 | padding: 0; 4 | margin: 0; 5 | } 6 | body { 7 | height: 100vh; 8 | /* 背景渐变色 */ 9 | background: linear-gradient(#99f, #f99); 10 | } 11 | body, 12 | .navbar, 13 | .navbar ul { 14 | /* 三个元素都需要弹性布局 写一块 */ 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | .navbar { 20 | /* 相对定位 */ 21 | position: relative; 22 | padding: 20px; 23 | border-radius: 50px; 24 | background-color: #fff; 25 | } 26 | .navbar input { 27 | width: 40px; 28 | height: 40px; 29 | /* 鼠标移入变小手 */ 30 | cursor: pointer; 31 | /* 不透明度为0 直接变透明 */ 32 | opacity: 0; 33 | } 34 | .navbar span { 35 | /* 绝对定位 */ 36 | position: absolute; 37 | left: 25px; 38 | /* 现将两条线都放到一起 然后单独设置第二条线的位置 calc方法可以自动计算数值 */ 39 | top: calc(50% - 10px); 40 | width: 30px; 41 | height: 4px; 42 | border-radius: 15px; 43 | background-color: #999; 44 | /* 这里在解决一个问题 现在span覆盖着复选框 我们鼠标放到span点不中复选框 写这个属性就能解决这个问题 即便鼠标放到span上点击也能够选中或者未选中复选框*/ 45 | pointer-events: none; 46 | /* 收回来的时候过渡刚好相反 */ 47 | transition: transform 0.3s ease-in-out, top 0.3s ease-in-out 0.3s; 48 | } 49 | /* 因为第二条线在navbar这个元素内的第三个位置 所以这里写3 */ 50 | .navbar span:nth-child(3) { 51 | top: calc(50% + 6px); 52 | } 53 | .navbar ul { 54 | width: 0; 55 | /* 溢出隐藏 */ 56 | overflow: hidden; 57 | /* 现在这个盒子是扁的 待会解决这个问题 */ 58 | /* 这个问题出现的原因是 文字被换行显示了 两个汉字竖着排列了 就撑大盒子了 */ 59 | /* 这个属性可以让文字就在一行排列 不换行 */ 60 | white-space: nowrap; 61 | transition: all 0.5s; 62 | } 63 | .navbar ul li { 64 | list-style: none; 65 | margin: 0 15px; 66 | } 67 | .navbar ul li a { 68 | /* 取消下划线 */ 69 | text-decoration: none; 70 | font-size: 20px; 71 | font-weight: 700; 72 | color: #333; 73 | } 74 | .navbar ul li a:hover { 75 | color: #fb7299; 76 | } 77 | /* :checked是当选中的复选框的时候 ~ 是兄弟选择器 查找同一级的ul */ 78 | .navbar input:checked ~ ul { 79 | width: 350px; 80 | } 81 | .navbar input:checked ~ span:nth-child(2) { 82 | top: calc(50% - 2px); 83 | transform: rotate(-45deg); 84 | background-color: #fb7299; 85 | /* 现在速度太快了 加个过渡 */ 86 | /* 这是先执行top 然后.3s后执行transform */ 87 | transition: top 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s; 88 | } 89 | .navbar input:checked ~ span:nth-child(3) { 90 | top: calc(50% - 2px); 91 | transform: rotate(45deg); 92 | background-color: #fb7299; 93 | transition: top 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s; 94 | } 95 | -------------------------------------------------------------------------------- /navbar/css3伸缩式导航栏/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML+CSS 伸缩式导航栏 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /navbar/css3侧边展开导航栏/README.md: -------------------------------------------------------------------------------- 1 | # HTML5+CSS3侧边展开导航栏 2 | 3 | #### 介绍 4 | HTML5+CSS3侧边展开导航栏（sidenav） 5 | 6 | #### 在线预览 7 | 8 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/navbar/css3侧边展开导航栏/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/navbar/css3侧边展开导航栏/index.html) 9 | 10 | #### 软件架构 11 | 软件架构说明 12 | 13 | 14 | #### 安装教程 15 | 16 | 1. xxxx 17 | 2. xxxx 18 | 3. xxxx 19 | 20 | #### 使用说明 21 | 22 | 1. xxxx 23 | 2. xxxx 24 | 3. xxxx 25 | 26 | #### 参与贡献 27 | 28 | 1. Fork 本仓库 29 | 2. 新建 Feat_xxx 分支 30 | 3. 提交代码 31 | 4. 新建 Pull Request 32 | 33 | 34 | #### 特技 35 | 36 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 37 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 38 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 39 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 40 | 5. GitHub中文社区 https://www.githubs.cn/ 41 | -------------------------------------------------------------------------------- /navbar/css3侧边展开导航栏/css/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | /* 页面初始化 清除元素原有的内外边距 */ 3 | padding: 0; 4 | margin: 0; 5 | } 6 | body { 7 | /* 溢出隐藏 */ 8 | overflow: hidden; 9 | } 10 | .navbar { 11 | /* 相对定位 */ 12 | position: relative; 13 | /* 元素的宽度占浏览器可视区域的宽度 */ 14 | width: 100vm; 15 | } 16 | .navbar input { 17 | /* 隐藏元素 */ 18 | display: none; 19 | } 20 | .navbar label { 21 | position: absolute; 22 | top: 0; 23 | left: 70px; 24 | width: 100%; 25 | height: 43px; 26 | padding-left: 20px; 27 | font-size: 30px; 28 | color: #5a738e; 29 | background-color: #ededed; 30 | border: 1px solid #d9dee4; 31 | /* 鼠标移入变小手 */ 32 | cursor: pointer; 33 | /* 加过渡 */ 34 | transition: all 0.5s; 35 | } 36 | .navbar ul { 37 | /* 再加个溢出隐藏 */ 38 | overflow: hidden; 39 | /* 删除li前面的小黑点 */ 40 | list-style: none; 41 | width: 70px; 42 | /* 高度占浏览器可视区域的高度 */ 43 | height: 100vh; 44 | background-color: #2a3f54; 45 | transition: all 0.5s; 46 | } 47 | .navbar ul li { 48 | height: 70px; 49 | margin-bottom: 10px; 50 | } 51 | /* :first-child选择器 选择到ul下面的第一个元素 */ 52 | .navbar ul li:first-child { 53 | /* 弹性布局 让元素在该盒子内垂直+水平居中 */ 54 | display: flex; 55 | justify-content: center; 56 | align-items: center; 57 | padding: 0 10px; 58 | } 59 | .navbar ul li:first-child img { 60 | width: 50px; 61 | border-radius: 50%; 62 | } 63 | .navbar ul li:first-child span { 64 | /* 先把文字隐藏起来 */ 65 | display: none; 66 | color: #fff; 67 | /* 文字禁止换行 */ 68 | white-space: nowrap; 69 | padding-left: 10px; 70 | } 71 | .navbar ul li a { 72 | /* 弹性布局 */ 73 | display: flex; 74 | justify-content: center; 75 | align-items: center; 76 | /* 这个属性改变了弹性盒子的主轴方向 现在主轴方向向下 元素也就垂直排列 */ 77 | flex-direction: column; 78 | width: 100%; 79 | height: 100%; 80 | color: #d1d1d1; 81 | /* 取消文字的下划线 */ 82 | text-decoration: none; 83 | } 84 | .navbar ul li a i { 85 | font-size: 25px; 86 | margin-bottom: 10px; 87 | } 88 | .navbar ul li a span { 89 | font-size: 10px; 90 | /* 给这个文字也加禁止换行 不然切换的一瞬间会垂直排列 */ 91 | white-space: nowrap; 92 | } 93 | .navbar ul li a:hover { 94 | color: #fff; 95 | background-color: #35495d; 96 | } 97 | /* :checked选择器判断复选框是否被选中 */ 98 | /* +是相邻兄弟选择器 找到了input的下一个兄弟label */ 99 | .navbar input:checked + label { 100 | left: 200px; 101 | } 102 | /* ~也是兄弟选择器 但是可以找到隔了几代的兄弟 */ 103 | .navbar input:checked ~ ul { 104 | width: 200px; 105 | } 106 | .navbar input:checked ~ ul li:first-child { 107 | /* 改变了弹性项目在弹性盒子内的水平排列方式为从开头排序 */ 108 | justify-content: flex-start; 109 | } 110 | .navbar input:checked ~ ul li:first-child span { 111 | /* 文字显示 */ 112 | display: block; 113 | } 114 | .navbar input:checked ~ ul li a { 115 | /* 改变了主轴的方向为默认值 水平排列 */ 116 | flex-direction: row; 117 | /* 改变了弹性项目在弹性盒子内的水平排列方式为从开头排序 */ 118 | justify-content: flex-start; 119 | } 120 | .navbar input:checked ~ ul li a i { 121 | font-size: 18px; 122 | margin: 0 15px; 123 | } 124 | .navbar input:checked ~ ul li a span { 125 | font-size: 13px; 126 | } 127 | -------------------------------------------------------------------------------- /navbar/css3侧边展开导航栏/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/navbar/css3侧边展开导航栏/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /navbar/css3侧边展开导航栏/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/navbar/css3侧边展开导航栏/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /navbar/css3侧边展开导航栏/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/navbar/css3侧边展开导航栏/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /navbar/css3侧边展开导航栏/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/navbar/css3侧边展开导航栏/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /navbar/css3侧边展开导航栏/fonts/fontawesome-webfont_1.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/navbar/css3侧边展开导航栏/fonts/fontawesome-webfont_1.eot -------------------------------------------------------------------------------- /navbar/css3侧边展开导航栏/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/navbar/css3侧边展开导航栏/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /navbar/css3侧边展开导航栏/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/navbar/css3侧边展开导航栏/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /navbar/css3侧边展开导航栏/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/navbar/css3侧边展开导航栏/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /navbar/css3侧边展开导航栏/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/navbar/css3侧边展开导航栏/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /navbar/css3侧边展开导航栏/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/navbar/css3侧边展开导航栏/images/1.jpg -------------------------------------------------------------------------------- /navbar/css3侧边展开导航栏/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 侧边展开导航栏(半隐藏) 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 18 | 54 |
55 | 56 | 57 | -------------------------------------------------------------------------------- /navbar/css3弹性导航下拉菜单/README.md: -------------------------------------------------------------------------------- 1 | # 漂亮的CSS3弹性导航下拉菜单 2 | 3 | #### 介绍 4 | 5 | 这是一款简洁漂亮的CSS3弹性导航下拉菜单，波浪状弹性动画菜单特效，菜单项可以定义不同的颜色。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/navbar/css3弹性导航下拉菜单/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/navbar/css3弹性导航下拉菜单/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /navbar/css3弹性导航下拉菜单/css/reset.min.css: -------------------------------------------------------------------------------- 1 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /navbar/css3弹性导航下拉菜单/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 漂亮的CSS3弹性导航下拉菜单代码 6 | 7 | 8 | 9 | 10 | 11 | 62 | 63 | -------------------------------------------------------------------------------- /other/3d-cutout-card/README.md: -------------------------------------------------------------------------------- 1 | # 3d镂空图设计，简约卡片悬停效果 2 | 3 | #### 介绍 4 | 这是一款3d镂空图设计，简约卡片悬停效果，当鼠标悬停图像上时，会产生镂空卡片旋转的动画效果，生动形象，可灵活使用在网页中。 5 | 6 | 番外：关于bootstrap-reboot.css文件 7 | 8 | bootstrap-reboot.css文件的作用是重置浏览器的默认样式，并为元素提供一致的基础样式。它通过设置CSS属性和值来消除浏览器的默认样式，从而确保在不同浏览器中呈现一致的外观和体验。通过使用_reboot.scss，开发者可以快速建立一个统一风格的网站，无需自行编写大量的重置样式。 9 | 10 | #### 在线预览 11 | 12 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/3d-cutout-card/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/3d-cutout-card/index.html) 13 | 14 | #### 软件架构 15 | 软件架构说明 16 | 17 | 18 | #### 安装教程 19 | 20 | 1. xxxx 21 | 2. xxxx 22 | 3. xxxx 23 | 24 | #### 使用说明 25 | 26 | 1. xxxx 27 | 2. xxxx 28 | 3. xxxx 29 | 30 | #### 参与贡献 31 | 32 | 1. Fork 本仓库 33 | 2. 新建 Feat_xxx 分支 34 | 3. 提交代码 35 | 4. 新建 Pull Request 36 | 37 | 38 | #### 特技 39 | 40 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 41 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 42 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 43 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 44 | 5. GitHub中文社区 https://www.githubs.cn/ 45 | -------------------------------------------------------------------------------- /other/3d-cutout-card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 3D Cutout Card 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

19 | Cutout 20 |

21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /other/3d-cutout-card/style.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | position: relative; 3 | perspective: 40em; 4 | display: grid; 5 | transform-style: preserve-3d; 6 | } 7 | 8 | .card { 9 | grid-area: 1 / 1; 10 | height: 200px; 11 | width: 400px; 12 | transform: translateX(10px) rotateY(25deg) rotateX(10deg); 13 | background: rgba(249, 198, 26, 0.88); 14 | display: flex; 15 | justify-content: flex-start; 16 | align-items: center; 17 | padding: 30px; 18 | color: #000; 19 | text-transform: uppercase; 20 | font-size: 60px; 21 | font-weight: 900; 22 | backface-visibility: hidden; 23 | box-shadow: 0 10px 30px -3px rgba(0, 0, 0, .1); 24 | } 25 | 26 | h1 { 27 | font-size: 60px; 28 | font-weight: 900; 29 | } 30 | 31 | .card .enclosed { 32 | background: #000; 33 | line-height: 1; 34 | color: rgba(249, 198, 26, 1); 35 | padding: 0 5px; 36 | display: inline-block; 37 | transform: translate(-1px, 1px) scale(0.75); 38 | transform-origin: right center; 39 | } 40 | 41 | .wrapper:before { 42 | --bw: 9px; 43 | grid-area: 1 / 1; 44 | content: ''; 45 | backface-visibility: hidden; 46 | height: 100%; 47 | width: 100%; 48 | margin-top: calc(-1 * var(--bw)); 49 | margin-left: calc(-1 * var(--bw)); 50 | background: transparent; 51 | transform: translateX(-60px) rotateY(-30deg) rotateX(15deg) scale(1.03); 52 | pointer-events: none; 53 | border: var(--bw) solid #000; 54 | box-sizing: content-box; 55 | } 56 | 57 | .wrapper:hover>div, 58 | .wrapper:hover:before { 59 | transform: none; 60 | } 61 | 62 | .wrapper>div, 63 | .wrapper:before { 64 | will-change: transform; 65 | transition: .3s transform cubic-bezier(.25, .46, .45, 1); 66 | } 67 | 68 | html, 69 | body { 70 | height: 100%; 71 | } 72 | 73 | body { 74 | display: grid; 75 | place-items: center; 76 | background: linear-gradient(to bottom right, #3C4BBD 15%, transparent), radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .2) 10%, transparent 20%) center center / 15px 15px, linear-gradient(to bottom right, #3C4BBD, #57ADD8); 77 | } -------------------------------------------------------------------------------- /other/HTML5模拟手电筒照明效果/README.md: -------------------------------------------------------------------------------- 1 | # HTML5模拟手电筒照明效果 2 | 3 | #### 介绍 4 | 一款挺逼真的HTML5模拟手电筒照明效果，HTML5 SVG实现手电筒照射地面光亮特效，光亮跟随鼠标指针移动。 5 | 6 | #### 在线预览 7 | 8 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/h5模拟手电筒照明效果/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/h5模拟手电筒照明效果/index.html) 9 | 10 | #### 软件架构 11 | 软件架构说明 12 | 13 | 14 | #### 安装教程 15 | 16 | 1. xxxx 17 | 2. xxxx 18 | 3. xxxx 19 | 20 | #### 使用说明 21 | 22 | 1. xxxx 23 | 2. xxxx 24 | 3. xxxx 25 | 26 | #### 参与贡献 27 | 28 | 1. Fork 本仓库 29 | 2. 新建 Feat_xxx 分支 30 | 3. 提交代码 31 | 4. 新建 Pull Request 32 | 33 | 34 | #### 特技 35 | 36 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 37 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 38 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 39 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 40 | 5. GitHub中文社区 https://www.githubs.cn/ 41 | -------------------------------------------------------------------------------- /other/HTML5模拟手电筒照明效果/img/codepen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/HTML5模拟手电筒照明效果/img/codepen.jpg -------------------------------------------------------------------------------- /other/HTML5模拟手电筒照明效果/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | HTML5模拟手电筒照明效果 6 | 7 | 16 | 17 | 18 | 19 | 20 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 37 | 38 | 39 | 43 | 46 | 47 | 50 | 51 | 52 | 62 |
63 |

适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。

64 |

更多请访问：烤地瓜的GitHub

65 |
66 | 67 | -------------------------------------------------------------------------------- /other/css33D文字阴影/README.md: -------------------------------------------------------------------------------- 1 | # CSS3实现的3D文字阴影动画 2 | 3 | #### 介绍 4 | 5 | 一款3D文字动画，简单实用的css3字体动画特效，3D阴影的独特效果，给人不一样的视觉感受，可以使用到不同的网站中，相信大家一定会喜欢的！ 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css33D文字阴影/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css33D文字阴影/index.html) 10 | 11 | #### 软件架构 12 | 13 | #### 软件架构 14 | 15 | 软件架构说明 16 | 17 | 18 | #### 安装教程 19 | 20 | 1. xxxx 21 | 2. xxxx 22 | 3. xxxx 23 | 24 | #### 使用说明 25 | 26 | 1. xxxx 27 | 2. xxxx 28 | 3. xxxx 29 | 30 | #### 参与贡献 31 | 32 | 1. Fork 本仓库 33 | 2. 新建 Feat_xxx 分支 34 | 3. 提交代码 35 | 4. 新建 Pull Request 36 | 37 | 38 | #### 特技 39 | 40 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 41 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 42 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 43 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 44 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/css33D文字阴影/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Netflix style text animation with CSS 6 | 7 | 8 | 9 | 10 | 11 |
12 | TYPE HERE 13 |
14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /other/css3光标闪烁动态输入打字动画/README.md: -------------------------------------------------------------------------------- 1 | # CSS3光标闪烁动态输入打字动画特效 2 | 3 | #### 介绍 4 | 5 | 这是一款css3基于keyframes属性实现的光标闪烁动态输入打字动画特效，支持英文字母、数字和汉字输入打字效果。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3光标闪烁动态输入打字动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3光标闪烁动态输入打字动画/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/css3光标闪烁动态输入打字动画/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #1d1f20; 3 | } 4 | /* Basic styles */ 5 | h1 { 6 | position: relative; 7 | float: left; 8 | color: #d7b94c; 9 | font-family: 'Inconsolata', Consolas, monospace; 10 | font-size: 4em; 11 | margin:100px; 12 | } 13 | h1 span{ 14 | position: absolute; 15 | top: 0; 16 | right: 0; 17 | background: #1d1f20; 18 | width: 100%; 19 | border-left: .1em solid transparent; 20 | -webkit-animation: typing 3s steps(16) forwards, 21 | cursor 1s infinite; 22 | animation: typing 3s steps(16) forwards, 23 | cursor 1s infinite; 24 | } 25 | /* Animation */ 26 | @-webkit-keyframes typing{ 27 | from { width: 100%;} 28 | to { width: 0;} 29 | } 30 | @-webkit-keyframes cursor{ 31 | 50% { border-color: white;} 32 | } 33 | @keyframes typing{ 34 | from{ width: 100%;} 35 | to{ width: 0;} 36 | } 37 | @keyframes cursor{ 38 | 50% { border-color: white;} 39 | } -------------------------------------------------------------------------------- /other/css3光标闪烁动态输入打字动画/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | css3光标闪烁动态输入打字动画代码 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

Hello 我是儒雅的烤地瓜！ 

17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /other/css3卡片悬停效果/README.md: -------------------------------------------------------------------------------- 1 | # 极简大气的css卡片悬停效果 2 | 3 | #### 介绍 4 | 5 | 一款极简大气的css卡片悬停效果，画面中五张倾斜卡片只需要鼠标悬停上面，即产生回正放大的效果，且图像会由黑白变彩色。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3卡片悬停效果/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3卡片悬停效果/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/css3卡片悬停效果/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Polaroid Effect with CSS 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |
15 |
I Miss London
16 |
17 |
18 | 19 |
20 |
21 |
Love ballons
22 |
23 |
24 | 25 |
26 |
27 |
Vintage life
28 |
29 |
30 | 31 |
32 |
33 |
Summer Day
34 |
35 |
36 | 37 |
38 |
39 |
Art
40 |
41 |
42 | 43 |
44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /other/css3卡片悬停效果/src/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3卡片悬停效果/src/img/1.jpg -------------------------------------------------------------------------------- /other/css3卡片悬停效果/src/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3卡片悬停效果/src/img/2.jpg -------------------------------------------------------------------------------- /other/css3卡片悬停效果/src/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3卡片悬停效果/src/img/3.jpg -------------------------------------------------------------------------------- /other/css3卡片悬停效果/src/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3卡片悬停效果/src/img/4.jpg -------------------------------------------------------------------------------- /other/css3卡片悬停效果/src/img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3卡片悬停效果/src/img/5.jpg -------------------------------------------------------------------------------- /other/css3卡片悬停效果/src/script.js: -------------------------------------------------------------------------------- 1 | /* Not Today */ -------------------------------------------------------------------------------- /other/css3卡片悬停效果/src/style.css: -------------------------------------------------------------------------------- 1 | @IMPORT 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'Poor Story', cursive; 9 | background: #bdffbd; 10 | } 11 | 12 | .wrapper { 13 | width: 100%; 14 | /* padding: 0 2rem; */ 15 | text-align: center; 16 | } 17 | .polaroid { 18 | background: #fff; 19 | padding: 1rem; 20 | box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2); 21 | 22 | } 23 | .polaroid > img{ 24 | max-width: 90%; 25 | height: auto; 26 | } 27 | .caption { 28 | font-size: 1.8rem; 29 | text-align: center; 30 | line-height: 2em; 31 | } 32 | .item { 33 | width: 30%; 34 | display: inline-block; 35 | margin-top: 2rem; 36 | filter: grayscale(100%); 37 | } 38 | .item .polaroid:before { 39 | content: ''; 40 | position: absolute; 41 | z-index: -1; 42 | transition: all 0.35s; 43 | } 44 | .item:nth-of-type(4n+1) { 45 | transform: scale(0.8, 0.8) rotate(5deg); 46 | transition: all 0.35s; 47 | } 48 | .item:nth-of-type(4n+1) .polaroid:before { 49 | transform: rotate(6deg); 50 | height: 20%; 51 | width: 47%; 52 | bottom: 30px; 53 | right: 12px; 54 | box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.4); 55 | } 56 | .item:nth-of-type(4n+2) { 57 | transform: scale(0.8, 0.8) rotate(-5deg); 58 | transition: all 0.35s; 59 | } 60 | .item:nth-of-type(4n+2) .polaroid:before { 61 | transform: rotate(-6deg); 62 | height: 20%; 63 | width: 47%; 64 | bottom: 30px; 65 | left: 12px; 66 | box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.4); 67 | } 68 | .item:nth-of-type(4n+4) { 69 | transform: scale(0.8, 0.8) rotate(3deg); 70 | transition: all 0.35s; 71 | } 72 | .item:nth-of-type(4n+4) .polaroid:before { 73 | transform: rotate(4deg); 74 | height: 20%; 75 | width: 47%; 76 | bottom: 30px; 77 | right: 12px; 78 | box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.3); 79 | } 80 | .item:nth-of-type(4n+3) { 81 | transform: scale(0.8, 0.8) rotate(-3deg); 82 | transition: all 0.35s; 83 | } 84 | .item:nth-of-type(4n+3) .polaroid:before { 85 | transform: rotate(-4deg); 86 | height: 20%; 87 | width: 47%; 88 | bottom: 30px; 89 | left: 12px; 90 | box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.3); 91 | } 92 | .item:hover { 93 | filter: none; 94 | transform: scale(1, 1) rotate(0deg) !important; 95 | transition: all 0.35s; 96 | } 97 | .item:hover .polaroid:before { 98 | content: ''; 99 | position: absolute; 100 | z-index: -1; 101 | transform: rotate(0deg); 102 | height: 90%; 103 | width: 90%; 104 | bottom: 0%; 105 | right: 5%; 106 | box-shadow: 0 1rem 3rem rgba(0,0,0,0.2); 107 | transition: all 0.35s; 108 | } -------------------------------------------------------------------------------- /other/css3可爱的恐龙夫妇/README.md: -------------------------------------------------------------------------------- 1 | # CSS3可爱的恐龙夫妇爱情 2 | 3 | #### 介绍 4 | 5 | 使用css3代码实现的恐龙夫妇动画，关于爱情表白的css动画特效。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3可爱恐龙夫妇爱情/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3可爱恐龙夫妇爱情/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/css3图片淡入动画/README.md: -------------------------------------------------------------------------------- 1 | # css3图片淡入动画效果 2 | 3 | #### 介绍 4 | 5 | 简单易用的css3图片淡入动画效果，画面中的猫咪呈现渐进动画效果，可替换任何图片。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3图片淡入动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3图片淡入动画/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/css3图片淡入动画/css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | marign: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | background: #0a0a0a; 6 | } 7 | 8 | body { 9 | min-height: 100vh; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | img{ 16 | animation: fadeIn 3s linear; 17 | } 18 | 19 | @keyframes fadeIn{ 20 | 0% { 21 | opacity: 0; 22 | filter: brightness(1) blur(20px); 23 | } 24 | 10% { 25 | opacity: 1; 26 | filter: brightness(2) blur(10px); 27 | } 28 | 100% { 29 | opacity: 1; 30 | filter: brightness(1) blur(0); 31 | } 32 | } -------------------------------------------------------------------------------- /other/css3图片淡入动画/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fade In 6 | 7 | 8 | 9 | 10 | 11 | brown cat with green eyes 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /other/css3夜空北斗七星闪烁动画/README.md: -------------------------------------------------------------------------------- 1 | # CSS3夜空北斗七星闪烁动画特效 2 | 3 | #### 介绍 4 | css3绘制的夜空网页效果，北斗七星闪烁动画特效。 5 | 6 | #### 在线预览 7 | 8 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3夜空北斗七星闪烁动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3夜空北斗七星闪烁动画/index.html) 9 | 10 | #### 软件架构 11 | 软件架构说明 12 | 13 | 14 | #### 安装教程 15 | 16 | 1. xxxx 17 | 2. xxxx 18 | 3. xxxx 19 | 20 | #### 使用说明 21 | 22 | 1. xxxx 23 | 2. xxxx 24 | 3. xxxx 25 | 26 | #### 参与贡献 27 | 28 | 1. Fork 本仓库 29 | 2. 新建 Feat_xxx 分支 30 | 3. 提交代码 31 | 4. 新建 Pull Request 32 | 33 | 34 | #### 特技 35 | 36 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 37 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 38 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 39 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 40 | 5. GitHub中文社区 https://www.githubs.cn/ 41 | -------------------------------------------------------------------------------- /other/css3夜空北斗七星闪烁动画/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Big Dipper Animation 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /other/css3夜空北斗七星闪烁动画/script.js: -------------------------------------------------------------------------------- 1 | createStar(); 2 | 3 | function createStar() { 4 | for (var a = 0; a <= 40; a++) { 5 | var b = this.newStar(); 6 | b.style.top = Math.random() * 100 + "%"; 7 | b.style.left = Math.random() * 100 + "%"; 8 | b.style.width = "7.5px"; 9 | b.style.height = "7.5px"; 10 | b.animation = "none"; 11 | document.body.appendChild(b) 12 | } 13 | } 14 | 15 | function newStar() { 16 | var a = document.createElement("div"); 17 | a.innerHTML = '
'; 18 | return a.firstChild 19 | }; -------------------------------------------------------------------------------- /other/css3夜空北斗七星闪烁动画/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | background-color: #07031d; 3 | background-image: linear-gradient(43deg, #07031d 0%, #120a31 22%, #110840 49%, #0c0448 75%, #0c0342 100%); 4 | } 5 | 6 | .sky { 7 | postition: relative; 8 | } 9 | 10 | .star { 11 | background: #919191; 12 | width: 20px; 13 | height: 20px; 14 | border-radius: 50%; 15 | position: absolute; 16 | } 17 | 18 | .glow { 19 | background: white; 20 | animation: glitter 10s linear 0s infinite normal; 21 | -webkit-animation: glitter 10s linear 0s infinite normal; 22 | -moz-animation: glitter 10s linear 0s infinite normal; 23 | -ms-animation: glitter 10s linear 0s infinite normal; 24 | -o-animation: glitter 10s linear 0s infinite normal; 25 | } 26 | 27 | .one { 28 | top: 20%; 29 | left: 30%; 30 | animation-delay: -2s; 31 | } 32 | 33 | .two { 34 | top: 19%; 35 | left: 38%; 36 | animation-delay: -1.7142857143s; 37 | } 38 | 39 | .three { 40 | top: 30%; 41 | left: 46%; 42 | animation-delay: -1.4285714286s; 43 | } 44 | 45 | .four { 46 | top: 40%; 47 | left: 54%; 48 | animation-delay: -1.4285714286s; 49 | } 50 | 51 | .five { 52 | top: 42%; 53 | left: 66%; 54 | animation-delay: -0.8571428571s; 55 | } 56 | 57 | .six { 58 | top: 70%; 59 | left: 64%; 60 | animation-delay: -0.5714285714s; 61 | } 62 | 63 | .seven { 64 | top: 66%; 65 | left: 56%; 66 | animation-delay: -0.2857142857s; 67 | } 68 | 69 | .moon { 70 | position: absolute; 71 | top: 10%; 72 | left: 10%; 73 | width: 70px; 74 | height: 70px; 75 | border-radius: 50%; 76 | background: #ddd; 77 | box-shadow: inset 10px -10px 0 0 #b9b9b9, 0px 0px 40px 20px #203A87; 78 | } 79 | 80 | .crater { 81 | position: absolute; 82 | width: 10px; 83 | height: 10px; 84 | border-radius: 50%; 85 | background: #bbb; 86 | } 87 | 88 | .crater1 { 89 | top: 30px; 90 | right: 30px; 91 | box-shadow: inset -1px 2px 0 0 #969696; 92 | } 93 | 94 | .crater2 { 95 | width: 20px; 96 | height: 20px; 97 | top: 15px; 98 | right: 10px; 99 | box-shadow: inset -2px 4px 0 0 #aaa; 100 | } 101 | 102 | .crater3 { 103 | width: 5px; 104 | height: 5px; 105 | top: 10px; 106 | right: 30px; 107 | } 108 | 109 | @keyframes glitter { 110 | 0% { 111 | transform: scale(1.0); 112 | opacity: 1; 113 | box-shadow: 0px 0px 10px 5px #535FED; 114 | } 115 | 25% { 116 | transform: scale(0.5); 117 | opacity: 0; 118 | } 119 | 50% { 120 | transform: scale(1.0); 121 | opacity: 1; 122 | box-shadow: 0px 0px 10px 5px #535FED; 123 | } 124 | 75% { 125 | transform: scale(0.5); 126 | opacity: 0; 127 | } 128 | 100% { 129 | transform: scale(1.0); 130 | opacity: 1; 131 | box-shadow: 0px 0px 10px 5px #535FED; 132 | } 133 | } -------------------------------------------------------------------------------- /other/css3天空云层动态特效/README.md: -------------------------------------------------------------------------------- 1 | # 纯css3实现天空云层动态特效 2 | 3 | #### 介绍 4 | 5 | 云朵视差特效代码，纯css3实现的天空云层动态特效。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3天空云层动态特效/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3天空云层动态特效/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/css3天空云层动态特效/css/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | width: 100%; 3 | height: 100%; 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | .satic-area { 9 | position: relative; 10 | width: 100%; 11 | height: 100%; 12 | background: url(../img/poster-about.jpg) no-repeat center; 13 | background-size: cover; 14 | } 15 | 16 | .dynamic-area1 { 17 | position: absolute; 18 | width: 100%; 19 | height: 100%; 20 | top: 0; 21 | left: 0; 22 | background: url(../img/poster-drop-animate2.png) repeat-x 0px 0px; 23 | background-size: cover; 24 | animation: posterDrop1 6000s linear infinite; 25 | } 26 | 27 | @keyframes posterDrop1 { 28 | from { background-position: 0 0; } 29 | to { background-position: 4000% 0; } 30 | } 31 | 32 | .dynamic-area2 { 33 | position: absolute; 34 | width: 100%; 35 | height: 100%; 36 | top: 0; 37 | left: 0; 38 | background: url(../img/poster-drop-animate1.png) repeat-x 0px 0px; 39 | background-size: cover; 40 | animation: posterDrop2 8000s linear infinite; 41 | } 42 | 43 | @keyframes posterDrop2 { 44 | from { background-position: 0 0; } 45 | to { background-position: 30000% 0; } 46 | } -------------------------------------------------------------------------------- /other/css3天空云层动态特效/img/poster-about.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3天空云层动态特效/img/poster-about.jpg -------------------------------------------------------------------------------- /other/css3天空云层动态特效/img/poster-drop-animate1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3天空云层动态特效/img/poster-drop-animate1.png -------------------------------------------------------------------------------- /other/css3天空云层动态特效/img/poster-drop-animate2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3天空云层动态特效/img/poster-drop-animate2.png -------------------------------------------------------------------------------- /other/css3天空云层动态特效/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 纯css3实现天空云层动态特效 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /other/css3太极动画-0.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 纯css太极动画 8 | 49 | 50 | 51 |
52 | 53 | 54 | -------------------------------------------------------------------------------- /other/css3太极动画-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 纯css太极动画 8 | 72 | 73 | 74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 | 82 | 83 | -------------------------------------------------------------------------------- /other/css3太极鼠标触发旋转.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | css做的太极，鼠标触发旋转 8 | 74 | 75 | 76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 | 91 | 92 | -------------------------------------------------------------------------------- /other/css3定价表单悬停动画/README.md: -------------------------------------------------------------------------------- 1 | # 定价表单设计，鼠标悬停动画效果 2 | 3 | #### 介绍 4 | 这是一款定价表单设计，当鼠标悬停在定价表单上时，会产生上浮的动画特效，简单实用。 5 | 6 | #### 在线预览 7 | 8 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3定价表单悬停动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3定价表单悬停动画/index.html) 9 | 10 | #### 软件架构 11 | 软件架构说明 12 | 13 | 14 | #### 安装教程 15 | 16 | 1. xxxx 17 | 2. xxxx 18 | 3. xxxx 19 | 20 | #### 使用说明 21 | 22 | 1. xxxx 23 | 2. xxxx 24 | 3. xxxx 25 | 26 | #### 参与贡献 27 | 28 | 1. Fork 本仓库 29 | 2. 新建 Feat_xxx 分支 30 | 3. 提交代码 31 | 4. 新建 Pull Request 32 | 33 | 34 | #### 特技 35 | 36 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 37 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 38 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 39 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 40 | 5. GitHub中文社区 https://www.githubs.cn/ 41 | -------------------------------------------------------------------------------- /other/css3实现地球自转/README.md: -------------------------------------------------------------------------------- 1 | ## 纯CSS3实现地球自转实现代码 2 | 3 | ### 效果图展示 4 | 5 | 利用纯CSS3实现地球自转，下图为最终效果： 6 | 7 | ![img](https://raw.githubusercontent.com/sunyctf/css-effects/main/other/CSS3实现地球自转/end-effect.gif) 8 | 9 | #### 在线预览 10 | 11 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3实现地球自转/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3实现地球自转/index.html) 12 | 13 | ### 素材 14 | 15 | 两张图片，espaco.jpg(1600*1000)、terra.jpg(900*450) 16 | 17 | ![背景太空](https://raw.githubusercontent.com/sunyctf/css-effects/main/other/CSS3实现地球自转/terra.jpg) 18 | 19 | ![背景太空](https://raw.githubusercontent.com/sunyctf/css-effects/main/other/CSS3实现地球自转/espaco.jpg) 20 | 21 | 22 | 23 | ### 实现步骤 24 | 25 | **第一步，形成静态图（地球背景全屏，地球大小为450px\*450px，地球位置为上下左右居中）：** 26 | 27 | 代码如下： 28 | 29 | ```html 30 | 31 | 32 | 33 | 34 | Planet Earth 35 | 53 | 54 | 55 |
56 | 57 | 58 | ``` 59 | 60 | 61 | 效果图： 62 | 63 | ![img](https://raw.githubusercontent.com/sunyctf/css-effects/main/other/CSS3实现地球自转/static.jpg) 64 | 65 | **第二步，形成圆形地球效果，同时添加月晕效果**： 66 | 67 | 代码如下: 68 | 69 | ```html 70 | /*在div.earth中添加以下属性样式*/ 71 | /*形成圆边效果，视觉效果更好，当然也可以不用*/ 72 | border: 1px solid rgba(26,18,101,0.3); 73 | /*使地球形成圆形效果*/ 74 | border-radius: 225px; 75 | /*填加2个阴影，形成圆形外面的模糊月晕效果*/ 76 | box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset; 77 | ``` 78 | 79 | 80 | 效果图： 81 | 82 | ![圆形地球效果](https://raw.githubusercontent.com/sunyctf/css-effects/main/other/CSS3实现地球自转/round-earth.jpg) 83 | 84 | **第三步，形成白天黑夜效果**： 85 | 86 | 代码如下: 87 | 88 | ```html 89 | .earth:before{ 90 | content: ""; 91 | border-radius: 225px; 92 | /*设置弧形阴影，形成白天黑夜效果*/ 93 | box-shadow: -150px -6px 25px rgba(0,0,0,0.7) inset; 94 | left: 0; 95 | position:absolute; 96 | top: 0; 97 | height: 450px; 98 | width: 450px; 99 | } 100 | ``` 101 | 102 | 103 | 效果图： 104 | 105 | ![img](https://raw.githubusercontent.com/sunyctf/css-effects/main/other/CSS3实现地球自转/arc-shadow.jpg) 106 | 107 | **最后一步，形成地球自转效果**： 108 | 109 | 代码如下: 110 | 111 | ```html 112 | @-webkit-keyframes loop { 113 | 0% { 114 | background-position: 0 0; 115 | } 116 | 100% { 117 | /*世界地图的大小为900*450，所以background-position-x: -900px*/ 118 | background-position: -900px 0;} 119 | } 120 | /*在div.earth中添加如下样式*/ 121 | /*这里的时间是可以自定义设置的，如果你想地球转速快一点的话，时间改小点即可，比如10s*/ 122 | -webkit-animation: loop 20s linear infinite; 123 | ``` 124 | 125 | -------------------------------------------------------------------------------- /other/css3实现地球自转/arc-shadow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3实现地球自转/arc-shadow.jpg -------------------------------------------------------------------------------- /other/css3实现地球自转/end-effect.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3实现地球自转/end-effect.gif -------------------------------------------------------------------------------- /other/css3实现地球自转/espaco.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3实现地球自转/espaco.jpg -------------------------------------------------------------------------------- /other/css3实现地球自转/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Planet Earth 7 | 59 | 60 | 61 | 62 |
63 | 64 | 65 | -------------------------------------------------------------------------------- /other/css3实现地球自转/round-earth.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3实现地球自转/round-earth.jpg -------------------------------------------------------------------------------- /other/css3实现地球自转/static.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3实现地球自转/static.jpg -------------------------------------------------------------------------------- /other/css3实现地球自转/terra.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3实现地球自转/terra.jpg -------------------------------------------------------------------------------- /other/css3实现星空动画/README.md: -------------------------------------------------------------------------------- 1 | # CSS3实现星空动画 -- 星星闪烁 - 流星划过 - 月亮上升 2 | 3 | #### 介绍 4 | css3 实现星空动画 -- 星星闪烁 - 流星划过 - 月亮上升。 5 | 6 | #### 在线预览 7 | 8 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3实现星空动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3实现星空动画/index.html) 9 | 10 | #### 软件架构 11 | 软件架构说明 12 | 13 | 14 | #### 安装教程 15 | 16 | 1. xxxx 17 | 2. xxxx 18 | 3. xxxx 19 | 20 | #### 使用说明 21 | 22 | 1. xxxx 23 | 2. xxxx 24 | 3. xxxx 25 | 26 | #### 参与贡献 27 | 28 | 1. Fork 本仓库 29 | 2. 新建 Feat_xxx 分支 30 | 3. 提交代码 31 | 4. 新建 Pull Request 32 | 33 | 34 | #### 特技 35 | 36 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 37 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 38 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 39 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 40 | 5. GitHub中文社区 https://www.githubs.cn/ 41 | -------------------------------------------------------------------------------- /other/css3实现星空动画/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | css3动画：css3 实现星空动画 -- 星星闪烁 - 流星划过 - 月亮上升 8 | 105 | 106 | 107 | 108 |
109 |
110 |
111 | 135 | 136 | 137 | -------------------------------------------------------------------------------- /other/css3弹性卡通怪物上下跳动/README.md: -------------------------------------------------------------------------------- 1 | # CSS3弹性卡通怪物上下跳动动画特效 2 | 3 | #### 介绍 4 | 一款很有个性的纯CSS3制作卡通形像三只小怪物上下跳动动画特效，CSS3弹性动画代码。 5 | 6 | #### 在线预览 7 | 8 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3弹性卡通怪物上下跳动/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3弹性卡通怪物上下跳动/index.html) 9 | 10 | #### 软件架构 11 | 软件架构说明 12 | 13 | 14 | #### 安装教程 15 | 16 | 1. xxxx 17 | 2. xxxx 18 | 3. xxxx 19 | 20 | #### 使用说明 21 | 22 | 1. xxxx 23 | 2. xxxx 24 | 3. xxxx 25 | 26 | #### 参与贡献 27 | 28 | 1. Fork 本仓库 29 | 2. 新建 Feat_xxx 分支 30 | 3. 提交代码 31 | 4. 新建 Pull Request 32 | 33 | 34 | #### 特技 35 | 36 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 37 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 38 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 39 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 40 | 5. GitHub中文社区 https://www.githubs.cn/ 41 | -------------------------------------------------------------------------------- /other/css3弹性卡通怪物上下跳动/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | CSS3弹性卡通怪物上下跳动动画特效 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | 23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | 34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /other/css3悬停百叶窗广告牌轮播特效/README.md: -------------------------------------------------------------------------------- 1 | # CSS3悬停百叶窗广告牌轮播特效 2 | 3 | #### 介绍 4 | 5 | CSS3悬停百叶窗广告牌轮播特效是一款使用css3 rotateScene属性制作3D百叶窗图片轮播广告牌，卷帘式图片广告牌切换特效。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3悬停百叶窗广告牌轮播特效/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3悬停百叶窗广告牌轮播特效/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/css3悬停百叶窗广告牌轮播特效/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3悬停百叶窗广告牌轮播特效/img/1.jpg -------------------------------------------------------------------------------- /other/css3悬停百叶窗广告牌轮播特效/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3悬停百叶窗广告牌轮播特效/img/2.jpg -------------------------------------------------------------------------------- /other/css3悬停百叶窗广告牌轮播特效/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3悬停百叶窗广告牌轮播特效/img/3.jpg -------------------------------------------------------------------------------- /other/css3悬停百叶窗广告牌轮播特效/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3悬停百叶窗广告牌轮播特效/img/4.jpg -------------------------------------------------------------------------------- /other/css3折叠图像/README.md: -------------------------------------------------------------------------------- 1 | # CSS3折叠图像效果 2 | 3 | #### 介绍 4 | 5 | css3折叠图像效果，可以看到网页中的图像呈现折叠折页的展示效果。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3折叠图像/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3折叠图像/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/css3折叠图像/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #ff7a00; 3 | /* for centering the .fold-image within body */ 4 | margin: 0; 5 | min-height: 100vh; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | } 10 | 11 | .fold-image{ 12 | width:600px; 13 | height: 400px; 14 | display: flex; 15 | filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3)); 16 | } 17 | 18 | .fold-image span{ 19 | width: 25%; 20 | height: 100%; 21 | background-image: url(https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80); 22 | background-size: cover; 23 | box-shadow: inset 20px 0 40px rgba(0,0,0,0.4); 24 | } 25 | 26 | .fold-image span:nth-child(odd){ 27 | transform: skewY(18deg); 28 | } 29 | 30 | .fold-image span:nth-child(even){ 31 | transform: skewY(-18deg); 32 | } 33 | .fold-image span:first-child{ 34 | background-position: 0; 35 | } 36 | .fold-image span:nth-child(2){ 37 | background-position: -150px; 38 | } 39 | .fold-image span:nth-child(3){ 40 | background-position: -300px; 41 | } 42 | .fold-image span:last-child{ 43 | background-position: -450px; 44 | } -------------------------------------------------------------------------------- /other/css3折叠图像/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Folded Image Effect 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /other/css3文字弹跳/README.md: -------------------------------------------------------------------------------- 1 | # CSS3文字弹跳动画 2 | 3 | #### 介绍 4 | 一款适合春天的css3文字弹簧动画，您可以用在自己的网页设计中，可自由编辑文本。 5 | 6 | #### 在线预览 7 | 8 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3文字弹跳/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3文字弹跳/index.html) 9 | 10 | #### 软件架构 11 | 软件架构说明 12 | 13 | 14 | #### 安装教程 15 | 16 | 1. xxxx 17 | 2. xxxx 18 | 3. xxxx 19 | 20 | #### 使用说明 21 | 22 | 1. xxxx 23 | 2. xxxx 24 | 3. xxxx 25 | 26 | #### 参与贡献 27 | 28 | 1. Fork 本仓库 29 | 2. 新建 Feat_xxx 分支 30 | 3. 提交代码 31 | 4. 新建 Pull Request 32 | 33 | 34 | #### 特技 35 | 36 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 37 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 38 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 39 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 40 | 5. GitHub中文社区 https://www.githubs.cn/ 41 | -------------------------------------------------------------------------------- /other/css3文字弹跳/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 文字弹跳动画 6 | 7 | 8 | 9 | 10 | 11 | 12 |

Spring
Animation

13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /other/css3文字弹跳/src/ppxapb.css: -------------------------------------------------------------------------------- 1 | 2 | // Equation based on react-motion library: https://git.io/v4vMf 3 | // 4 | // How to derive this equation: 5 | // 6 | // 1. Go to Wolfram|Alpha. 7 | // 8 | // 2. Type in this equation: 9 | // `f''(t) = -180(f(t) - 1) - 12(f'(t)); f'(0) = 0; f(0) = 0` 10 | // Replace 180 and 12 with your desired stiffness and damping. 11 | // react-motion has some nice presets: https://git.io/v4vMt 12 | // 13 | // 3. Replace the code below with the “approximate form” of the 14 | // “differential equation solution.” 15 | // 16 | 17 | spring-wobbly(t) 18 | return -0.5 * (2.71828 ** (-6 * t)) * (-2 * (2.71828 ** (6 * t)) + sin(12 * t) + 2 * cos(12 * t)) -------------------------------------------------------------------------------- /other/css3文字弹跳/src/script.js: -------------------------------------------------------------------------------- 1 | // Generated by LiveScript 1.6.0 2 | (function(){ 3 | 4 | }).call(this); -------------------------------------------------------------------------------- /other/css3新年快乐网页动画/README.md: -------------------------------------------------------------------------------- 1 | # CSS3新年快乐网页动画 2 | 3 | #### 介绍 4 | 5 | CSS3新年快乐网页动画。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3新年快乐网页动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3新年快乐网页动画/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/css3新年快乐网页动画/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 2023新年快乐网页动画特效 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |
2
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
0
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
2
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
3 46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
Happy New Year!
57 |
58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /other/css3新拟态鼠标经过特效/README.md: -------------------------------------------------------------------------------- 1 | # HTML5+CSS3新拟态鼠标经过特效 2 | 3 | #### 介绍 4 | 5 | 使用HTML5+CSS3完成了一个超好看的新拟态（NeumorphismIcon）鼠标经过的效果，快来看看吧！ 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3新拟态鼠标经过特效/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3新拟态鼠标经过特效/index.html) 10 | 11 | #### 软件架构 12 | 软件架构说明 13 | 14 | 15 | #### 安装教程 16 | 17 | 1. xxxx 18 | 2. xxxx 19 | 3. xxxx 20 | 21 | #### 使用说明 22 | 23 | 1. xxxx 24 | 2. xxxx 25 | 3. xxxx 26 | 27 | #### 参与贡献 28 | 29 | 1. Fork 本仓库 30 | 2. 新建 Feat_xxx 分支 31 | 3. 提交代码 32 | 4. 新建 Pull Request 33 | 34 | 35 | #### 特技 36 | 37 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 38 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 39 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 40 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 41 | 5. GitHub中文社区 https://www.githubs.cn/ 42 | -------------------------------------------------------------------------------- /other/css3新拟态鼠标经过特效/css/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | /* 初始化 取消页面的内外边距 */ 3 | padding: 0; 4 | margin: 0; 5 | } 6 | body { 7 | /* 弹性布局 让页面元素垂直+水平居中 */ 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | background-color: #efeeee; 13 | } 14 | .container { 15 | display: flex; 16 | /* 让一行中的元素平均分配宽度 */ 17 | justify-content: space-around; 18 | align-items: center; 19 | /* 元素在一行放不下时自动换行 */ 20 | flex-wrap: wrap; 21 | width: 700px; 22 | height: 600px; 23 | } 24 | .container .box { 25 | display: flex; 26 | justify-content: space-around; 27 | align-items: center; 28 | /* 让元素垂直排列 这里就是让包含图片的div和文字垂直排列 */ 29 | flex-direction: column; 30 | width: 100px; 31 | height: 140px; 32 | margin: 20px; 33 | /* 鼠标放上去变成小手 */ 34 | cursor: pointer; 35 | } 36 | .container .box .img { 37 | /* 这里让图片在盒子里垂直+水平居中 */ 38 | display: flex; 39 | justify-content: center; 40 | align-items: center; 41 | width: 100px; 42 | height: 100px; 43 | /* 圆角属性 */ 44 | border-radius: 20px; 45 | /* 盒子阴影 */ 46 | box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.2), 47 | -18px -18px 30px rgba(255, 255, 255, 1); 48 | /* 过渡时间 ease-out是指先快速 后慢速 */ 49 | transition: all 0.2s ease-out; 50 | } 51 | .container .box .img img { 52 | width: 60px; 53 | transition: all 0.2s ease-out; 54 | } 55 | .container .box p { 56 | color: slategrey; 57 | } 58 | .container .box .img:hover { 59 | /* inset 是内部阴影 默认是外部阴影outset */ 60 | box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8), 61 | inset 18px 18px 30px rgba(0, 0, 0, 0.1), 62 | inset -18px -18px 30px rgba(255, 255, 255, 1); 63 | } 64 | .container .box .img:hover img { 65 | width: 58px; 66 | } 67 | -------------------------------------------------------------------------------- /other/css3新拟态鼠标经过特效/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3新拟态鼠标经过特效/images/1.png -------------------------------------------------------------------------------- /other/css3新拟态鼠标经过特效/images/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3新拟态鼠标经过特效/images/10.png -------------------------------------------------------------------------------- /other/css3新拟态鼠标经过特效/images/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3新拟态鼠标经过特效/images/11.png -------------------------------------------------------------------------------- /other/css3新拟态鼠标经过特效/images/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3新拟态鼠标经过特效/images/12.png -------------------------------------------------------------------------------- /other/css3新拟态鼠标经过特效/images/13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3新拟态鼠标经过特效/images/13.png -------------------------------------------------------------------------------- /other/css3新拟态鼠标经过特效/images/14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3新拟态鼠标经过特效/images/14.png -------------------------------------------------------------------------------- /other/css3新拟态鼠标经过特效/images/15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3新拟态鼠标经过特效/images/15.png -------------------------------------------------------------------------------- /other/css3新拟态鼠标经过特效/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3新拟态鼠标经过特效/images/2.png -------------------------------------------------------------------------------- /other/css3新拟态鼠标经过特效/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3新拟态鼠标经过特效/images/3.png -------------------------------------------------------------------------------- /other/css3新拟态鼠标经过特效/images/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3新拟态鼠标经过特效/images/4.png -------------------------------------------------------------------------------- /other/css3新拟态鼠标经过特效/images/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3新拟态鼠标经过特效/images/5.png -------------------------------------------------------------------------------- /other/css3新拟态鼠标经过特效/images/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3新拟态鼠标经过特效/images/6.png -------------------------------------------------------------------------------- /other/css3新拟态鼠标经过特效/images/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3新拟态鼠标经过特效/images/7.png -------------------------------------------------------------------------------- /other/css3新拟态鼠标经过特效/images/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3新拟态鼠标经过特效/images/8.png -------------------------------------------------------------------------------- /other/css3新拟态鼠标经过特效/images/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3新拟态鼠标经过特效/images/9.png -------------------------------------------------------------------------------- /other/css3新拟态鼠标经过特效/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 新拟态 7 | 8 | 9 | 10 |
11 |
12 |
13 |

录音机

14 |
15 |
16 |
17 |

通讯录

18 |
19 |
20 |
21 |

电话

22 |
23 |
24 |
25 |

短信

26 |
27 |
28 |
29 |

浏览器

30 |
31 |
32 |
33 |

相机

34 |
35 |
36 |
37 |

相册

38 |
39 |
40 |
41 |

哔哩哔哩

42 |
43 |
44 |
45 |

日历

46 |
47 |
48 |
49 |

时钟

50 |
51 |
52 |
53 |

Youtube

54 |
55 |
56 |
57 |

Facebook

58 |
59 |
60 |
61 |

微信

62 |
63 |
64 |
65 |

QQ

66 |
67 |
68 |
69 |

微博

70 |
71 |
72 | 73 | 74 | -------------------------------------------------------------------------------- /other/css3旅游画廊悬停放大动画/README.md: -------------------------------------------------------------------------------- 1 | # CSS3旅游画廊悬停放大动画 2 | 3 | #### 介绍 4 | 5 | 一款简约的css3旅游画廊过渡动画效果，鼠标悬停图片放大，可以自由编辑，可以使用到不同的网站中，相信大家一定会适用，欢迎大家下载并且参考。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3旅游画廊悬停放大动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3旅游画廊悬停放大动画/index.html) 10 | 11 | #### 软件架构 12 | 13 | #### 软件架构 14 | 15 | 软件架构说明 16 | 17 | 18 | #### 安装教程 19 | 20 | 1. xxxx 21 | 2. xxxx 22 | 3. xxxx 23 | 24 | #### 使用说明 25 | 26 | 1. xxxx 27 | 2. xxxx 28 | 3. xxxx 29 | 30 | #### 参与贡献 31 | 32 | 1. Fork 本仓库 33 | 2. 新建 Feat_xxx 分支 34 | 3. 提交代码 35 | 4. 新建 Pull Request 36 | 37 | 38 | #### 特技 39 | 40 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 41 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 42 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 43 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 44 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/css3旅游画廊悬停放大动画/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Travel Gallery (Flexbox and CSS Animations/Transitions) 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |

Venice

18 |
19 |
    20 |
  • Country: Italy
    • 21 |
  • Founded: 697
    • 22 |
  • Population: 260,060
    • 23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |

Paris

32 |
33 |
    34 |
  • Country: France
    • 35 |
  • Founded: ~250BC
    • 36 |
  • Population: 2.2 Million
    • 37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |

Salzburg

46 |
47 |
    48 |
  • Country: Austria
    • 49 |
  • Founded: 1622
    • 50 |
  • Population: 145,871
    • 51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |

Prague

60 |
61 |
    62 |
  • Country: Czech Republic
    • 63 |
  • Founded: 870
    • 64 |
  • Population: 1.2 Million
    • 65 |
66 |
67 |
68 |
69 |
70 | 71 | 72 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /other/css3旅游画廊悬停放大动画/src/script.js: -------------------------------------------------------------------------------- 1 | (function(window, document, $, undefined) { 2 | var $slides, $btnArr; 3 | 4 | function onClick(e) { 5 | var $target = $(e.target); 6 | if ($target.hasClass('slide') && !$target.hasClass('active') && !$target.siblings().hasClass('active')) { 7 | $target.removeClass('anim-in last-viewed').addClass('active') 8 | $target.siblings().removeClass('anim-in last-viewed').addClass('anim-out'); 9 | } 10 | } 11 | 12 | function closeSlide(e) { 13 | var $slide = $(e.target).parent(); 14 | $slide.removeClass('active anim-in').addClass('last-viewed'); 15 | $slide.siblings().removeClass('anim-out').addClass('anim-in'); 16 | } 17 | 18 | $(function() { 19 | $slides = $('.slide'); 20 | $btnArr = $slides.find('.btn-close'); 21 | $slides.on('click', onClick); 22 | $btnArr.on('click', closeSlide); 23 | }); 24 | })(this, document, jQuery); -------------------------------------------------------------------------------- /other/css3母亲节寄语文字动画/README.md: -------------------------------------------------------------------------------- 1 | # CSS3母亲节感恩节寄语文字动画特效 2 | 3 | #### 介绍 4 | 这是一款很温馨的CSS3母亲节感恩节寄语文字动画特效，也可以运用于其他场景，首先要选一张氛围合适的背景图，再配上文字就可以了。 5 | 6 | #### 在线预览 7 | 8 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3母亲节寄语文字动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3母亲节寄语文字动画/index.html) 9 | 10 | #### 软件架构 11 | 软件架构说明 12 | 13 | 14 | #### 安装教程 15 | 16 | 1. xxxx 17 | 2. xxxx 18 | 3. xxxx 19 | 20 | #### 使用说明 21 | 22 | 1. xxxx 23 | 2. xxxx 24 | 3. xxxx 25 | 26 | #### 参与贡献 27 | 28 | 1. Fork 本仓库 29 | 2. 新建 Feat_xxx 分支 30 | 3. 提交代码 31 | 4. 新建 Pull Request 32 | 33 | 34 | #### 特技 35 | 36 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 37 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 38 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 39 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 40 | 5. GitHub中文社区 https://www.githubs.cn/ 41 | -------------------------------------------------------------------------------- /other/css3母亲节寄语文字动画/css/style.css: -------------------------------------------------------------------------------- 1 | @keyframes loading { 2 | 0%, 100% { 3 | -moz-transform: scale(1) r1otateZ(0deg); 4 | -ms-transform: scale(1) r1otateZ(0deg); 5 | -webkit-transform: scale(1) r1otateZ(0deg); 6 | transform: scale(1) r1otateZ(0deg); 7 | opacity: 1; 8 | -o-transform: scale(1) r1otateZ(0deg); 9 | } 10 | 11 | 26% { 12 | -moz-transform: scale(1.1) rotateZ(12deg); 13 | -ms-transform: scale(1.1) rotateZ(12deg); 14 | -webkit-transform: scale(1.1) rotateZ(12deg); 15 | transform: scale(1.1) rotateZ(12deg); 16 | opacity: .2; 17 | } 18 | 19 | 76% { 20 | -moz-transform: scale(0.8) rotateZ(-8deg); 21 | -ms-transform: scale(0.8) rotateZ(-8deg); 22 | -webkit-transform: scale(0.8) rotateZ(-8deg); 23 | transform: scale(0.8) rotateZ(-8deg); 24 | opacity: .6; 25 | } 26 | } 27 | .loader { 28 | overflow: hidden; 29 | font-size: 40px; 30 | } 31 | 32 | .loader span { 33 | -moz-animation: loading 1s linear infinite -0.8s; 34 | -webkit-animation: loading 1s linear infinite -0.8s; 35 | animation: loading 1s linear infinite -0.8s; 36 | float: left; 37 | } 38 | 39 | .loader .span2 { 40 | -moz-animation: loading 1s linear infinite -0.2s; 41 | -webkit-animation: loading 1s linear infinite -0.2s; 42 | animation: loading 1s linear infinite -0.2s; 43 | } 44 | 45 | .loader .span3 { 46 | -moz-animation: loading 1s linear infinite -0.5s; 47 | -webkit-animation: loading 1s linear infinite -0.5s; 48 | animation: loading 1s linear infinite -0.5s; 49 | } 50 | 51 | .loader .span4 { 52 | -moz-animation: loading 1s linear infinite -1.1s; 53 | -webkit-animation: loading 1s linear infinite -1.1s; 54 | animation: loading 1s linear infinite -1.1s; 55 | } 56 | 57 | .loader .span5 { 58 | -moz-animation: loading 1s linear infinite -0.36s; 59 | -webkit-animation: loading 1s linear infinite -0.36s; 60 | animation: loading 1s linear infinite -0.36s; 61 | } 62 | 63 | .loader .span6 { 64 | -moz-animation: loading 1s linear infinite -0.65s; 65 | -webkit-animation: loading 1s linear infinite -0.65s; 66 | animation: loading 1s linear infinite -0.65s; 67 | } 68 | 69 | .loader .span7 { 70 | -moz-animation: loading 1s linear infinite -0.93s; 71 | -webkit-animation: loading 1s linear infinite -0.93s; 72 | animation: loading 1s linear infinite -0.93s; 73 | } 74 | 75 | .font1 { 76 | font-family: 'Helvetica',Arial,sans-serif; 77 | } 78 | 79 | .font2 { 80 | font-family: Impact; 81 | } 82 | 83 | .font3 { 84 | font-family: "Times "; 85 | } 86 | 87 | .font4 { 88 | font-family: "Comic Sans Ms",sans-serif; 89 | font-weight: bold; 90 | } -------------------------------------------------------------------------------- /other/css3母亲节寄语文字动画/img/802.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3母亲节寄语文字动画/img/802.jpg -------------------------------------------------------------------------------- /other/css3母亲节寄语文字动画/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 | 妈妈您辛苦了 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | " 17 | I 18 | love 19 | you 20 | ， 21 | just 22 | like 23 |
24 | 25 |
26 | the 27 | first 28 | . 29 | " 30 | My 31 | mother 32 | who 33 |
34 | 35 |
36 | has 37 | been 38 | caring 39 | for 40 | my 41 | growth 42 | has 43 |
44 | 45 |
46 | been 47 | hard 48 | . 49 |
50 | 51 |
52 | 53 |
54 |
55 | “我爱你，一如最初。”一直呵护我成长的妈妈，辛苦了。 56 |
57 |
58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /other/css3母亲节背景动画/README.md: -------------------------------------------------------------------------------- 1 | # CSS3母亲节主题寄语文字动画特效 2 | 3 | #### 介绍 4 | 送给大家一款母CSS3母亲节主题寄语文字动画特效，简单温馨，可用于您的主题网页设计中。 5 | 6 | #### 在线预览 7 | 8 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3母亲节背景动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3母亲节背景动画/index.html) 9 | 10 | #### 软件架构 11 | 软件架构说明 12 | 13 | 14 | #### 安装教程 15 | 16 | 1. xxxx 17 | 2. xxxx 18 | 3. xxxx 19 | 20 | #### 使用说明 21 | 22 | 1. xxxx 23 | 2. xxxx 24 | 3. xxxx 25 | 26 | #### 参与贡献 27 | 28 | 1. Fork 本仓库 29 | 2. 新建 Feat_xxx 分支 30 | 3. 提交代码 31 | 4. 新建 Pull Request 32 | 33 | 34 | #### 特技 35 | 36 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 37 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 38 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 39 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 40 | 5. GitHub中文社区 https://www.githubs.cn/ 41 | -------------------------------------------------------------------------------- /other/css3母亲节背景动画/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mother's Day 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |

Happy Mothers' Day

16 |

Love Oli

17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /other/css3气泡交叉游动网页加载图标动画/README.md: -------------------------------------------------------------------------------- 1 | # CSS3气泡交叉游动网页加载图标动画特效 2 | 3 | #### 介绍 4 | 5 | css3气泡交叉游动网页加载图标动画特效。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3气泡交叉游动网页加载图标动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3气泡交叉游动网页加载图标动画/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/css3流星雨划过动画/README.md: -------------------------------------------------------------------------------- 1 | # CSS3流星雨划过动画特效 2 | 3 | #### 介绍 4 | CSS3流星雨划过动画特效。 5 | 6 | #### 在线预览 7 | 8 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3流星雨划过动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3流星雨划过动画/index.html) 9 | 10 | #### 软件架构 11 | 软件架构说明 12 | 13 | 14 | #### 安装教程 15 | 16 | 1. xxxx 17 | 2. xxxx 18 | 3. xxxx 19 | 20 | #### 使用说明 21 | 22 | 1. xxxx 23 | 2. xxxx 24 | 3. xxxx 25 | 26 | #### 参与贡献 27 | 28 | 1. Fork 本仓库 29 | 2. 新建 Feat_xxx 分支 30 | 3. 提交代码 31 | 4. 新建 Pull Request 32 | 33 | 34 | #### 特技 35 | 36 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 37 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 38 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 39 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 40 | 5. GitHub中文社区 https://www.githubs.cn/ 41 | -------------------------------------------------------------------------------- /other/css3流星雨划过动画/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS3流星雨划过动画特效 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /other/css3渐变色动画边框.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 纯CSS 渐变色动画边框 8 | 71 | 72 | 73 |
74 | you are my
75 | FAVORITE 76 |
77 | 78 | 79 | -------------------------------------------------------------------------------- /other/css3滚动显示页面/README.md: -------------------------------------------------------------------------------- 1 | # CSS3滚动显示页面效果 2 | 3 | #### 介绍 4 | 5 | 一款滚动页面代码，实用的css页面滚动，精美大气的页面布局，通过鼠标可实现图片和文本的上下滚动显示，希望对大家有帮助。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3滚动显示页面/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3滚动显示页面/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/css3火焰文字特效/README.md: -------------------------------------------------------------------------------- 1 | # CSS3火焰文字特效 2 | 3 | #### 介绍 4 | 5 | css3火焰文字特效 - css3-flame-text-effect 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3火焰文字特效/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3火焰文字特效/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/css3火焰文字特效/css/style.css: -------------------------------------------------------------------------------- 1 | #fire{ 2 | text-align: center; 3 | margin: 200px auto; 4 | font-family: "Comic Sans MS"; 5 | font-size: 80px; 6 | color: white; 7 | text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; 8 | 9 | } 10 | 11 | body {background:black; } -------------------------------------------------------------------------------- /other/css3火焰文字特效/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS3火焰效果文字特效 7 | 8 | 9 | 10 | 11 | 12 |

HTML5 Tricks

13 | 14 | 15 | -------------------------------------------------------------------------------- /other/css3炫酷文字字体动画/README.md: -------------------------------------------------------------------------------- 1 | # 炫酷css文字字体动画特效 2 | 3 | #### 介绍 4 | 一款字体样式代码，炫酷css文字动态效果，画面中呈现了文字抖动悬浮的动画效果，符合网页动画特点，创意设计，希望大家能够喜欢。 5 | 6 | #### 在线预览 7 | 8 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3炫酷文字字体动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3炫酷文字字体动画/index.html) 9 | 10 | #### 软件架构 11 | 软件架构说明 12 | 13 | 14 | #### 安装教程 15 | 16 | 1. xxxx 17 | 2. xxxx 18 | 3. xxxx 19 | 20 | #### 使用说明 21 | 22 | 1. xxxx 23 | 2. xxxx 24 | 3. xxxx 25 | 26 | #### 参与贡献 27 | 28 | 1. Fork 本仓库 29 | 2. 新建 Feat_xxx 分支 30 | 3. 提交代码 31 | 4. 新建 Pull Request 32 | 33 | 34 | #### 特技 35 | 36 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 37 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 38 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 39 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 40 | 5. GitHub中文社区 https://www.githubs.cn/ 41 | -------------------------------------------------------------------------------- /other/css3玻璃变形按钮悬停发光/README.md: -------------------------------------------------------------------------------- 1 | # CSS3玻璃变形按钮悬停发光效果 2 | 3 | #### 介绍 4 | 5 | 按钮动画效果，简单实用的CSS3玻璃变形按钮悬停发光效果，鼠标悬停于按钮上，可以发光发亮，三种不同色彩的发光按钮 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3玻璃变形按钮悬停发光/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3玻璃变形按钮悬停发光/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/css3玻璃变形按钮悬停发光/css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Roboto:wght@400;500;700&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: "Roboto", sans-serif; 8 | } 9 | body { 10 | position: relative; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | min-height: 100vh; 15 | background: linear-gradient(to bottom, #5d326c, #350048); /*fiolet*/ 16 | } 17 | .container { 18 | width: 1000px; 19 | display: flex; 20 | flex-wrap: wrap; 21 | justify-content: space-around; 22 | } 23 | .container .btn { 24 | position: relative; 25 | top: 0; 26 | left: 0; 27 | width: 250px; 28 | height: 50px; 29 | margin: 0; 30 | display: flex; 31 | justify-content: center; 32 | align-items: center; 33 | } 34 | .container .btn a { 35 | position: absolute; 36 | top: 0; 37 | left: 0; 38 | width: 100%; 39 | height: 100%; 40 | display: flex; 41 | justify-content: center; 42 | align-items: center; 43 | background: rgba(255, 255, 255, 0.05); 44 | box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3); 45 | border-bottom: 1px solid rgba(255, 255, 255, 0.1); 46 | border-top: 1px solid rgba(255, 255, 255, 0.1); 47 | border-radius: 30px; 48 | padding: 10px; 49 | letter-spacing: 1px; 50 | text-decoration: none; 51 | overflow: hidden; 52 | color: #fff; 53 | font-weight: 400px; 54 | z-index: 1; 55 | transition: 0.5s; 56 | backdrop-filter: blur(15px); 57 | } 58 | .container .btn:hover a { 59 | letter-spacing: 3px; 60 | } 61 | .container .btn a::before { 62 | content: ""; 63 | position: absolute; 64 | top: 0; 65 | left: 0; 66 | width: 50%; 67 | height: 100%; 68 | background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent); 69 | transform: skewX(45deg) translate(0); 70 | transition: 0.5s; 71 | filter: blur(0px); 72 | } 73 | .container .btn:hover a::before { 74 | transform: skewX(45deg) translate(200px); 75 | } 76 | .container .btn::before { 77 | content: ""; 78 | position: absolute; 79 | left: 50%; 80 | transform: translatex(-50%); 81 | bottom: -5px; 82 | width: 30px; 83 | height: 10px; 84 | background: #f00; 85 | border-radius: 10px; 86 | transition: 0.5s; 87 | transition-delay: 0.5; 88 | } 89 | .container .btn:hover::before /*lightup button*/ { 90 | bottom: 0; 91 | height: 50%; 92 | width: 80%; 93 | border-radius: 30px; 94 | } 95 | 96 | .container .btn::after { 97 | content: ""; 98 | position: absolute; 99 | left: 50%; 100 | transform: translatex(-50%); 101 | top: -5px; 102 | width: 30px; 103 | height: 10px; 104 | background: #f00; 105 | border-radius: 10px; 106 | transition: 0.5s; 107 | transition-delay: 0.5; 108 | } 109 | .container .btn:hover::after /*lightup button*/ { 110 | top: 0; 111 | height: 50%; 112 | width: 80%; 113 | border-radius: 30px; 114 | } 115 | .container .btn:nth-child(1)::before, /*chnage 1*/ 116 | .container .btn:nth-child(1)::after { 117 | background: #ff1f71; 118 | box-shadow: 0 0 5px #ff1f71, 0 0 15px #ff1f71, 0 0 30px #ff1f71, 119 | 0 0 60px #ff1f71; 120 | } 121 | .container .btn:nth-child(2)::before, /* 2*/ 122 | .container .btn:nth-child(2)::after { 123 | background: #2db2ff; 124 | box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff, 125 | 0 0 60px #2db2ff; 126 | } 127 | .container .btn:nth-child(3)::before, /* 3*/ 128 | .container .btn:nth-child(3)::after { 129 | background: #1eff45; 130 | box-shadow: 0 0 5px #1eff45, 0 0 15px #1eff45, 0 0 30px #1eff45, 131 | 0 0 60px #1eff45; 132 | } -------------------------------------------------------------------------------- /other/css3玻璃变形按钮悬停发光/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Glassmorphism Button Hover Effects | Glass Morphism 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Glassmorphism button 16 | 17 | 18 | 19 |
20 |
Read more 1
21 |
Read more 2
22 |
Read more 3
23 |
24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /other/css3登录注册表单切换效果/README.md: -------------------------------------------------------------------------------- 1 | # 纯css3网站会员登录注册表单切换效果 2 | 3 | #### 介绍 4 | 5 | 一款会员登录注册代码，精美的登录注册页面代码html，实现用户注册和登陆的实例，深蓝色的页面设计，精美简约，希望你会喜欢。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3登录注册表单切换效果/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3登录注册表单切换效果/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/css3登录注册表单切换效果/img/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3登录注册表单切换效果/img/Thumbs.db -------------------------------------------------------------------------------- /other/css3登录注册表单切换效果/img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3登录注册表单切换效果/img/bg.jpg -------------------------------------------------------------------------------- /other/css3登录注册表单切换效果/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS3用户登录注册翻转式切换代码 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 | 69 |
70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /other/css3社交媒体图标按钮悬停动画/README.md: -------------------------------------------------------------------------------- 1 | # CSS3社交媒体图标按钮悬停动画特效 2 | 3 | #### 介绍 4 | 简洁精美的css3社交媒体图标按钮悬停动画特效，鼠标悬停按钮背景划过变色、图标放大动画效果。 5 | 6 | #### 在线预览 7 | 8 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3社交媒体图标按钮悬停动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3社交媒体图标按钮悬停动画/index.html) 9 | 10 | #### 软件架构 11 | 软件架构说明 12 | 13 | 14 | #### 安装教程 15 | 16 | 1. xxxx 17 | 2. xxxx 18 | 3. xxxx 19 | 20 | #### 使用说明 21 | 22 | 1. xxxx 23 | 2. xxxx 24 | 3. xxxx 25 | 26 | #### 参与贡献 27 | 28 | 1. Fork 本仓库 29 | 2. 新建 Feat_xxx 分支 30 | 3. 提交代码 31 | 4. 新建 Pull Request 32 | 33 | 34 | #### 特技 35 | 36 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 37 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 38 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 39 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 40 | 5. GitHub中文社区 https://www.githubs.cn/ 41 | -------------------------------------------------------------------------------- /other/css3社交媒体图标按钮悬停动画/css/style.css: -------------------------------------------------------------------------------- 1 | *{margin:0;padding:0;list-style-type:none;} 2 | a,img{border:0;} 3 | body{background:#eee;} 4 | 5 | .social-btns .btn, 6 | .social-btns .btn:before, 7 | .social-btns .btn .fa { 8 | transition: all 0.35s; 9 | transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59); 10 | } 11 | .social-btns .btn:before { 12 | top: 90%; 13 | left: -110%; 14 | } 15 | .social-btns .btn .fa { 16 | -webkit-transform: scale(0.8); 17 | transform: scale(0.8); 18 | } 19 | .social-btns .btn.facebook:before { 20 | background-color: #3b5998; 21 | } 22 | .social-btns .btn.facebook .fa { 23 | color: #3b5998; 24 | } 25 | .social-btns .btn.twitter:before { 26 | background-color: #00aff0; 27 | } 28 | .social-btns .btn.twitter .fa { 29 | color: #00aff0; 30 | } 31 | .social-btns .btn.google:before { 32 | background-color: #dc4a38; 33 | } 34 | .social-btns .btn.google .fa { 35 | color: #dc4a38; 36 | } 37 | .social-btns .btn.instagram:before { 38 | background-color: #bf00ff; 39 | } 40 | .social-btns .btn.instagram .fa { 41 | color: #bf00ff; 42 | } 43 | .social-btns .btn.pinterest:before { 44 | background-color: #cc0000; 45 | } 46 | .social-btns .btn.pinterest .fa { 47 | color: #cc0000; 48 | } 49 | .social-btns .btn:focus:before, 50 | .social-btns .btn:hover:before { 51 | top: -10%; 52 | left: -10%; 53 | } 54 | .social-btns .btn:focus .fa, 55 | .social-btns .btn:hover .fa { 56 | color: #fff; 57 | -webkit-transform: scale(1); 58 | transform: scale(1); 59 | } 60 | .social-btns { 61 | height: 90px; 62 | margin: auto; 63 | font-size: 0; 64 | text-align: center; 65 | position: absolute; 66 | top: 0; 67 | bottom: 0; 68 | left: 0; 69 | right: 0; 70 | } 71 | .social-btns .btn { 72 | display: inline-block; 73 | background-color: #fff; 74 | width: 90px; 75 | height: 90px; 76 | line-height: 90px; 77 | margin: 0 10px; 78 | text-align: center; 79 | position: relative; 80 | overflow: hidden; 81 | border-radius: 28%; 82 | box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1); 83 | opacity: 0.99; 84 | } 85 | .social-btns .btn:before { 86 | content: ""; 87 | width: 120%; 88 | height: 120%; 89 | position: absolute; 90 | -webkit-transform: rotate(45deg); 91 | transform: rotate(45deg); 92 | } 93 | .social-btns .btn .fa { 94 | font-size: 38px; 95 | vertical-align: middle; 96 | } -------------------------------------------------------------------------------- /other/css3社交媒体图标按钮悬停动画/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Stylish Social Buttons 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /other/css3类DNA细胞预加载动画/README.md: -------------------------------------------------------------------------------- 1 | # CSS3类似DNA细胞的css预加载动画 2 | 3 | #### 介绍 4 | 5 | 一款特别的类似DNA细胞的css预加载动画，该动画由黄色和蓝色两条圆点线组成，形成上下交叉的动画效果，像极了生物里的细胞。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3类DNA细胞预加载动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3类DNA细胞预加载动画/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/css3类DNA细胞预加载动画/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DNA Preloader 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | 44 |
45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 |
76 | 77 | 78 | -------------------------------------------------------------------------------- /other/css3类DNA细胞预加载动画/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | min-height: 100vh; 3 | display: grid; 4 | align-content: center; 5 | background: #111; 6 | } 7 | 8 | .container { 9 | display: grid; 10 | grid-template-columns: repeat(10, 1fr); 11 | gap: 1.5rem; 12 | max-width: 60rem; 13 | margin: auto; 14 | grid-row: 1/2; 15 | grid-column: 1/2; 16 | } 17 | 18 | .container svg { 19 | width: 100%; 20 | height: auto; 21 | animation: spin 0.8s ease-in-out alternate infinite; 22 | } 23 | 24 | .container svg circle { 25 | animation: pulse 0.8s ease-in-out alternate infinite; 26 | transform-origin: 50% 50%; 27 | } 28 | 29 | .container svg.blue { 30 | fill: #0052b7; 31 | animation: spin_reverse 0.8s ease-in-out alternate infinite; 32 | } 33 | 34 | .container svg.blue circle { 35 | animation-delay: 0.8s; 36 | } 37 | 38 | .container svg.yellow { 39 | fill: #ffd600; 40 | } 41 | 42 | .container svg:nth-of-type(1) { 43 | animation-delay: 0.2s; 44 | } 45 | 46 | .container svg:nth-of-type(2) { 47 | animation-delay: 0.4s; 48 | } 49 | 50 | .container svg:nth-of-type(3) { 51 | animation-delay: 0.6s; 52 | } 53 | 54 | .container svg:nth-of-type(4) { 55 | animation-delay: 0.8s; 56 | } 57 | 58 | .container svg:nth-of-type(5) { 59 | animation-delay: 1s; 60 | } 61 | 62 | .container svg:nth-of-type(6) { 63 | animation-delay: 1.2s; 64 | } 65 | 66 | .container svg:nth-of-type(7) { 67 | animation-delay: 1.4s; 68 | } 69 | 70 | .container svg:nth-of-type(8) { 71 | animation-delay: 1.6s; 72 | } 73 | 74 | .container svg:nth-of-type(9) { 75 | animation-delay: 1.8s; 76 | } 77 | 78 | .container svg:nth-of-type(10) { 79 | animation-delay: 2s; 80 | } 81 | 82 | @keyframes spin { 83 | 0% { 84 | transform: translateY(150%); 85 | } 86 | 100% { 87 | transform: translateY(-150%); 88 | } 89 | } 90 | 91 | @keyframes spin_reverse { 92 | 0% { 93 | transform: translateY(-150%); 94 | } 95 | 100% { 96 | transform: translateY(150%); 97 | } 98 | } 99 | 100 | @keyframes pulse { 101 | 0% { 102 | transform: scale(0.25); 103 | } 104 | 100% { 105 | transform: scale(1); 106 | } 107 | } -------------------------------------------------------------------------------- /other/css3节日折叠卡片/README.md: -------------------------------------------------------------------------------- 1 | # 折叠动画transitioncss，节日卡片制作素材 2 | 3 | #### 介绍 4 | holiday-feature-folding-cards-pure-css | 这是一款折叠动画transitioncss，节日卡片制作素材，当鼠标悬停在卡片上时，会产生折叠打开的动画效果，可灵活使用在网页中。 5 | 6 | #### 在线预览 7 | 8 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3流星雨划过动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3流星雨划过动画/index.html) 9 | 10 | #### 软件架构 11 | 软件架构说明 12 | 13 | 14 | #### 安装教程 15 | 16 | 1. xxxx 17 | 2. xxxx 18 | 3. xxxx 19 | 20 | #### 使用说明 21 | 22 | 1. xxxx 23 | 2. xxxx 24 | 3. xxxx 25 | 26 | #### 参与贡献 27 | 28 | 1. Fork 本仓库 29 | 2. 新建 Feat_xxx 分支 30 | 3. 提交代码 31 | 4. 新建 Pull Request 32 | 33 | 34 | #### 特技 35 | 36 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 37 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 38 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 39 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 40 | 5. GitHub中文社区 https://www.githubs.cn/ 41 | -------------------------------------------------------------------------------- /other/css3透视按钮悬停效果/README.md: -------------------------------------------------------------------------------- 1 | ## CSS3透视按钮悬停效果 2 | 3 | #### 效果演示： 4 | 5 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3透视按钮悬停效果/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3透视按钮悬停效果/index.html) 6 | 7 | #### 代码部分： 8 | 9 | ```css 10 | 16 | body { 17 | margin: 0; 18 | height: 100vh; 19 | display: flex; 20 | align-items: center; 21 | justify-content: center; 22 | background: cornsilk; 23 | } 24 | 25 | ul { 26 | padding: 0; 27 | list-style-type: none; /*去掉无序列表的默认样式*/ 28 | } 29 | 30 | ul li { 31 | box-sizing: border-box; 32 | width: 15em; /*以20px为基准，此处是300px*/ 33 | height: 3em; 34 | font-size: 20px; 35 | border-radius: 0.5em; 36 | margin: 0.5em; 37 | box-shadow: 0 0 1em rgba(0,0,0,0.2);/*阴影效果的设置*/ 38 | color: white; 39 | font-family: sans-serif; 40 | text-transform: capitalize;/*首字母大写*/ 41 | line-height: 3em; 42 | transition: 0.3s;/*改变时的过渡效果*/ 43 | cursor: pointer; 44 | } 45 | 46 | ul li:nth-child(odd) { 47 | background: linear-gradient(to right, orange, tomato);/*从左至右的渐变色效果*/ 48 | text-align: left; 49 | padding-left: 10%; 50 | transform: perspective(500px) rotateY(45deg);/*3D透视效果和旋转的设置，图形沿着Y轴逆时针旋转45°*/ 51 | } 52 | 53 | ul li:nth-child(even) { 54 | background: linear-gradient(to left, orange, tomato); 55 | text-align: right; 56 | padding-right: 10%; 57 | transform: perspective(500px) rotateY(-45deg);/*距离视图的距离，参数越大说明距离视图越远，看着就越小*/ 58 | } 59 | 60 | ul li:nth-child(odd):hover { /*鼠标悬停时的效果*/ 61 | transform: perspective(200px) rotateY(45deg); 62 | padding-left: 5%; 63 | } 64 | 65 | ul li:nth-child(even):hover { 66 | transform: perspective(200px) rotateY(-45deg); 67 | padding-right: 5%; 68 | } 69 | ``` 70 | 71 | #### 涉及知识点： 72 | 73 | **1. 颜色设置：background: cornsilk;英文翻译是康丝兰等价于background: #FFF8DC;** 74 | 75 | **2. 新接触的vh单位** 76 | 77 | 说明： 相对于视口的高度。视口被均分为100单位的vh 78 | 79 | 示例代码： 80 | 81 | ```css 82 | h1 {font-size: 8vh; } 83 | ``` 84 | 85 | 如果视口的高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100 86 | 87 | **3. box-shadow 向框添加一个或多个阴影。** 88 | 89 | box-shadow: h-shadow v-shadow blur spread color inset; 90 | 91 | h-shadow 必需。水平阴影的位置。允许负值。 92 | 93 | v-shadow 必需。垂直阴影的位置。允许负值。 94 | 95 | blur 可选。模糊距离。(模糊半径的大小) 96 | 97 | spread 可选。阴影的尺寸。(扩展半径的大小） 98 | 99 | color 可选。阴影的颜色。 100 | 101 | inset 可选。默认阴影在边框外。使用 inset 后，阴影在边框内（即使是透明边框），背景之上内容之下。 102 | 声明多个shadow时，用逗号将shadow隔开。 103 | 104 | **4. rgb和rgba** 105 | 106 | rgb(0,0,0)——黑色 107 | 108 | rgb(255,255,255)——白色 109 | 110 | rgba(0,0,0,.2):透明度0-1-->逐渐不透明，为1时不透明，为0时全透明 111 | 112 | **5.线性渐变色设置：** 113 | 114 | ```css 115 | background: linear-gradient(direction, color-stop1, color-stop2, ...); 116 | ``` 117 | 118 | **6. 衬线字体(serif)/非衬线字体(sans serif)的区别** 119 | 120 | （1）serif 是有衬线字体，意思是在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。相反的，sans serif 就没有这些额外的装饰，而且笔画的粗细差不多。 121 | 122 | （2）serif 字体容易识别，它强调了每个字母笔画的开始和结束，因此易读性比较高，sans serif 则比较醒目。在中文阅读的情况下，适合使用 serif 字体(如宋体)进行排版，易于换行阅读的识别性，避免发生行间的阅读错误。 123 | 124 | （3）在小字体的场合，通常Sans Serif 比Serif 更清晰。 -------------------------------------------------------------------------------- /other/css3透视按钮悬停效果/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 透视按钮悬停效果 8 | 68 | 69 | 70 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /other/css3餐饮行业精美蒙版动画/README.md: -------------------------------------------------------------------------------- 1 | # 一款适合餐饮行业的精美CSS3蒙版动画 2 | 3 | #### 介绍 4 | 5 | 用css可以做很多意想不到的网页特效，比如今天要分享的这款适合餐饮行业的精美css蒙版动画，画面中是一张美食图片，随即会出现一层朦胧现象覆盖在图片上，并伴随食物热气腾腾的蒸汽动画，效果绝绝子。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3餐饮行业精美蒙版动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3餐饮行业精美蒙版动画/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/css3餐饮行业精美蒙版动画/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Mask Animation 6 | 7 | 8 | 9 | 10 | 11 |
12 |

CSS Mask Animation

13 |
14 | 15 |
16 |
17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /other/css3餐饮行业精美蒙版动画/src/fish-vegetables.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3餐饮行业精美蒙版动画/src/fish-vegetables.jpg -------------------------------------------------------------------------------- /other/css3餐饮行业精美蒙版动画/src/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-weight: 700; 3 | font-family: Lato; 4 | letter-spacing: 0.08em; 5 | background-color: #F0F4C3; 6 | } 7 | .content-wrapper { 8 | display: flex; 9 | flex-direction: column; 10 | align-items: center; 11 | } 12 | .image-wrapper { 13 | width: 100%; 14 | max-width: 640px; 15 | margin-right: auto; 16 | margin-left: auto; 17 | mask-image: url("https://res.cloudinary.com/daqkfiwnc/image/upload/v1647573770/assets/mask_cloud_gzcgdf.png"); 18 | mask-size: 100% 100%; 19 | mask-mode: alpha; 20 | mask-repeat: no-repeat; 21 | mask-position: center; 22 | -webkit-mask-image: url("https://res.cloudinary.com/daqkfiwnc/image/upload/v1647573770/assets/mask_cloud_gzcgdf.png"); 23 | -webkit-mask-size: 100% 100%; 24 | -webkit-mask-mode: alpha; 25 | -webkit-mask-repeat: no-repeat; 26 | -webkit-mask-position: center; 27 | animation-name: mask-animation; 28 | animation-duration: 4s; 29 | animation-iteration-count: infinite; 30 | } 31 | img { 32 | width: 100%; 33 | height: auto; 34 | display: block; 35 | mask-image: url("https://res.cloudinary.com/daqkfiwnc/image/upload/v1647577382/assets/mask_cloud_horizontal_n35us0.png"); 36 | mask-size: 100% 100%; 37 | mask-mode: alpha; 38 | mask-repeat: no-repeat; 39 | mask-position: center; 40 | -webkit-mask-image: url("https://res.cloudinary.com/daqkfiwnc/image/upload/v1647577382/assets/mask_cloud_horizontal_n35us0.png"); 41 | -webkit-mask-size: 100% 100%; 42 | -webkit-mask-mode: alpha; 43 | animation-name: mask-animation-in; 44 | animation-duration: 4s; 45 | animation-iteration-count: infinite; 46 | animation-timing-function: linear; 47 | } 48 | @keyframes mask-animation { 49 | 0% { 50 | opacity: 0; 51 | mask-size: 50% 50%; 52 | -webkit-mask-size: 50% 50%; 53 | } 54 | 20% { 55 | opacity: 1; 56 | mask-size: 100% 100%; 57 | -webkit-mask-size: 100% 100%; 58 | } 59 | 60% { 60 | opacity: 1; 61 | mask-size: 100% 100%; 62 | -webkit-mask-size: 100% 100%; 63 | } 64 | 80% { 65 | opacity: 0; 66 | mask-size: 50% 50%; 67 | -webkit-mask-size: 50% 50%; 68 | } 69 | 100% { 70 | opacity: 0; 71 | mask-size: 50% 50%; 72 | -webkit-mask-size: 50% 50%; 73 | } 74 | } 75 | @keyframes mask-animation-in { 76 | 0% { 77 | -webkit-mask-position: 0px center; 78 | } 79 | 100% { 80 | -webkit-mask-position: 640px center; 81 | } 82 | } -------------------------------------------------------------------------------- /other/css3鼠标悬停剪辑路径图像效果/README.md: -------------------------------------------------------------------------------- 1 | # 创意css鼠标悬停剪辑路径图像效果 2 | 3 | #### 介绍 4 | 一款创意css鼠标悬停剪辑路径图像效果，图像被切割成3个部分，任意悬停即可显示图片信息。 5 | 6 | #### 在线预览 7 | 8 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3鼠标悬停剪辑路径图像效果/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3鼠标悬停剪辑路径图像效果/index.html) 9 | 10 | #### 软件架构 11 | 软件架构说明 12 | 13 | 14 | #### 安装教程 15 | 16 | 1. xxxx 17 | 2. xxxx 18 | 3. xxxx 19 | 20 | #### 使用说明 21 | 22 | 1. xxxx 23 | 2. xxxx 24 | 3. xxxx 25 | 26 | #### 参与贡献 27 | 28 | 1. Fork 本仓库 29 | 2. 新建 Feat_xxx 分支 30 | 3. 提交代码 31 | 4. 新建 Pull Request 32 | 33 | 34 | #### 特技 35 | 36 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 37 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 38 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 39 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 40 | 5. GitHub中文社区 https://www.githubs.cn/ 41 | -------------------------------------------------------------------------------- /other/css3鼠标悬停剪辑路径图像效果/css/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --chardonnay: #FED088; 3 | --cod-gray: #111; 4 | --transform-function: cubic-bezier(0.05, 0.61, 0.41, 0.95); 5 | --white: #FFF; 6 | } 7 | 8 | * { 9 | box-sizing: border-box; 10 | font-family: 'Noto Sans', sans-serif; 11 | margin: 0; 12 | padding: 0; 13 | } 14 | 15 | body { 16 | align-items: center; 17 | background-color: var(--chardonnay); 18 | display: flex; 19 | justify-content: center; 20 | min-height: 100vh; 21 | } 22 | 23 | .container { 24 | background-color: var(--chardonnay); 25 | height: 31.25rem; 26 | max-width: 100%; 27 | position: relative; 28 | width: 50rem; 29 | } 30 | 31 | .clip { 32 | background: var(--white) 33 | url('https://images.unsplash.com/photo-1599694927440-e321028bc146?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80') 34 | 100% / cover no-repeat; 35 | border: 0.1rem solid var(--cod-gray); 36 | bottom: 0rem; 37 | left: -0.2rem; 38 | position: absolute; 39 | right: 0rem; 40 | top: 0rem; 41 | transition: clip-path 330ms var(--transform-function); 42 | } 43 | 44 | .clip-1 { 45 | clip-path: polygon(0 0, 47% 0, 21% 100%, 0% 100%); 46 | } 47 | 48 | .clip-2 { 49 | background-image: url('https://images.unsplash.com/photo-1599696586779-c91cb65e1c3d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80'); 50 | clip-path: polygon(43% 0, 100% 0, 38% 100%, 13% 100%); 51 | } 52 | 53 | .clip-3 { 54 | background-image: url('https://images.unsplash.com/photo-1489460637401-e9e4a598abca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80'); 55 | clip-path: polygon(100% 0, 100% 0, 100% 100%, 38% 100%); 56 | } 57 | 58 | .content { 59 | background-color: var(--white); 60 | bottom: 0; 61 | display: flex; 62 | flex-direction: column; 63 | left: 0; 64 | opacity: 0; 65 | padding: 1rem; 66 | pointer-events: none; 67 | position: absolute; 68 | transform: translateY(100%); 69 | transition: transform 330ms var(--transform-function) 100ms, 70 | opacity 330ms var(--transform-function) 150ms; 71 | width: 75%; 72 | } 73 | 74 | .title { 75 | color: var(--cod-gray); 76 | font-size: 1.2rem; 77 | font-weight: 700; 78 | line-height: 1.1; 79 | margin-bottom: 0.7rem; 80 | } 81 | 82 | .paragraph { 83 | color: var(--cod-gray); 84 | font-size: 1rem; 85 | font-weight: 400; 86 | line-height: 1.1; 87 | } 88 | 89 | /* Effect */ 90 | .container:hover .clip { 91 | clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); 92 | } 93 | 94 | .container .clip:hover { 95 | clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); 96 | } 97 | 98 | .clip:hover .content { 99 | opacity: 1; 100 | transform: translateY(0); 101 | } -------------------------------------------------------------------------------- /other/css3鼠标悬停剪辑路径图像效果/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Clip-path hover 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |

Ehrenbreitstein, Koblenz, Deutschland

15 |

Photo taken by Jonathan Kemper (@jupp).

16 |
17 |
18 |
19 |
20 |

Cayucos State Beach, Cayucos, CA, USA

21 |

Photo taken by Tim Mossholder (@timmossholder).

22 |
23 |
24 |
25 |
26 |

Yasaka Shrine, Kyōto-shi, Japan

27 |

Photo taken by JJ Ying (@jjying).

28 |
29 |
30 |
31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /other/css3鼠标悬停发光菜单/README.md: -------------------------------------------------------------------------------- 1 | # HTML5+CSS3创意设计鼠标悬停发光菜单 2 | 3 | #### 介绍 4 | 一款创意设计css鼠标悬停发光菜单，只需将鼠标悬停在任意菜单，即产生从左至右文字发光特效（不同菜单不同颜色），在暗色背景下，显得尤其亮眼好看。 5 | 6 | #### 在线预览 7 | 8 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3鼠标悬停发光菜单/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3鼠标悬停发光菜单/index.html) 9 | 10 | #### 软件架构 11 | 软件架构说明 12 | 13 | 14 | #### 安装教程 15 | 16 | 1. xxxx 17 | 2. xxxx 18 | 3. xxxx 19 | 20 | #### 使用说明 21 | 22 | 1. xxxx 23 | 2. xxxx 24 | 3. xxxx 25 | 26 | #### 参与贡献 27 | 28 | 1. Fork 本仓库 29 | 2. 新建 Feat_xxx 分支 30 | 3. 提交代码 31 | 4. 新建 Pull Request 32 | 33 | 34 | #### 特技 35 | 36 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 37 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 38 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 39 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 40 | 5. GitHub中文社区 https://www.githubs.cn/ 41 | -------------------------------------------------------------------------------- /other/css3鼠标悬停发光菜单/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | css鼠标悬停发光菜单 6 | 7 | 8 | 9 | 10 | 11 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /other/css3鼠标悬停发光菜单/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap'); 2 | * { 3 | box-sizing: border-box; 4 | padding: 0; 5 | margin: 0; 6 | font-family: 'Mochiy Pop One', sans-serif; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | min-height: 100vh; 14 | background: #252839; 15 | } 16 | ul { 17 | position: relative; 18 | display: flex; 19 | flex-direction: column; 20 | gap: 30px; 21 | } 22 | ul li { 23 | position: relative; 24 | list-style: none; 25 | } 26 | ul li a { 27 | font-size: 4em; 28 | text-decoration: none; 29 | letter-spacing: 2px; 30 | line-height: 1em; 31 | text-transform: uppercase; 32 | color: transparent; 33 | -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5); 34 | } 35 | ul li a::before { 36 | content: attr(data-text); 37 | position: absolute; 38 | color: var(--clr); 39 | width: 0; 40 | overflow: hidden; 41 | transition: 1s; 42 | border-right: 8px solid var(--clr); 43 | -webkit-text-stroke: 1px var(--clr); 44 | } 45 | ul li a:hover::before { 46 | width: 100%; 47 | filter: drop-shadow(0 0 25px var(--clr)) 48 | } -------------------------------------------------------------------------------- /other/css3鼠标悬停名片图文切换/README.md: -------------------------------------------------------------------------------- 1 | # CSS3实现鼠标悬停名片动态图文切换特效 2 | 3 | #### 介绍 4 | 5 | **CSS3鼠标悬停名片动态图文切换**是一款使用css3制作的高级感的网页名片展示效果源码，当鼠标悬停时，可实现显示图文名片切换效果，更直接的展示二维码和图文信息，可用于企业图文介绍名片展示。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3鼠标悬停名片动态图文切换/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3鼠标悬停名片动态图文切换/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/css3鼠标悬停名片图文切换/css/style.css: -------------------------------------------------------------------------------- 1 | html, body{ 2 | width:100%; 3 | min-height: 100vh; 4 | } 5 | *{ 6 | margin:0; 7 | padding:0; 8 | font-size: 12px; 9 | } 10 | ul{ 11 | list-style:none; 12 | } 13 | .hide{ 14 | display: none; 15 | } 16 | .lf{ 17 | float: left; 18 | } 19 | .lr{ 20 | float: right; 21 | } 22 | .red, .red a,.red a h5, .red a p{ 23 | color:#FF0000 !important; 24 | } 25 | a { 26 | text-decoration: none; 27 | color: inherit; 28 | } 29 | .mr2 { 30 | margin-right: 1rem; 31 | } 32 | .ml2 { 33 | margin-left: 1rem; 34 | } 35 | 36 | body{ 37 | background: rgb(204, 212, 230); 38 | display: flex; 39 | justify-content: center; 40 | align-items: center; 41 | } 42 | 43 | .main-group{ 44 | position: relative; 45 | max-width: 50em; 46 | width:80%; 47 | min-height: 27em; 48 | border: 0.8em solid #fff; 49 | background-color: rgb(120, 140, 200); 50 | overflow: hidden; 51 | border-radius: 1.5em; 52 | display: flex; 53 | align-items: center; 54 | } 55 | .main-group .one-page-group{ 56 | position: absolute; 57 | width:30%; 58 | left: 0; 59 | margin:0 5em; 60 | /* padding:10em 0; */ 61 | transition: 1s; 62 | z-index: 1; 63 | 64 | } 65 | .main-group .one-page-group a{ 66 | color: #fff; 67 | font-weight: 900; 68 | font-size: 2em; 69 | } 70 | .main-group .one-page-group h3{ 71 | font-size:1.4em; 72 | transition:.5s 1s; 73 | opacity: 0; 74 | color: rgb(30, 210, 200); 75 | margin-top:0em; 76 | } 77 | .main-group .one-page-group span{ 78 | transition: .5s 1s; 79 | color: #fff; 80 | top:2em; 81 | display: block; 82 | /* margin-top:1em; */ 83 | } 84 | .two-page-group{ 85 | position: absolute; 86 | right: -14em; 87 | top: -5.5em; 88 | } 89 | .two-page-group .item, .two-page-group .item-other{ 90 | position: absolute; 91 | right: calc(var(--i)*7em); 92 | width: calc(var(--w)*2.2em); 93 | height: 27em; 94 | overflow: hidden; 95 | border-radius: 100px; 96 | transform: rotateZ(220deg) translate(0,0); 97 | background:rgb(240, 220, 150); 98 | transition: .5s .5s; 99 | } 100 | .two-page-group .item:nth-child(2){ 101 | background: rgb(240, 190, 230); 102 | } 103 | .two-page-group .item-other{ 104 | left:-32em; 105 | top:-10em; 106 | width: 5em; 107 | background-color: rgb(90, 220, 150); 108 | } 109 | 110 | .main-group:hover .two-page-group div{ 111 | transition: .5s calc(var(--i)*.1s); 112 | transform: rotateZ(220deg) translate(-32em, 40em); 113 | } 114 | 115 | .main-group:hover .one-page-group{ 116 | transition: 1s .5s; 117 | left:calc(100% - 30% - 10em); 118 | } 119 | .main-group:hover .one-page-group h3{ 120 | transition: 1s .5s; 121 | opacity: 1; 122 | margin-top:1em; 123 | } 124 | .main-group:hover .one-page-group span{ 125 | transition: 1s .5s; 126 | margin-top:1em; 127 | } 128 | 129 | .img-group{ 130 | width:14em; 131 | height: 14em; 132 | background: url(../imgs/qr.png); 133 | background-size: cover; 134 | margin:0 5em; 135 | opacity: 0; 136 | transition: .5s; 137 | } 138 | .main-group:hover .img-group{ 139 | transition: 1s 1.3s; 140 | opacity: 1; 141 | } 142 | 143 | 144 | @media screen and (max-width:850px){ 145 | .main-group .one-page-group{ 146 | display: flex; 147 | flex-direction: column; 148 | text-align: center; 149 | justify-content: center; 150 | width:100%; 151 | height: 100%; 152 | margin:0; 153 | padding:0 2em; 154 | box-sizing: border-box; 155 | background: rgba(0, 0, 0, .6); 156 | } 157 | .img-group{ 158 | width:100%; 159 | height: 20em; 160 | z-index: 2; 161 | } 162 | .main-group:hover .one-page-group{ 163 | transition: 1s .5s; 164 | left:0; 165 | } 166 | } 167 | 168 | -------------------------------------------------------------------------------- /other/css3鼠标悬停名片图文切换/imgs/qr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3鼠标悬停名片图文切换/imgs/qr.png -------------------------------------------------------------------------------- /other/css3鼠标悬停名片图文切换/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | CSS3鼠标悬停名片动态图文切换特效 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 儒雅的烤地瓜 15 |

16 | Alipay：儒雅的烤地瓜 17 |

18 | 19 | 百年孤独告诉我们，生命中所有灿烂终将需要寂寞来偿还，人生终将是一场单人的旅行，孤独前是迷茫，孤独后是成长。 20 | 21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /other/css3鼠标悬停图像高亮放大/README.md: -------------------------------------------------------------------------------- 1 | # 一款鼠标悬停图像高亮放大特效 2 | 3 | #### 介绍 4 | 5 | 图片高亮显示在页面中很常见，这是一款鼠标悬停图像高亮放大特效，动画特效效果很赞，希望大家喜欢。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3鼠标悬停图像高亮放大/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3鼠标悬停图像高亮放大/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/css3鼠标悬停图像高亮放大/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Image reveal with filter && clip-path 😎 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /other/css3鼠标悬停图像高亮放大/src/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | body { 5 | min-height: 100vh; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | } 10 | .image-container { 11 | display: grid; 12 | grid-template-columns: repeat(3, 1fr); 13 | grid-template-rows: repeat(3, 1fr); 14 | width: 600px; 15 | grid-gap: 0.5rem; 16 | } 17 | .image-container .image { 18 | position: relative; 19 | padding-bottom: 100%; 20 | } 21 | .image-container .image img { 22 | height: 100%; 23 | width: 100%; 24 | -o-object-fit: cover; 25 | object-fit: cover; 26 | left: 0; 27 | position: absolute; 28 | top: 0; 29 | } 30 | .image-container .image img:nth-of-type(1) { 31 | filter: grayscale(1) brightness(40%); 32 | } 33 | .image-container .image img:nth-of-type(2) { 34 | -webkit-clip-path: var(--clip-start); 35 | clip-path: var(--clip-start); 36 | transition: -webkit-clip-path 0.5s; 37 | transition: clip-path 0.5s; 38 | transition: clip-path 0.5s, -webkit-clip-path 0.5s; 39 | } 40 | .image-container .image:hover img:nth-of-type(2) { 41 | -webkit-clip-path: var(--clip-end); 42 | clip-path: var(--clip-end); 43 | } -------------------------------------------------------------------------------- /other/css3鼠标悬停图片展示效果/README.md: -------------------------------------------------------------------------------- 1 | # HTML5+CSS3鼠标悬停图片展示效果 2 | 3 | #### 介绍 4 | 一组css3鼠标悬停图片展示效果合集，图片多种移入方式共42款，每款都是经典实用，非常适合用在你的网页制作中，喜欢的小伙伴不要犹豫。 5 | 6 | #### 在线预览 7 | 8 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3鼠标悬停图片展示效果/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3鼠标悬停图片展示效果/index.html) 9 | 10 | #### 软件架构 11 | 软件架构说明 12 | 13 | 14 | #### 安装教程 15 | 16 | 1. xxxx 17 | 2. xxxx 18 | 3. xxxx 19 | 20 | #### 使用说明 21 | 22 | 1. xxxx 23 | 2. xxxx 24 | 3. xxxx 25 | 26 | #### 参与贡献 27 | 28 | 1. Fork 本仓库 29 | 2. 新建 Feat_xxx 分支 30 | 3. 提交代码 31 | 4. 新建 Pull Request 32 | 33 | 34 | #### 特技 35 | 36 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 37 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 38 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 39 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 40 | 5. GitHub中文社区 https://www.githubs.cn/ 41 | -------------------------------------------------------------------------------- /other/css3鼠标悬停图片展示效果/static/picture/tx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunyctf/css-effects/6c99b4bb5e736b3930401ce40416bd13af841428/other/css3鼠标悬停图片展示效果/static/picture/tx.png -------------------------------------------------------------------------------- /other/css3鼠标悬停图片扩展显示特效/README.md: -------------------------------------------------------------------------------- 1 | # css3鼠标悬停图片扩展显示特效 2 | 3 | #### 介绍 4 | 5 | css3鼠标悬停图片扩展显示特效，鼠标悬停可以实现图片扩展显示的动画特效。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3鼠标悬停图片扩展显示特效/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3鼠标悬停图片扩展显示特效/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/css3鼠标悬停图片扩展显示特效/css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700"); 2 | * { 3 | box-sizing: border-box; 4 | } 5 | 6 | body { 7 | font-family: Raleway, sans-serif; 8 | } 9 | 10 | .windows-wrapper { 11 | background-color: #F0F0F0; 12 | min-height: 100vh; 13 | display: flex; 14 | } 15 | .windows-wrapper .window { 16 | flex: 1; 17 | background-color: transparent; 18 | background-position: center; 19 | background-size: cover; 20 | background-attachment: fixed; 21 | background-blend-mode: multiply; 22 | padding: 0px 15px; 23 | display: flex; 24 | align-items: center; 25 | justify-content: center; 26 | overflow: hidden; 27 | position: relative; 28 | transition: all 0.5s ease-in-out; 29 | } 30 | .windows-wrapper .window:hover { 31 | flex: 5; 32 | background-color: #999; 33 | } 34 | .windows-wrapper .window:hover .count { 35 | transform: none; 36 | top: 15px; 37 | font-size: 4rem; 38 | } 39 | .windows-wrapper .window:hover .content { 40 | opacity: 1; 41 | } 42 | .windows-wrapper .window .count { 43 | font-size: 8.2rem; 44 | position: absolute; 45 | top: 50%; 46 | left: 50%; 47 | transform: translate(-50%, -50%); 48 | transition-timing-function: ease-in-out; 49 | transition: transform 0.3s, top 0.5s, left 0.5s, font-size 0.3s; 50 | color: #FFF; 51 | text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); 52 | z-index: 10; 53 | } 54 | .windows-wrapper .window .content { 55 | opacity: 0; 56 | min-width: 50vw; 57 | max-width: 50vw; 58 | text-align: center; 59 | font-size: 1.6rem; 60 | color: #FFF; 61 | line-height: 2rem; 62 | text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); 63 | transition: opacity 0.5s ease-in-out; 64 | } 65 | @media (max-width: 600px) { 66 | .windows-wrapper { 67 | flex-direction: column; 68 | } 69 | .windows-wrapper .window .count { 70 | font-size: 7rem; 71 | } 72 | .windows-wrapper .window .content { 73 | min-width: 90vw; 74 | max-width: 90vw; 75 | } 76 | .windows-wrapper .window:hover .count { 77 | left: 15px; 78 | } 79 | } -------------------------------------------------------------------------------- /other/css3鼠标悬停图片扩展显示特效/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Expansibles - Pure CSS 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
1
15 |
16 | Descargate esta app que es una shit. 17 |
18 |
19 | 20 |
21 |
2
22 |
23 | Registrate para que podamos rastrear toda tu actividad en la internet. 24 |
25 |
26 | 27 |
28 |
3
29 |
30 | Listo, ahora tu alma nos pertenece. Te la vendemos a $5 usd pagando con mercadopago. 31 |
32 |
33 |
34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /other/css3鼠标悬停图片特效/README.md: -------------------------------------------------------------------------------- 1 | # css3鼠标悬停图片特效 2 | 3 | #### 介绍 4 | 5 | 悬停展示被运用在很多场景网页中，今日为大家推荐一款css3鼠标悬停图片特效，图片悬停效果源码，简单大方的效果，供大家参考。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3鼠标悬停图片特效/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3鼠标悬停图片特效/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/css3鼠标悬停图片特效/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Image Hover Effects 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Image Hover Effects

13 |
14 |
15 |
16 | EMMYLOU 17 |

EMMYLOU

18 |

I'll be your Emmylou and I'll be your June

19 |
20 |
21 |
22 |
23 | Jenny of Oldstones 24 |
25 |

Jenny of Oldstones

26 |
27 |
28 |
29 |
30 |
31 | BOX 32 |

The Pursuit of

HAPPINESS

33 |
34 |
35 |
36 |
37 | Postcards From Italy 38 |

Postcards From Italy

39 |

And I will love to see that day

40 |
41 |
42 |
43 |
44 | Blue Ridge Mountains 45 |
46 |

Blue Ridge

47 |

MOUNTAINS

48 |
49 |
50 |
51 |
52 |
53 | Melody Noir 54 |
55 |

MELODY NOIR

56 |

Tell me where the wind is blowing 'cause that's where the music's going

57 |
58 |
59 |
60 |
61 |
62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /other/css故障风格文字动画/README.md: -------------------------------------------------------------------------------- 1 | # CSS3故障风格文字动画效果 2 | 3 | #### 介绍 4 | 5 | 一款css3故障风格文字动画效果，网页不停晃动 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/css3故障风格文字动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css33D文字阴影/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/css故障风格文字动画/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Image glitch effect 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |

Glitch

19 |
20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /other/卡片互动悬停下载动画/README.md: -------------------------------------------------------------------------------- 1 | # 卡片互动悬停下载动画 2 | 3 | #### 介绍 4 | 5 | css3下载箭头代码，卡片互动悬停下载动画，内含4种不同款式的下载动画，十分炫酷，希望能得到大家的喜欢！ 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/卡片互动悬停下载动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/卡片互动悬停下载动画/index.html) 10 | 11 | #### 软件架构 12 | 13 | #### 软件架构 14 | 15 | 软件架构说明 16 | 17 | 18 | #### 安装教程 19 | 20 | 1. xxxx 21 | 2. xxxx 22 | 3. xxxx 23 | 24 | #### 使用说明 25 | 26 | 1. xxxx 27 | 2. xxxx 28 | 3. xxxx 29 | 30 | #### 参与贡献 31 | 32 | 1. Fork 本仓库 33 | 2. 新建 Feat_xxx 分支 34 | 3. 提交代码 35 | 4. 新建 Pull Request 36 | 37 | 38 | #### 特技 39 | 40 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 41 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 42 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 43 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 44 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/卡片互动悬停下载动画/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | download animation 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 |
16 |
17 |
18 | 19 |
20 |
21 |
22 | 23 |
24 |
25 |
26 | 27 |
28 | 29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /other/悬停放大的图片蒙版效果/README.md: -------------------------------------------------------------------------------- 1 | # 悬停放大的网页图片蒙版效果 2 | 3 | #### 介绍 4 | 5 | 悬停放大的网页图片蒙版效果，增添图片的艺术感，可以自由使用到网站中。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/悬停放大的图片蒙版效果/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/悬停放大的图片蒙版效果/index.html) 10 | 11 | #### 软件架构 12 | 13 | #### 软件架构 14 | 15 | 软件架构说明 16 | 17 | 18 | #### 安装教程 19 | 20 | 1. xxxx 21 | 2. xxxx 22 | 3. xxxx 23 | 24 | #### 使用说明 25 | 26 | 1. xxxx 27 | 2. xxxx 28 | 3. xxxx 29 | 30 | #### 参与贡献 31 | 32 | 1. Fork 本仓库 33 | 2. 新建 Feat_xxx 分支 34 | 3. 提交代码 35 | 4. 新建 Pull Request 36 | 37 | 38 | #### 特技 39 | 40 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 41 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 42 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 43 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 44 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/悬停放大的图片蒙版效果/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | font-family: 'Righteous', cursive; 5 | } 6 | 7 | .main { 8 | height: 100vh; 9 | width: 100%; 10 | overflow: hidden; 11 | position: absolute; 12 | top: 50%; 13 | left: 50%; 14 | transform: translate(-50%, -50%); 15 | } 16 | 17 | .text { 18 | height: 100vh; 19 | width: 100%; 20 | background-image: url("https://images4.alphacoders.com/284/284838.jpg"); 21 | background-size: 100% 100%; 22 | background-position: center; 23 | font-size: 150px; 24 | text-transform: uppercase; 25 | text-align: center; 26 | line-height: 200px; 27 | position: absolute; 28 | top: 50%; 29 | left: 50%; 30 | transform: translate(-50%, -50%); 31 | padding-top: 250px; 32 | -webkit-background-clip: text; 33 | color: transparent; 34 | transition: all 2.5s ease-in-out; 35 | } 36 | 37 | .main:hover .text { 38 | background-size: 80% 80%; 39 | } 40 | 41 | .bg { 42 | height: 100vh; 43 | width: 100%; 44 | background-image: url("https://images4.alphacoders.com/284/284838.jpg"); 45 | background-size: 100% 100%; 46 | background-position: center; 47 | transform: rotateY(180deg); 48 | transition: all 2.5s ease-in-out; 49 | } 50 | 51 | .main:hover .bg { 52 | background-size: 150% 150%; 53 | } -------------------------------------------------------------------------------- /other/悬停放大的图片蒙版效果/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mask Effect 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | Awesome 17 |
18 |
19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /other/精美图像画廊悬停特效/README.md: -------------------------------------------------------------------------------- 1 | # 精美的图像画廊展示悬停特效 2 | 3 | #### 介绍 4 | 5 | 一款画廊展示页面设计，精美的图像画廊悬停特效，可以自定义编辑，运用到不同类型的网站中。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/精美图像画廊悬停特效/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/精美图像画廊悬停特效/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/精美图像画廊悬停特效/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background: #232a34; 5 | } 6 | 7 | .container { 8 | display: flex; 9 | flex-flow: wrap; 10 | flex-direction: column; 11 | align-items: center; 12 | margin: 0 auto; 13 | height: 100vh; 14 | width: 100vh; 15 | align-content: center; 16 | align-items: stretch; 17 | justify-content: center; 18 | } 19 | 20 | .container img { 21 | width: calc(100vw/6); 22 | height: auto; 23 | transition: all 1s linear; 24 | } 25 | 26 | .container div:nth-child(2n) img{ 27 | border-top-left-radius: 27%; 28 | border-top-right-radius: 32%; 29 | border-bottom-left-radius: 34%; 30 | border-bottom-right-radius: 26%; 31 | } 32 | 33 | .container div:nth-child(3n) img{ 34 | border-top-left-radius: 21%; 35 | border-top-right-radius: 43%; 36 | border-bottom-left-radius: 21%; 37 | border-bottom-right-radius: 29%; 38 | } 39 | .container div:nth-child(5n) img{ 40 | border-top-left-radius: 41%; 41 | border-top-right-radius: 30%; 42 | border-bottom-left-radius: 37%; 43 | border-bottom-right-radius: 23%; 44 | } 45 | .container div:nth-child(7n) img{ 46 | border-top-left-radius: 38%; 47 | border-top-right-radius: 20%; 48 | border-bottom-left-radius: 21%; 49 | border-bottom-right-radius: 38%; 50 | } 51 | .container div:nth-child(11n) img{ 52 | border-top-left-radius: 41%; 53 | border-top-right-radius: 47%; 54 | border-bottom-left-radius: 48%; 55 | border-bottom-right-radius: 47%; 56 | } 57 | 58 | .container div:nth-child(13n) img{ 59 | border-top-left-radius: 31%; 60 | border-top-right-radius: 67%; 61 | border-bottom-left-radius: 48%; 62 | border-bottom-right-radius: 57%; 63 | } 64 | 65 | .container div:first-child img { 66 | border-top-left-radius: 51%; 67 | border-top-right-radius: 57%; 68 | border-bottom-left-radius: 58%; 69 | border-bottom-right-radius: 57%; 70 | } 71 | 72 | .container div img:hover { 73 | border-top-left-radius: 0; 74 | border-top-right-radius: 0; 75 | border-bottom-left-radius: 0; 76 | border-bottom-right-radius: 0; 77 | } -------------------------------------------------------------------------------- /other/精美图像画廊悬停特效/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Gallery 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 15 |
16 |
17 | 19 |
20 |
21 | 23 |
24 |
25 | 27 |
28 |
29 | 31 |
32 |
33 | 35 |
36 |
37 | 39 |
40 |
41 | 43 |
44 |
45 | 47 |
48 |
49 | 51 |
52 |
53 | 55 |
56 |
57 | 59 |
60 |
61 | 63 |
64 | 65 |
66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /other/鼠标悬停切换动画/README.md: -------------------------------------------------------------------------------- 1 | # 鼠标悬停切换动画效果 2 | 3 | #### 介绍 4 | 5 | 实用的鼠标悬停切换动画效果，卡片式的设计，您可以轻松悬停展示动画效果，绿色清新的悬停效果可让选项卡信息展示更清晰。 6 | 7 | #### 在线预览 8 | 9 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/鼠标悬停切换动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/鼠标悬停切换动画/index.html) 10 | 11 | #### 软件架构 12 | 13 | 软件架构说明 14 | 15 | 16 | #### 安装教程 17 | 18 | 1. xxxx 19 | 2. xxxx 20 | 3. xxxx 21 | 22 | #### 使用说明 23 | 24 | 1. xxxx 25 | 2. xxxx 26 | 3. xxxx 27 | 28 | #### 参与贡献 29 | 30 | 1. Fork 本仓库 31 | 2. 新建 Feat_xxx 分支 32 | 3. 提交代码 33 | 4. 新建 Pull Request 34 | 35 | 36 | #### 特技 37 | 38 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 39 | 2. GitHub 官方博客 [blog.github.com](https://github.blog) 40 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目 41 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn) 42 | 5. GitHub中文社区 https://www.githubs.cn/ -------------------------------------------------------------------------------- /other/鼠标悬停切换动画/js/script.js: -------------------------------------------------------------------------------- 1 | import animate from "https://cdn.jsdelivr.net/npm/animateplus@2/animateplus.js"; 2 | 3 | animate({ 4 | elements: ".service-block", 5 | duration: 2000, 6 | delay: index => index * 100, 7 | transform: ["scale(0)", "scale(1)"] 8 | }) --------------------------------------------------------------------------------