├── LICENSE ├── README.md ├── css ├── style.css └── swiper.min.css ├── demo ├── 10 │ ├── css │ │ └── style.css │ ├── img │ │ ├── spring.jpg │ │ └── wallpaper.jpg │ ├── index.html │ └── js │ │ ├── OrbitControls-2.js │ │ ├── TweenMax.min.js │ │ ├── bas.js │ │ ├── index.js │ │ └── three.min.js ├── 11 │ ├── css │ │ └── style.css │ ├── index.html │ └── video │ │ └── smoke.mp4 ├── 12 │ ├── css │ │ └── style.css │ ├── img │ │ └── wallpaper4k.jpg │ ├── index.html │ └── js │ │ └── jquery.ripples-min.js ├── 13 │ ├── css │ │ └── style.css │ ├── img │ │ ├── after.png │ │ ├── before.png │ │ └── letter_bg.png │ └── index.html ├── 14 │ ├── css │ │ └── style.css │ ├── index.html │ └── js │ │ └── script.js ├── 15 │ ├── css │ │ └── style.css │ └── index.html ├── 16 │ ├── css │ │ ├── owl.carousel.min.css │ │ ├── owl.theme.default.min.css │ │ └── style.css │ ├── img │ │ ├── team-1.jpg │ │ ├── team-2.jpg │ │ ├── team-3.jpg │ │ ├── team-4.jpg │ │ └── team-5.jpg │ ├── index.html │ └── js │ │ └── owl.carousel.min.js ├── 17 │ ├── css │ │ └── style.css │ └── index.html ├── 18 │ ├── css │ │ └── style.css │ ├── img │ │ └── facebook.png │ └── index.html ├── 19 │ ├── css │ │ └── style.css │ └── index.html ├── 20 │ ├── css │ │ └── style.css │ └── index.html ├── 21 │ ├── css │ │ ├── flipclock.css │ │ └── style.css │ ├── index.html │ └── js │ │ └── flipclock.js ├── 22 │ ├── css │ │ └── style.css │ └── index.html ├── 23 │ ├── css │ │ └── style.css │ └── index.html ├── 24 │ ├── css │ │ └── style.css │ └── index.html ├── 25 │ ├── css │ │ └── style.css │ └── index.html ├── 26 │ ├── css │ │ ├── odometer-theme-car.css │ │ └── style.css │ ├── img │ │ └── logo.png │ ├── index.html │ └── js │ │ └── odometer.min.js ├── 27 │ ├── css │ │ ├── font-awesome.min.css │ │ └── style.css │ ├── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ └── index.html ├── 28 │ ├── css │ │ └── style.css │ ├── img │ │ ├── image1.jpg │ │ └── image2.jpg │ └── index.html ├── 29 │ ├── css │ │ └── style.css │ └── index.html ├── 30 │ ├── css │ │ └── style.css │ └── index.html ├── 31 │ ├── css │ │ └── style.css │ └── index.html ├── 32 │ ├── css │ │ ├── default.css │ │ ├── normalize.css │ │ └── style.css │ ├── img │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 11.jpg │ │ ├── 12.jpg │ │ ├── 13.jpg │ │ ├── 14.jpg │ │ ├── 15.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ └── 9.jpg │ ├── index.html │ ├── index_demo.html │ ├── index_video.html │ └── js │ │ └── pinterest_grid.js ├── 33 │ ├── css │ │ ├── font-awesome.min.css │ │ └── style.css │ ├── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ ├── img │ │ └── 01.jpg │ ├── index.html │ └── js │ │ └── jquery.hover3d.min.js ├── 34 │ ├── booklet │ │ ├── images │ │ │ ├── arrow-next.png │ │ │ ├── arrow-prev.png │ │ │ ├── shadow-top-back.png │ │ │ ├── shadow-top-forward.png │ │ │ └── shadow.png │ │ ├── jquery.booklet.1.1.0.css │ │ ├── jquery.booklet.1.1.0.min.js │ │ └── jquery.easing.1.3.js │ ├── css │ │ └── style.css │ ├── images │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 11.jpg │ │ ├── 12.jpg │ │ ├── 13.jpg │ │ ├── 14.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ ├── 9.jpg │ │ ├── ajax-loader.gif │ │ ├── bg.png │ │ ├── buttons.png │ │ ├── circle.png │ │ ├── h1.png │ │ ├── left_bg.jpg │ │ ├── right_bg.jpg │ │ └── wood.jpg │ └── index.html ├── 35 │ ├── css │ │ └── style.css │ ├── index.html │ └── js │ │ └── script.js ├── 36 │ ├── css │ │ └── style.css │ ├── img │ │ ├── cart.png │ │ ├── m-mtss18tp50-07-29-metronaut-original-imaf74dfgwwbygzx.jpeg │ │ ├── one.jpg │ │ ├── three.jpg │ │ ├── two.jpg │ │ ├── xl-mtss18tp50-13-29-metronaut-original-imaf52zrsevzsth6.jpeg │ │ └── xl-mw216white-metronaut-original-imaf3k542sb52ue6.jpeg │ ├── index.html │ └── js │ │ └── scripts.js ├── 37 │ ├── css │ │ └── style.css │ ├── index.html │ └── js │ │ └── script.js ├── 38 │ ├── css │ │ ├── demo.css │ │ ├── font │ │ │ └── entypo-selected.woff │ │ ├── normalize.css │ │ └── style.css │ ├── images │ │ ├── bg.jpg │ │ ├── restaurant.jpg │ │ └── white_paperboard.jpg │ ├── index.html │ └── js │ │ ├── demoad.js │ │ ├── iphone-6-mobile-frame-11549517549tckx8fwqoc.png │ │ ├── menu.js │ │ └── modernizr.custom.79639.js ├── 39 │ ├── css │ │ ├── style.css │ │ └── swiper.min.css │ ├── images │ │ ├── 00.jpg │ │ ├── 01.jpg │ │ ├── 02.jpg │ │ ├── background-images.jpg │ │ └── top_slick_cover.png │ ├── index.html │ └── js │ │ └── swiper.min.js ├── 40 │ ├── img │ │ ├── img-1.jpg │ │ ├── img-2.jpg │ │ ├── img-3.jpg │ │ ├── img-4.jpg │ │ ├── img-5.jpg │ │ ├── img-6.jpg │ │ ├── img-7.jpg │ │ └── img-8.jpg │ └── index.html ├── 41 │ ├── css │ │ └── style.css │ ├── index.html │ └── js │ │ └── script.js ├── 42 │ ├── css │ │ └── style.css │ ├── index.html │ └── js │ │ └── somee.js ├── 43 │ ├── css │ │ └── style.css │ └── index.html ├── 44 │ ├── demo1 │ │ ├── css │ │ │ └── style.css │ │ ├── img │ │ │ └── photo1.jpg │ │ └── index.html │ ├── demo2 │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ └── index.html ├── 45 │ ├── css │ │ └── style.css │ ├── img │ │ └── 11.jpg │ └── index.html ├── 46 │ └── index.html ├── 00_demo │ ├── css │ │ └── style.css │ └── index.html ├── 01 │ ├── css │ │ └── style.css │ └── index.html ├── 02 │ ├── css │ │ └── style.css │ └── index.html ├── 03 │ ├── css │ │ └── style.css │ ├── img │ │ └── img1.jpg │ └── index.html ├── 04 │ ├── css │ │ └── style.css │ └── index.html ├── 05 │ ├── btn-on-off.html │ ├── css │ │ └── style.css │ └── index.html ├── 06 │ ├── css │ │ └── style.css │ └── index.html ├── 07 │ ├── css │ │ └── style.css │ ├── index.html │ └── js │ │ ├── angular.radialIndicator.js │ │ └── radialIndicator.min.js ├── 08 │ ├── css │ │ ├── font-awesome.min.css │ │ └── style.css │ ├── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ └── index.html └── 09 │ ├── css │ └── style.css │ └── index.html ├── img ├── 01-login.jpg ├── 02-button.jpg ├── 03-Page.jpg ├── 04-button.jpg ├── 05-All-Button.jpg ├── 06-Button.jpg ├── 07-Clock.jpg ├── 08-Share.jpg ├── 09-skills-meter.jpg ├── 10-3D-Shader.jpg ├── 11-Text-Smoke.jpg ├── 12-Water-Ripple.jpg ├── 13-SendMessage.jpg ├── 14-Download.jpg ├── 15-Paging.jpg ├── 16-Show.jpg ├── 17-Paging.jpg ├── 18-Facebook.jpg ├── 19-Card-Effect.jpg ├── 20-Loading.jpg ├── 21-Clock.jpg ├── 22-GlowingBtn.jpg ├── 23-MenuEffect.jpg ├── 24-ConfirmBox.jpg ├── 25-CardEffects.jpg ├── 26-Odometer.jpg ├── 27-RadialMenu.jpg ├── 28-ImageEffect.jpg ├── 29-Pagination.jpg ├── 30-Loading.jpg ├── 31-Card-Effect.jpg ├── 32-GridLayout.jpg ├── 33-CardEffect.jpg ├── 34-Book-Flip.jpg ├── 35-Calendar.jpg ├── 36-Add-Cart.jpg ├── 37-SelectBox.jpg ├── 38-RESTAURANT.jpg ├── 39-Carousel.jpg ├── 40-ShowCommodity.jpg ├── 41-NeonLove.jpg ├── 42-InteractiveButton.jpg ├── 43-ProgressBar.jpg ├── 44-HoverCard.jpg ├── 45-FullCard.jpg ├── 46-Calculator.jpg ├── AboutMe.jpg ├── end.gif ├── start.png └── 项目目录结构.png ├── index.html ├── js └── swiper.min.js └── src ├── 01-Button.rar ├── 02-Button.rar ├── 03-Page.rar ├── 04-Button.rar ├── 05-All-Button.rar ├── 06-Button.rar ├── 07-Clock.rar ├── 08-Share.rar ├── 09-Skills-Meter.rar ├── 10-3D-Shader.rar ├── 11-Text-Smoke.rar ├── 12-Water-Ripple.rar ├── 13-SendMessage.rar ├── 14-Download.rar ├── 15-Paging.rar ├── 16-Show.rar ├── 17-Paging.rar ├── 18-Facebook.rar ├── 19-Card-Effect.rar ├── 20-Loading.rar ├── 21-Clock.rar ├── 22-GlowingBtn.rar ├── 23-MenuEffect.rar ├── 24-ConfirmBox.rar ├── 25-CardEffects.rar ├── 26-Odometer.rar ├── 27-RadialMenu.rar ├── 28-ImageEffect.rar ├── 29-Pagination.rar ├── 30-Loading.rar ├── 31-Card-Effect.rar ├── 32-GridLayout.rar ├── 33-CardEffect.rar ├── 34-Book-Flip.rar ├── 35-Calendar.rar ├── 36-Add-Cart.rar ├── 37-SelectBox.rar ├── 38-RESTAURANT.rar ├── 39-Carousel.rar ├── 40-ShowCommodity.rar ├── 41-NeonLove.rar ├── 42-Interactive Button.rar ├── 43-ProgressBar.rar ├── 44-HoverCard.rar ├── 45-FullCard.rar └── 46-Calculator.rar /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019-2020 Mooney 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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #

学习专用网页设计[HTML+CSS]模板👋

2 | 3 |

4 | 5 | 6 | 7 | 8 | 996icu 9 | 10 | 11 | 996icu 12 | 13 | 14 | MIT-License 15 | 16 |

17 | 18 | ## 📌简介说明： 19 | * `Demo` 收集自**互联网平台**，包括但不限于 *Youtube*、*bilibili* 等。 20 | * 由于 `Demo` 过多，在线预览可能加载过慢，强烈建议你下载本项目到本地预览查看。 21 | * 不同浏览器的兼容性不同，本仓库所有 `Demo` 在Chrome浏览器测试正常运行。 22 | 23 | ## 📌在线预览 24 | > 建议你使用Chrome浏览器访问~ 25 | * [点击这里快速预览 **所有模板**](https://local-host-8080.github.io/demo-html-css/index.html) 26 | 27 | > 打开后效果如下图~ 28 | 29 |

在线预览界面 | 如果你的浏览器不能正常显示此图片是因为你没有梯子

30 | 31 | ## 📌源码下载 32 | * 需要源码的可以在 **`src`** 目录下自行下载对应的源码压缩包(.rar)。 33 | * 你也可以 **`Clone or download`** 整个项目到本地运行查看。 34 | * 小白直接点击这里下载整个项目源码--->[**GitHub仓库下载**](https://github.com/local-host-8080/demo-html-css/archive/master.zip) 35 | * 或者点这里下载单个模板素材和源码--->[**百度网盘下载**](https://pan.baidu.com/s/1XCmR5eGgKZJTYQN08779xw) （提取码：hakg） 36 | 37 | ## 📌目录结构 38 | > 项目大致的目录结构，相信大家都懂~ 39 | 40 |

项目目录结构 | 如果你的浏览器不能正常显示此图片是因为你没有梯子

41 | 42 | ## 📌想一起打卡学习？ 43 | > 点击下方的传送门一起学习吧~ 44 | * [x] [【网页设计】基础控件](https://space.bilibili.com/32683063/channel/detail?cid=81226) 45 | * [x] [【网页设计】炫酷特效](https://space.bilibili.com/32683063/channel/detail?cid=84356) 46 | 47 | ## 📌可能用到的类库 48 | * [x] [【JQuery】](https://jquery.com/) 49 | * [x] [【BootStrap】](https://getbootstrap.com/) 50 | * [x] [【FontAwesome】](https://fontawesome.com/icons?d=gallery) 51 | * [ ] 【…………】 52 | 53 | ## 📌联系我 54 | > 快来关注我吧~ 55 | * [**我的主页**](https://space.bilibili.com/32683063) 56 | 57 |

[末末爱折腾の二维码] | 如果你的浏览器不能正常显示此图片是因为你没有梯子

58 | 59 | * 仓库代码为UP纯手敲学习，所以难免有错误，如果你有发现内容错误、无法加载、加载失败等问题，欢迎在相应的视频评论区留言或者私信我。 60 | 61 | ## ❤️SHOW YOUR SUPPORT 62 | * **GIVE A ⭐️ IF THIS PROJECT HELPED YOU!** 63 | 64 |

The End | 如果你的浏览器不能正常显示此图片是因为你没有梯子

65 | 66 | ## 推广传播 67 | > 人们都希望被别人需要 | 却往往事与愿违。 68 | * 能够看到这里，我就已经很感激啦。不过如果你还想了解更多炫酷页面的话，那么你也可以看看我的其他仓库。 69 | 70 | * [x] [【震惊不足，但精彩有余の告白|表白页面】](https://github.com/local-host-8080/love-confession) 71 | 72 | *** 73 | 74 | * 最后送大家一碗鸡汤❤️ 75 | 76 | > 当你的才华还撑不起你的野心的时候，你就应该静下心来学习；
77 | > 当你的能力还驾驭不了你的目标时，就应该沉下心来，历练；
78 | > 梦想，不是浮躁，而是沉淀和积累，
79 | > 只有拼出来的美丽，没有等出来的辉煌，
80 | > 机会永远是留给最渴望的那个人，学会与内心深处的你对话，
81 | > 问问自己，想要怎样的人生，静心学习，耐心沉淀，送给自己，也送给爱学习的你们。共勉。 82 | -------------------------------------------------------------------------------- /demo/00_demo/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | 3 | } 4 | -------------------------------------------------------------------------------- /demo/00_demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 文件编号 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /demo/01/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background: #eee; 3 | } 4 | .wrapper{ 5 | margin: 80px; 6 | } 7 | .form-signin{ 8 | max-width: 380px; 9 | margin: 0 auto; 10 | background-color: #fff; 11 | padding: 15px 40px 50px; 12 | border: 1px solid #e5e5e5; 13 | border-radius: 10px; 14 | } 15 | .form-signin .form-signin-heading, .form-signin .checkbox{ 16 | margin-bottom: 30px; 17 | } 18 | .form-signin input[type="text"], .form-signin input[type="password"]{ 19 | margin-bottom: 10px; 20 | } 21 | .form-signin .form-control{ 22 | padding: 10px; 23 | } -------------------------------------------------------------------------------- /demo/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 01-Login Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 18 | 19 | 20 | 24 | 25 |
26 |
27 | 28 | -------------------------------------------------------------------------------- /demo/02/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | min-height: 100vh; 8 | background: #0c0c0c; 9 | } 10 | label{ 11 | position: relative; 12 | width: 80px; 13 | height: 80px; 14 | cursor: pointer; 15 | border-radius: 50%; 16 | } 17 | label .btn{ 18 | position: absolute; 19 | top: 0; 20 | left: 0; 21 | display:block; 22 | width: 100%; 23 | height: 100%; 24 | background: #1b1b1b; 25 | border-radius: 50%; 26 | box-shadow: 0 3px 4px rgba(0,0,0,1), 27 | inset 0 -2px 5px rgba(0,0,0,1), 28 | inset 0 2px 2px rgba(255,255,255,0.5), 29 | 0 0 0 2px #000, 30 | 0 0 0 5px #0c0c0c, 31 | 0 0 0 5.5px #080808; 32 | } 33 | label input[type="checkbox"]:checked ~ .btn{ 34 | box-shadow: 0 0 0 rgba(0,0,0,1), 35 | inset 0 -2px 5px rgba(0,0,0,1), 36 | inset 0 1px 1px rgba(255,255,255,0.1), 37 | 0 0 0 2px #000, 38 | 0 0 0 5px #0c0c0c, 39 | 0 0 0 5.5px #00a1ff; 40 | } 41 | label input[type="checkbox"]{ 42 | -webkit-appearance: none; 43 | } 44 | label .fa{ 45 | position: absolute; 46 | top: 50%; 47 | left: 50%; 48 | transform: translate(-50%,-50%); 49 | font-size: 2.5em; 50 | color: #0c0c0c; 51 | } 52 | label input[type="checkbox"]:checked ~ .fa{ 53 | color: #00ffe7; 54 | text-shadow: 0 0 15px #00a1ff, 55 | 0 0 30px #00a1ff; 56 | } -------------------------------------------------------------------------------- /demo/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 02-Button Demo 6 | 7 | 8 | 9 | 10 | 11 | 16 | 17 | -------------------------------------------------------------------------------- /demo/03/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | width: 100%; 5 | height: 100vh; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | } 10 | .container{ 11 | position: relative; 12 | width: 360px; 13 | height: 640px; 14 | margin-top: 150px; 15 | background: rgba(0,0,0,1); 16 | transform: rotate(-30deg) skew(25deg) scale(.8); 17 | transition: 0.5s; 18 | } 19 | .container img{ 20 | position: absolute; 21 | width: 100%; 22 | transition: 0.5s; 23 | } 24 | .container:hover img:nth-child(4){ 25 | transform: translate(160px, -160px); 26 | opacity: 1; 27 | } 28 | .container:hover img:nth-child(3){ 29 | transform: translate(120px, -120px); 30 | opacity: .8; 31 | } 32 | .container:hover img:nth-child(2){ 33 | transform: translate(80px, -80px); 34 | opacity: .6; 35 | } 36 | .container:hover img:nth-child(1){ 37 | transform: translate(40px, -40px); 38 | opacity: .4; 39 | } 40 | -------------------------------------------------------------------------------- /demo/03/img/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/03/img/img1.jpg -------------------------------------------------------------------------------- /demo/03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 03-Page 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /demo/04/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | ul{ 7 | position: absolute; 8 | top: 50%; 9 | left: 50%; 10 | transform: translate(-50%,-50%); 11 | margin: 0; 12 | padding: 0; 13 | display: flex; 14 | } 15 | 16 | ul li{ 17 | list-style: none; 18 | width: 80px; 19 | height: 80px; 20 | background: #262626; 21 | margin: 0 10px; 22 | border-radius: 50%; 23 | transition: .5s; 24 | } 25 | 26 | ul li:hover{ 27 | background: #0070ff; 28 | } 29 | 30 | ul li span{ 31 | position: absolute; 32 | width: 20px; 33 | height: 20px; 34 | border: 4px solid #fff; 35 | transition: .5s; 36 | } 37 | 38 | ul li.next span{ 39 | top: 50%; 40 | right: 20%; 41 | transform: translateY(-50%) rotate(-45deg); 42 | border-left: none; 43 | border-top: none; 44 | } 45 | 46 | ul li.next:hover span{ 47 | right: 16%; 48 | } 49 | 50 | ul li.next span::before{ 51 | content: ""; 52 | position: absolute; 53 | width: 38px; 54 | height: 4px; 55 | background: #fff; 56 | transform-origin: right; 57 | transform: rotate(45deg) translate(0,25px) scaleX(0); 58 | transition: .5s; 59 | } 60 | 61 | ul li.next:hover span::before{ 62 | transform: rotate(45deg) translate(0,25px) scaleX(1); 63 | } 64 | 65 | ul li.prev span{ 66 | top: 50%; 67 | left: 20%; 68 | transform: translateY(-50%) rotate(135deg); 69 | border-left: none; 70 | border-top: none; 71 | } 72 | 73 | ul li.prev:hover span{ 74 | left: 16%; 75 | } 76 | 77 | ul li.prev span::before{ 78 | content: ""; 79 | position: absolute; 80 | width: 38px; 81 | height: 4px; 82 | background: #fff; 83 | transform-origin: right; 84 | transform: rotate(45deg) translate(0,25px) scaleX(0); 85 | transition: .5s; 86 | } 87 | 88 | ul li.prev:hover span::before{ 89 | transform: rotate(45deg) translate(0,25px) scaleX(1); 90 | } 91 | -------------------------------------------------------------------------------- /demo/04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 04-Button 6 | 7 | 8 | 9 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /demo/05/btn-on-off.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 纯css编写开关按钮 6 | 49 | 50 | 51 | 52 |
53 | 54 | 59 |
60 | 61 | 62 | -------------------------------------------------------------------------------- /demo/05/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 | 54 | 55 | 56 | 57 | 58 | 59 |
60 | 61 |
62 | 63 | 64 | 65 | 66 | 67 | 68 |
69 |
70 |

71 | 点这里查看带文字的按钮 72 |

73 |
74 | 75 | -------------------------------------------------------------------------------- /demo/06/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | background: #262626; 5 | font-family: sans-serif; 6 | } 7 | .box{ 8 | position: absolute; 9 | top: 50%; 10 | left: 50%; 11 | transform: translate(-50%,-50%); 12 | width: 250px; 13 | padding: 20px; 14 | background: #000; 15 | color: #fff; 16 | text-align: center; 17 | box-shadow: 0 10px 30px agba(0,0,0,1); 18 | border-radius: 5px; 19 | overflow: hidden; 20 | } 21 | .box:before{ 22 | content: ''; 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | width: 100%; 27 | height: 100%; 28 | background: agba(255,255,255,0.05); 29 | transform: skewX(-3deg); 30 | pointer-events: none; 31 | } 32 | .box p{ 33 | margin: 0; 34 | padding: 0; 35 | color: #fff; 36 | font-size: 20px; 37 | } 38 | .box label{ 39 | position: relative; 40 | cursor: pointer; 41 | } 42 | .box label input{ 43 | display: none; 44 | } 45 | .box label span{ 46 | position: relative; 47 | display: inline-block; 48 | margin: 20px 10px; 49 | padding: 5px; 50 | width: 50px; 51 | background: #000; 52 | border: 1px solid #444; 53 | color: #444; 54 | border-radius: 4px; 55 | } 56 | .box label input:checked ~ span{ 57 | color: #fff; 58 | border: 1px solid #008eff; 59 | } 60 | .box label input:checked ~ span:before{ 61 | content: ''; 62 | width: 100%; 63 | height: 100%; 64 | position: absolute; 65 | top: 0; 66 | left: 0; 67 | background: #008eff; 68 | z-index: -1; 69 | filter: blur(10px); 70 | } 71 | .box label input:checked ~ span:after{ 72 | content: ''; 73 | width: 100%; 74 | height: 100%; 75 | position: absolute; 76 | top: 0; 77 | left: 0; 78 | background: #008eff; 79 | z-index: -1; 80 | filter: blur(15px); 81 | } 82 | .box label input:checked ~ span.yes{ 83 | color: #62ff00; 84 | border-color: #62ff00; 85 | box-shadow: inset 0 0 10px #62ff00; 86 | } 87 | .box label input:checked ~ span.yes:before, 88 | .box label input:checked ~ span.yes:after{ 89 | background: #62ff00; 90 | } 91 | .box label input:checked ~ span.no{ 92 | color: #ff0000; 93 | border-color: #ff0000; 94 | box-shadow: inset 0 0 10px #ff0000; 95 | } 96 | .box label input:checked ~ span.no:before, 97 | .box label input:checked ~ span.no:after{ 98 | background: #ff0000; 99 | } -------------------------------------------------------------------------------- /demo/06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 06-Button Demo 6 | 7 | 8 | 9 | 10 |
11 |

你要接下来要做什么？

12 | 16 | 20 |
21 | 22 | -------------------------------------------------------------------------------- /demo/07/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | #clock{ 6 | position: absolute; 7 | top: 50%; 8 | left: 50%; 9 | transform: translate(-50%,-50%); 10 | } 11 | -------------------------------------------------------------------------------- /demo/07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 07-Clock Demo 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | 34 | 35 | -------------------------------------------------------------------------------- /demo/07/js/angular.radialIndicator.js: -------------------------------------------------------------------------------- 1 | /* 2 | radialIndicator.js v 1.4.0 3 | Author: Sudhanshu Yadav 4 | Copyright (c) 2015,2016 Sudhanshu Yadav - ignitersworld.com , released under the MIT license. 5 | Demo on: ignitersworld.com/lab/radialIndicator.html 6 | */ 7 | 8 | /* Angular hook for radialIndicator */ 9 | ; 10 | (function (angular) { 11 | angular.module('radialIndicator', []).directive('radialIndicator', ['radialIndicatorInstance', 12 | 13 | function (radialIndicatorInstance) { 14 | return { 15 | restrict: 'A', 16 | link: function (scope, element, attrs) { 17 | var element = element, 18 | id = attrs.radialIndicatorId, 19 | options = scope.$eval(attrs.radialIndicator), 20 | model = attrs.radialIndicatorModel; 21 | 22 | var indInstance = radialIndicator(element, options); 23 | 24 | //store indicator instance on radialIndicatorConfig so can get through dependency injection 25 | if (id) radialIndicatorInstance[id] = indInstance; 26 | 27 | //watch for modal change 28 | scope.$watch(model, function (newValue) { 29 | indInstance.value(newValue); 30 | }); 31 | 32 | //delete the idnicator instance when scope dies 33 | scope.$on('$destroy', function () { 34 | if (id) delete radialIndicatorInstance[id]; 35 | }); 36 | 37 | } 38 | } 39 | }]) 40 | //a factory to store radial indicators instances which can be injected to controllers or directive to get any indicators instance 41 | .factory('radialIndicatorInstance', function () { 42 | if (!window.radialIndicator) throw "Please include radialIndicator.js"; 43 | 44 | var radialIndicatorInstance = {}; 45 | 46 | return radialIndicatorInstance; 47 | 48 | }); 49 | }(angular)); 50 | -------------------------------------------------------------------------------- /demo/08/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | ul{ 7 | position: absolute; 8 | top: 50%; 9 | left: 50%; 10 | transform: translate(-50%,-50%); 11 | margin: 0; 12 | padding: 0; 13 | display: flex; 14 | width: 320px; 15 | height: 60px; 16 | } 17 | ul:before{ 18 | content: '\f1e0'; 19 | font-family: fontAwesome; 20 | position: absolute; 21 | width: 100%; 22 | height: 100%; 23 | background: linear-gradient(45deg,#ff00ff,#8a2be2); 24 | border-radius: 30px; 25 | text-align: center; 26 | line-height: 60px; 27 | color: #FFF; 28 | font-size: 30px; 29 | margin: 0 2px; 30 | transition: 0.5s; 31 | z-index: 1; 32 | } 33 | ul:hover:before{ 34 | width: 60px; 35 | } 36 | ul li{ 37 | position: absolute; 38 | list-style: none; 39 | transition: 1s; 40 | } 41 | ul li a{ 42 | display: block; 43 | width: 60px; 44 | height: 60px; 45 | line-height: 60px; 46 | text-align: center; 47 | background: #262626; 48 | color: #FFF; 49 | margin: 0 2px; 50 | border-radius: 50%; 51 | font-size: 30px; 52 | transition: 1s; 53 | } 54 | ul li:nth-child(1) a{ 55 | background: #3b5999; 56 | } 57 | ul li:nth-child(2) a{ 58 | background: #55acee; 59 | } 60 | ul li:nth-child(3) a{ 61 | background: #dd4b39; 62 | } 63 | ul li:nth-child(4) a{ 64 | background: #0077b5; 65 | } 66 | ul li:nth-child(5) a{ 67 | background: #e4405f; 68 | } 69 | ul:hover li:nth-child(1) a{ 70 | transform: translateX(64px) rotate(360deg); 71 | transition-delay: 0.8s; 72 | } 73 | ul:hover li:nth-child(2) a{ 74 | transform: translateX(128px) rotate(360deg); 75 | transition-delay: 0.6s; 76 | } 77 | ul:hover li:nth-child(3) a{ 78 | transform: translateX(192px) rotate(360deg); 79 | transition-delay: 0.4s; 80 | } 81 | ul:hover li:nth-child(4) a{ 82 | transform: translateX(256px) rotate(360deg); 83 | transition-delay: 0.2s; 84 | } 85 | ul:hover li:nth-child(5) a{ 86 | transform: translateX(320px) rotate(360deg); 87 | transition-delay: 0s; 88 | } 89 | 90 | -------------------------------------------------------------------------------- /demo/08/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/08/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /demo/08/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/08/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /demo/08/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/08/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /demo/08/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/08/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /demo/08/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/08/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /demo/08/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 08-Share Demo 6 | 7 | 8 | 9 | 10 | 11 | 18 | 19 | -------------------------------------------------------------------------------- /demo/09/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | background: #262626; 6 | } 7 | 8 | .center{ 9 | width: 40%; 10 | position: absolute; 11 | top: 50%; 12 | left: 50%; 13 | transform: translate(-50%,-50%); 14 | padding: 20px; 15 | background: #333; 16 | box-sizing: border-box; 17 | box-shadow: 0 20px 50px rgba(0,0,0,.5); 18 | } 19 | 20 | h1{ 21 | margin: 0; 22 | padding: 0; 23 | color: #fff; 24 | text-transform: uppercase; 25 | letter-spacing: 2px; 26 | } 27 | 28 | .skillBox{ 29 | box-sizing: border-box; 30 | width: 100%; 31 | margin: 20px 0; 32 | } 33 | 34 | .skillBox p{ 35 | color: #fff; 36 | text-transform: uppercase; 37 | margin: 0 0 10px; 38 | padding: 0; 39 | font-w 40 | } 41 | 42 | .skillBox p:nth-child(2){ 43 | float: right; 44 | position: relative; 45 | top: -25px; 46 | } 47 | 48 | .skill{ 49 | background: #262626; 50 | padding: 4px; 51 | box-sizing: border-box; 52 | border: 1px solid #0fffb7; 53 | border-radius: 2px; 54 | } 55 | 56 | .skill_level{ 57 | background: #0fffb7; 58 | width: 100%; 59 | height: 10px; 60 | } 61 | -------------------------------------------------------------------------------- /demo/09/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 09-Skills-Meter 6 | 7 | 8 | 9 |
10 |

Software Skills

11 |
12 |

Html5

13 |

90%

14 |
15 |
16 |
17 |
18 | 19 |
20 |

CSS3

21 |

85%

22 |
23 |
24 |
25 |
26 | 27 |
28 |

jAquery

29 |

65%

30 |
31 |
32 |
33 |
34 | 35 |
36 |

Photoshop

37 |

70%

38 |
39 |
40 |
41 |
42 | 43 |
44 |

Dreamweaver

45 |

82%

46 |
47 |
48 |
49 |
50 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /demo/10/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | overflow: hidden; 4 | } 5 | canvas{ 6 | background-color: white; 7 | } 8 | #instructions{ 9 | position: absolute; 10 | color: #000; 11 | bottom: 0; 12 | padding-bottom: 6px; 13 | font-family: sans-serif; 14 | font-size: 20px; 15 | width: 100%; 16 | text-align: center; 17 | pointer-events: none; 18 | } 19 | -------------------------------------------------------------------------------- /demo/10/img/spring.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/10/img/spring.jpg -------------------------------------------------------------------------------- /demo/10/img/wallpaper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/10/img/wallpaper.jpg -------------------------------------------------------------------------------- /demo/10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10-3D-Shader 6 | 7 | 8 | 9 |
10 |
11 | 按住鼠标右键启动3D着色效果
12 | Press Hold Right Mouse Button and drag to control the animation! 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /demo/11/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | section{ 6 | height: 100vh; 7 | background: #000; 8 | } 9 | section:before{ 10 | content: ''; 11 | position: absolute; 12 | top: 0; 13 | left: 0; 14 | width: 100%; 15 | height: 100%; 16 | background: linear-gradient(to right, #f00, #f00, #0f0, #0ff, #ff0, #0ff); 17 | mix-blend-mode: color; 18 | pointer-events: none; 19 | } 20 | video{ 21 | height: 100%; 22 | width: 100%; 23 | display: block; 24 | } 25 | h1{ 26 | margin: 0; 27 | padding: 0; 28 | position: absolute; 29 | top: 50%; 30 | transform: translateY(-50%); 31 | width: 100%; 32 | text-align: center; 33 | color: #fff; 34 | font-size: 5em; 35 | font-family: sans-serif; 36 | letter-spacing: 0.2em; 37 | } 38 | h1 span{ 39 | opacity: 0; 40 | display: inline-block; 41 | animation: animate 1s linear forwards; 42 | } 43 | @keyframes animate{ 44 | 0%{ 45 | opacity: 0; 46 | transform: rotateY(90deg); 47 | filter: blur(10px); 48 | } 49 | 100%{ 50 | opacity: 1; 51 | transform: rotateY(0deg); 52 | filter: blur(0); 53 | } 54 | } 55 | h1 span:nth-child(1){ 56 | animation-delay: 1s; 57 | } 58 | h1 span:nth-child(2){ 59 | animation-delay: 1.5s; 60 | } 61 | h1 span:nth-child(3){ 62 | animation-delay: 2s; 63 | } 64 | h1 span:nth-child(4){ 65 | animation-delay: 2.5s; 66 | } 67 | h1 span:nth-child(5){ 68 | animation-delay: 3s; 69 | } 70 | h1 span:nth-child(6){ 71 | animation-delay: 3.5s; 72 | } 73 | h1 span:nth-child(7){ 74 | animation-delay: 4s; 75 | } 76 | h1 span:nth-child(8){ 77 | animation-delay: 4.5s; 78 | } -------------------------------------------------------------------------------- /demo/11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 11-Text-Smoke 6 | 7 | 8 | 9 |
10 | 11 |

12 | 点 13 | 赞 14 | 投 15 | 币 16 | 收 17 | 藏 18 | 关 19 | 注 20 |

21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /demo/11/video/smoke.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/11/video/smoke.mp4 -------------------------------------------------------------------------------- /demo/12/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | section{ 6 | background-image: url(../img/wallpaper4k.jpg); 7 | background-size: cover; 8 | height: 100vh; 9 | } 10 | -------------------------------------------------------------------------------- /demo/12/img/wallpaper4k.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/12/img/wallpaper4k.jpg -------------------------------------------------------------------------------- /demo/12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12-Water-Ripple 6 | 7 | 8 | 9 |
10 | 11 | 12 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /demo/13/css/style.css: -------------------------------------------------------------------------------- 1 | body, div, h1, h2, form, fieldset, input, textarea, footer, p{ 2 | margin: 0; 3 | padding: 0; 4 | border: 0; 5 | outline: none; 6 | } 7 | body{ 8 | background: #F5F5F5; 9 | color: gray; 10 | font-family: tahoma; 11 | } 12 | p{ 13 | font-family: tahoma; 14 | font-size: 24px; 15 | color: #757575; 16 | } 17 | #wrap{ 18 | width: 530px; 19 | margin: 20px auto 0; 20 | height: 1000px; 21 | } 22 | h1{ 23 | margin-bottom: 20px; 24 | text-align: center; 25 | font-size: 35px; 26 | font-family: tahoma; 27 | color: black; 28 | } 29 | #form-wrap{ 30 | overflow: hidden; 31 | height: 447px; 32 | position: relative; 33 | top: 0px; 34 | transition: all 1s ease-in-out .3s; 35 | } 36 | #form-wrap:before{ 37 | content: ""; 38 | position: absolute; 39 | bottom: 128px; 40 | left: 0px; 41 | background: url('../img/before.png'); 42 | width: 530px; 43 | height: 317px; 44 | } 45 | #form-wrap:after{ 46 | content: ""; 47 | position: absolute; 48 | bottom: 0px; 49 | left: 0; 50 | background: url('../img/after.png'); 51 | width: 530px; 52 | height: 259px; 53 | } 54 | #form-wrap.hide:after, 55 | #form-wrap.hide:before{ 56 | display: none; 57 | } 58 | #form-wrap:hover{ 59 | height: 777px; 60 | top: -200px; 61 | } 62 | form{ 63 | background: url('../img/letter_bg.png'); 64 | position: relative; 65 | top: 200px; 66 | overflow: hidden; 67 | height: 200px; 68 | width: 400px; 69 | margin: 0px auto; 70 | padding: 20px; 71 | border: 1px solid white; 72 | border-right: 3px; 73 | transition: all 1s ease-in-out .3s; 74 | } 75 | #form-wrap:hover form{ 76 | height: 530px; 77 | } 78 | lable{ 79 | margin: 11px 20px 0 0; 80 | font-size: 15px; 81 | color: gray; 82 | text-transform: uppercase; 83 | } 84 | input[type=text], textarea{ 85 | font: 14px normal uppercase, arial, serif; 86 | color: dimgray; 87 | background: none; 88 | width: 380px; 89 | height: 37px; 90 | padding: 0px 10px; 91 | margin: 0 0 10px 0; 92 | border: 1px solid #BDBDBD; 93 | border-radius: 5px; 94 | } 95 | textarea{ 96 | height: 80px; 97 | padding-top: 14px; 98 | } 99 | textarea:focus, 100 | input[type=text]:focus{ 101 | background: url('../img/letter_bg.png'); 102 | } 103 | #form-wrap input[type=submit]{ 104 | position: relative; 105 | font-family: tahoma; 106 | font-size: 24px; 107 | color: gray; 108 | width: 300px; 109 | text-align: center; 110 | opacity: 0; 111 | background: none; 112 | cursor: pointer; 113 | border-radius: 3px; 114 | transition: opacity 0.7s ease-in-out 0s; 115 | } 116 | #form-wrap:hover input[type=submit]{ 117 | z-index: 1; 118 | opacity: 1; 119 | transition: opacity 0.5s ease-in-out 1.3s; 120 | } 121 | -------------------------------------------------------------------------------- /demo/13/img/after.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/13/img/after.png -------------------------------------------------------------------------------- /demo/13/img/before.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/13/img/before.png -------------------------------------------------------------------------------- /demo/13/img/letter_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/13/img/letter_bg.png -------------------------------------------------------------------------------- /demo/13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13-SendMessage 6 | 7 | 8 | 9 |
10 |

SEND A MESSAGE

11 |


12 |
13 |
14 |

HELLO JOE,

15 | 16 | 17 | 18 |

BEST,

19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /demo/14/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 14-Download 6 | 7 | 8 | 9 | 10 | 11 | Download
 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /demo/14/js/script.js: -------------------------------------------------------------------------------- 1 | $("a b").html(function(index, html) { 2 | return html.replace(/\S/g, '$&'); 3 | }); 4 | 5 | $("a").click(function(){ 6 | $("a").addClass("loading"); 7 | setTimeout(function(){ 8 | $("a").removeClass("loading"); 9 | }, 8000); 10 | 11 | }); -------------------------------------------------------------------------------- /demo/15/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | background-color: #1f1f1f; 5 | font-family: sans-serif; 6 | } 7 | 8 | ul{ 9 | position: absolute; 10 | top: 50%; 11 | left: 50%; 12 | transform: translate(-50%,-50%); 13 | display: flex; 14 | margin: 0; 15 | padding: 0; 16 | } 17 | 18 | ul li{ 19 | list-style: none; 20 | } 21 | 22 | ul li a{ 23 | text-decoration: none; 24 | position: relative; 25 | display: block; 26 | width: 40px; 27 | height: 40px; 28 | font-size: 20px; 29 | text-align: center; 30 | line-height: 40px; 31 | background: #353535; 32 | color: #565656; 33 | margin: 5px; 34 | border-radius: 4px; 35 | box-shadow: inset 0 5px 10px rgba(0, 0, 0, .1), 36 | 0 2px 5px rgba(0, 0, 0, .5); 37 | transition: all 300ms; 38 | } 39 | 40 | ul li a.active, 41 | ul li a:hover{ 42 | color: #fff; 43 | text-shadow: 0 0 20px rgb(255, 224, 27), 44 | 0 0 20px rgb(255, 224, 27), 45 | 0 0 20px rgb(255, 224, 27), 46 | 0 0 20px rgb(255, 224, 27), 47 | 0 0 20px rgb(255, 224, 27), 48 | 0 0 20px rgb(255, 224, 27), 49 | 0 0 20px rgb(255, 224, 27), 50 | 0 0 20px rgb(255, 224, 27); 51 | } 52 | -------------------------------------------------------------------------------- /demo/15/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 15-Paging 6 | 7 | 8 | 9 | 10 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /demo/16/css/owl.carousel.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} -------------------------------------------------------------------------------- /demo/16/css/owl.theme.default.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | .owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791} -------------------------------------------------------------------------------- /demo/16/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: 'Roboto Condensed', sans-serif; 3 | background: #ebebeb; 4 | overflow: hidden; 5 | } 6 | 7 | .testimonial-arrow { 8 | z-index: 1; 9 | bottom: -14px; 10 | left: 45%; 11 | width: 10px; 12 | height:0; 13 | border-top: 15px solid #ffffff; 14 | border-left: 13px solid transparent; 15 | border-right: 13px solid transparent; 16 | } 17 | .testimonial-text { 18 | background: #ffffff; 19 | padding: 3rem 1.4rem; 20 | border-radius: 10px; 21 | } 22 | .testimonial-text p { 23 | padding-bottom: 1.8rem; 24 | line-height: 24px; 25 | } 26 | .testimonial-date { 27 | font-size: 14px; 28 | color: #acacac; 29 | } 30 | .testimonial-photo { 31 | height: 89px; 32 | width: 89px; 33 | margin: 10px auto 0 auto; 34 | } 35 | .testimonial-photo > img { 36 | -webkit-border-radius: 50%; border-radius: 50%; 37 | } 38 | .testimonial-item h5 { 39 | font-size: 18px; 40 | } 41 | .testimonial-item p{ 42 | font-size: 14px; 43 | } 44 | .testimonial-item { 45 | cursor: pointer; 46 | } 47 | .testimonial-text:hover { 48 | background: #fb5279; 49 | } 50 | .testimonial-text:hover p { 51 | color: #ffffff; 52 | } 53 | .testimonial-text:hover .testimonial-date { 54 | color: #fff; 55 | } 56 | .testimonial-text:hover .testimonial-arrow { 57 | border-top-color: #fb5279; 58 | } 59 | 60 | /* testimonial two */ 61 | .testimonial-two{ 62 | background: #fff; 63 | border-radius: 10px; 64 | padding: 30px; 65 | } 66 | .testimonial-post { 67 | overflow: hidden; 68 | display: table; 69 | } 70 | .testimonial-post .post, .testimonial-post .text-content { 71 | display: table-cell; 72 | } 73 | .testimonial-post .post { 74 | height: 60px; 75 | width: 60px; 76 | } 77 | .testimonial-post .post > img { 78 | width: 100%; 79 | -webkit-border-radius: 50%; 80 | border-radius: 50%; 81 | } 82 | .testimonial-post .text-content { 83 | vertical-align: middle; 84 | padding-left: 10px; 85 | } 86 | .testimonial-post:hover a, .testimonial-post:focus a { 87 | color: #f1c30f; 88 | } 89 | .testimonial-two .testimonial-para:before{ 90 | display: block; 91 | font-size: 33px; 92 | color: #535353; 93 | margin-bottom: 15px; 94 | content: "\e67f"; 95 | font-family: 'themify'; 96 | } 97 | .testimonial-two .testimonial-item h5{ 98 | margin-top: 10px; 99 | margin-bottom: 4px; 100 | } 101 | .testimonial-two .testimonial-item .rating{ 102 | margin-top: 5px; 103 | } 104 | .testimonial-two .testimonial-item .rating i{ 105 | font-size: 15px; 106 | color: #f1c30f; 107 | } 108 | -------------------------------------------------------------------------------- /demo/16/img/team-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/16/img/team-1.jpg -------------------------------------------------------------------------------- /demo/16/img/team-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/16/img/team-2.jpg -------------------------------------------------------------------------------- /demo/16/img/team-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/16/img/team-3.jpg -------------------------------------------------------------------------------- /demo/16/img/team-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/16/img/team-4.jpg -------------------------------------------------------------------------------- /demo/16/img/team-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/16/img/team-5.jpg -------------------------------------------------------------------------------- /demo/17/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | position: absolute; 3 | top: 50%; 4 | left: 50%; 5 | transform: translate(-50%,-50%); 6 | background-color: #142328; 7 | } 8 | .pagination-outer{ 9 | text-align: center; 10 | } 11 | .pagination{ 12 | font-family: tahoma; 13 | border-radius: 400px; 14 | border: 2px solid #fe1739; 15 | overflow: hidden;; 16 | display: inline-flex; 17 | position: relative; 18 | } 19 | .pagination li a.page-link{ 20 | color: white; 21 | background-color: transparent; 22 | font-size: 22px; 23 | font-weight: 599; 24 | text-align: center; 25 | line-height: 43px; 26 | height: 45px; 27 | width: 55px; 28 | padding: 0; 29 | border: none; 30 | border-radius: 0; 31 | position: relative; 32 | z-index: 1; 33 | } 34 | .pagination li.active a.page-link, 35 | .pagination li a.page-link:hover, 36 | .pagination li.active a.page-link:hover{ 37 | color: white; 38 | background: transparent; 39 | border: none; 40 | } 41 | .pagination li a.page-link:before, 42 | .pagination li a.page-link:after{ 43 | content: ''; 44 | height: 100%; 45 | width: 100%; 46 | border: 1px solid #000; 47 | border-top: none; 48 | border-bottom: none; 49 | transform: skewX(-17deg); 50 | position: absolute; 51 | left: 0; 52 | top: 0; 53 | z-index: -1; 54 | transition: all 0.3s; 55 | } 56 | .pagination li a.page-link:after{ 57 | background-color: #fe1739; 58 | border: none; 59 | border-radius: 50%; 60 | transform: skewX(-17deg) scale(0); 61 | } 62 | .pagination li.active a.page-link:after, 63 | .pagination li a.page-link:hover:after, 64 | .pagination li.active a.page-link:hover:after{ 65 | border-radius: 0; 66 | transform: skewX(-17deg) scale(1); 67 | } -------------------------------------------------------------------------------- /demo/17/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 17-Paging 6 | 7 | 8 | 9 | 10 | 11 |
12 | 34 |
35 | 36 | -------------------------------------------------------------------------------- /demo/18/css/style.css: -------------------------------------------------------------------------------- 1 | html{ 2 | box-sizing: border-box; 3 | font-size: 15px; 4 | } 5 | 6 | *,*:before, *:after{ 7 | box-sizing: inherit; 8 | } 9 | 10 | body,h1,h2,h3{ 11 | margin: 0; 12 | padding: 0; 13 | font-weight: normal; 14 | } 15 | 16 | a{ 17 | text-decoration: none; 18 | } 19 | 20 | body{ 21 | background-color: #3c5b9a; 22 | padding: 4rem; 23 | font-family: tahoma; 24 | } 25 | 26 | .main{ 27 | width: 100%; 28 | height: 800px; 29 | background-color: #e9eaef; 30 | box-shadow: 0 0 20px #143477; 31 | } 32 | 33 | .top{ 34 | background-color: #3c5b9a; 35 | } 36 | 37 | .header{ 38 | display: flex; 39 | justify-content: space-between; 40 | } 41 | 42 | .logo{ 43 | padding-left: 20px; 44 | padding-top: 20px; 45 | } 46 | 47 | .login{ 48 | padding-right: 40px; 49 | padding-top: 20px; 50 | } 51 | 52 | .login input{ 53 | width: 150px; 54 | height: 30px; 55 | padding: 5px; 56 | border: none; 57 | float: left; 58 | outline: none; 59 | } 60 | 61 | .login button{ 62 | outline: none; 63 | float: left; 64 | background-color: #4277b2; 65 | border: 1px solid #29487d; 66 | color: white; 67 | height: 30px; 68 | width: 100px; 69 | cursor: pointer; 70 | } 71 | 72 | h2{ 73 | color: white; 74 | text-align: center; 75 | font-size: 2rem; 76 | padding: 70px 0 25px; 77 | 78 | } 79 | 80 | h3{ 81 | color: white; 82 | text-align: center; 83 | font-size: 1rem; 84 | padding-bottom: 140px; 85 | 86 | } 87 | 88 | .signup{ 89 | width: 400px; 90 | height: 340px; 91 | margin: auto; 92 | background-color: white; 93 | position: relative; 94 | top: -71px; 95 | padding: 30px; 96 | } 97 | 98 | .signup h4{ 99 | color: gray; 100 | font-size: 1.4rem; 101 | } 102 | 103 | .signup .field{ 104 | margin-top: 30px; 105 | position: relative; 106 | } 107 | 108 | .signup input{ 109 | display: block; 110 | width: 100%; 111 | border: none; 112 | outline: none; 113 | border-bottom: 1px solid #999; 114 | color: gray; 115 | font-size: 1rem; 116 | } 117 | 118 | .signup button{ 119 | display: block; 120 | width: 100%; 121 | outline: none; 122 | background-color: #4277b2; 123 | border: 1px solid #29487d; 124 | color: white; 125 | font-size: 1rem; 126 | cursor: pointer; 127 | padding: 10px; 128 | } 129 | 130 | .signup .label{ 131 | position: absolute; 132 | pointer-events: none; 133 | left: 0; 134 | top: 0; 135 | transition: 0.2s ease all; 136 | color: #757575; 137 | } 138 | 139 | .sign{ 140 | color: white; 141 | } 142 | 143 | .signup input:focus ~ .label, 144 | .signup input:not(:focus):valid ~ .label{ 145 | top: -17px; 146 | font-size: .8rem; 147 | opacity: 1; 148 | } 149 | -------------------------------------------------------------------------------- /demo/18/img/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/18/img/facebook.png -------------------------------------------------------------------------------- /demo/18/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 18-Facebook 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |

14 | 15 | 22 |
23 | 24 |

Welcome to Facebook

25 |

The world biggest social network

26 |
27 |
28 |

SIGN UP

29 |
30 |
31 | 32 | Full Name 33 |
34 |
35 | 36 | Your Email 37 |
38 |
39 | 40 | Your Password 41 |
42 |
43 | 44 |
45 |
46 |
47 |
48 | 49 | 50 | -------------------------------------------------------------------------------- /demo/19/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800&display=swap'); 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | body{ 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | min-height: 100vh; 14 | background: linear-gradient(0deg, #fff 50%, #2196f3); 15 | } 16 | .container{ 17 | max-width: 1000px; 18 | position: relative; 19 | display: flex; 20 | justify-content: center; 21 | flex-wrap: wrap; 22 | transition: 0.5s; 23 | } 24 | .container .card{ 25 | position: relative; 26 | width: 250px; 27 | height: 300px; 28 | background: #fff; 29 | display: flex; 30 | justify-content: center; 31 | align-items: center; 32 | transition: 0.5s; 33 | } 34 | .container:hover .card{ 35 | filter: blur(5px); 36 | transform: scale(.7); 37 | } 38 | .container .card:hover{ 39 | filter: blur(0px); 40 | transform: scale(1); 41 | } 42 | .container .card:before{ 43 | content: ''; 44 | position: absolute; 45 | width: 100%; 46 | height: 100%; 47 | background: #fff; 48 | z-index: 1; 49 | transition: 0.5s; 50 | } 51 | .container .card:hover:before{ 52 | background: #000; 53 | transform: scaleY(1.15); 54 | box-shadow: 0 5px 15px rgba(0,0,0,.2); 55 | } 56 | .container .card .content{ 57 | text-align: center; 58 | z-index: 2; 59 | padding: 0 20px; 60 | transition: 0.5s; 61 | } 62 | .container .card:hover .content{ 63 | color: #fff; 64 | } 65 | .container .card .content h2{ 66 | font-size: 3em; 67 | } 68 | .container .card .content p{ 69 | font-size: 0.9em; 70 | } 71 | .container .card .content a{ 72 | display: inline-block; 73 | margin-top: 15px; 74 | padding: 5px 10px; 75 | background: #262626; 76 | color: #fff; 77 | text-decoration: none; 78 | } 79 | .container .card:hover .content a{ 80 | background: #2196f3; 81 | } 82 | 83 | -------------------------------------------------------------------------------- /demo/19/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 19-Card-Effect 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |

1

14 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

15 | Read More 16 |
17 |
18 |
19 |
20 |

2

21 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

22 | Read More 23 |
24 |
25 |
26 |
27 |

3

28 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

29 | Read More 30 |
31 |
32 |
33 |
34 |

4

35 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

36 | Read More 37 |
38 |
39 |
40 | 41 | -------------------------------------------------------------------------------- /demo/20/css/style.css: -------------------------------------------------------------------------------- 1 | .loader{ 2 | text-align: center; 3 | margin: 220px auto 0; 4 | position: relative; 5 | } 6 | .loader .domino > div{ 7 | width: 30px; 8 | height: 30px; 9 | border-radius: 8px; 10 | display: inline-flex; 11 | transform: rotate(45deg); 12 | animation: domino-effect 2.4s infinite ease-in-out; 13 | } 14 | .loader .domino > div:after{ 15 | content: ""; 16 | width: 30px; 17 | height: 30px; 18 | border-radius: 8px; 19 | opacity: 0; 20 | position: relative; 21 | top: 0px; 22 | left: -43px; 23 | animation: illusion 2.4s infinite ease-in-out; 24 | } 25 | .domino > div:nth-child(1){ 26 | margin: 13px; 27 | background: #f50057; 28 | animation-delay: 0.7s; 29 | } 30 | .domino > div:nth-child(1):after{ 31 | background: #f50057; 32 | animation-delay: 0.7s; 33 | } 34 | .domino > div:nth-child(2){ 35 | margin: 13px; 36 | background: #d50000; 37 | animation-delay: 1.2s; 38 | } 39 | .domino > div:nth-child(2):after{ 40 | background: #d50000; 41 | animation-delay: 1.2s; 42 | } 43 | .domino > div:nth-child(3){ 44 | margin: 13px; 45 | background: #841aed; 46 | animation-delay: 1.8s; 47 | } 48 | .domino > div:nth-child(3):after{ 49 | background: #841aed; 50 | animation-delay: 1.8s; 51 | } 52 | .domino > div:nth-child(4){ 53 | margin: 13px; 54 | background: deepskyblue; 55 | animation-delay: 2.4s; 56 | } 57 | .domino > div:nth-child(4):after{ 58 | background: deepskyblue; 59 | animation-delay: 2.4s; 60 | } 61 | 62 | @keyframes illusion{ 63 | 0%, 25%{ 64 | opacity: 1; 65 | } 66 | 25.3%, 33.33%, 100%{ 67 | opacity: 0; 68 | } 69 | } 70 | 71 | @keyframes domino-effect{ 72 | 20%, 100%{ 73 | transform: rotate(135deg); 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /demo/20/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 20-Loading 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | -------------------------------------------------------------------------------- /demo/21/css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | body{ 6 | display: flex; 7 | justify-content: center; 8 | align-content: center; 9 | min-height: 100vh; 10 | background: #222; 11 | } 12 | .clock{ 13 | width: auto; 14 | } 15 | .flip-clock-dot{ 16 | background: #ccc; 17 | } 18 | .flip-clock-meridium a{ 19 | color: #ccc; 20 | } 21 | .flip-clock-wrapper{ 22 | width: 550px; 23 | position: absolute; 24 | top: 50%; 25 | left: 50%; 26 | transform: translate(-50%,-50%); 27 | } -------------------------------------------------------------------------------- /demo/21/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 21-Clock 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 20 | 21 | -------------------------------------------------------------------------------- /demo/22/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | background: #000; 5 | } 6 | a{ 7 | position: absolute; 8 | top: 50%; 9 | left: 50%; 10 | transform: translate(-50%, -50%); 11 | width: 200px; 12 | height: 60px; 13 | text-align: center; 14 | line-height: 60px; 15 | color: #fff; 16 | font-size: 24px; 17 | text-transform: uppercase; 18 | text-decoration: none; 19 | font-family: sans-serif; 20 | box-sizing: border-box; 21 | background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); 22 | background-size: 400%; 23 | border-radius: 30px; 24 | z-index: 1; 25 | } 26 | a:hover{ 27 | animation: animate 8s linear infinite; 28 | } 29 | 30 | @keyframes animate{ 31 | 0%{ 32 | background-position: 0%; 33 | } 34 | 100%{ 35 | background-position: 400%; 36 | } 37 | } 38 | 39 | a:before{ 40 | content: ''; 41 | position: absolute; 42 | top: -5px; 43 | left: -5px; 44 | right: -5px; 45 | bottom: -5px; 46 | z-index: -1; 47 | background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); 48 | background-size: 400%; 49 | border-radius: 40px; 50 | opacity: 0; 51 | transition: 0.5s; 52 | } 53 | a:hover:before{ 54 | filter: blur(20px); 55 | opacity: 1; 56 | animation: animate 8s linear infinite; 57 | } 58 | 59 | -------------------------------------------------------------------------------- /demo/22/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 22-GlowingBtn 6 | 7 | 8 | 9 | 10 | Button 11 | 12 | -------------------------------------------------------------------------------- /demo/23/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | 7 | ul{ 8 | position: absolute; 9 | top: 50%; 10 | left: 50%; 11 | transform: translate(-50%, -50%); 12 | margin: 0; 13 | padding: 0; 14 | display: flex; 15 | } 16 | ul li{ 17 | list-style: none; 18 | } 19 | ul li a{ 20 | position: relative; 21 | display: block; 22 | padding: 10px 20px; 23 | margin: 20px 0; 24 | text-decoration: none; 25 | text-transform: uppercase; 26 | color: #262626; 27 | font-weight: bold; 28 | transition: .5s; 29 | } 30 | ul li a:hover{ 31 | color: #fff; 32 | } 33 | ul li a:before{ 34 | content: ''; 35 | position: absolute; 36 | top: 0; 37 | left: 0; 38 | width: 100%; 39 | height: 100%; 40 | border-top: 1px solid #000; 41 | border-bottom: 1px solid #000; 42 | transform: scaleY(2); 43 | opacity: 0; 44 | transition: .5s; 45 | z-index: -1; 46 | } 47 | ul li a:hover:before{ 48 | transform: scaleY(1.2); 49 | opacity: 1; 50 | } 51 | ul li a:after{ 52 | content: ''; 53 | position: absolute; 54 | top: 1px; 55 | left: 0; 56 | width: 100%; 57 | height: 100%; 58 | background: #000; 59 | transform: scale(0); 60 | transition: .5s; 61 | z-index: -1; 62 | } 63 | ul li a:hover:after{ 64 | transform: scale(1); 65 | } 66 | -------------------------------------------------------------------------------- /demo/23/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 23-MenuEffect 6 | 7 | 8 | 9 | 10 | 18 | 19 | -------------------------------------------------------------------------------- /demo/24/css/style.css: -------------------------------------------------------------------------------- 1 | .modal-box{ 2 | font-family: Arial; 3 | } 4 | .modal-box .show-modal{ 5 | color: white; 6 | background: hotpink; 7 | font-size: 18px; 8 | font-weight: 599; 9 | text-transform: uppercase; 10 | padding: 17px 35px; 11 | margin: 80px auto 0; 12 | border-radius: 50px; 13 | border: none; 14 | outline: none; 15 | display: block; 16 | letter-spacing: 2px; 17 | } 18 | .modal-box .show-modal:hover{ 19 | color: white; 20 | border: none; 21 | outline: none; 22 | text-decoration: none; 23 | } 24 | .modal-box .modal-dialog .modal-content{ 25 | text-align: center; 26 | border-radius: 10px; 27 | margin-top: 150px; 28 | width: 450px; 29 | } 30 | .modal-box .modal-dialog .modal-content .close{ 31 | color: #000; 32 | font-size: 28px; 33 | text-shadow: none; 34 | position: absolute; 35 | left: auto; 36 | right: 7px; 37 | top: 0; 38 | z-index: 1; 39 | transition: all 0.3s; 40 | } 41 | .modal-box .modal-dialog .modal-content 42 | .close:hover{ 43 | color: #333; 44 | } 45 | .modal-box .modal-dialog .modal-content 46 | .modal-body{ 47 | padding: 30px 0 0 !important; 48 | } 49 | .modal-box .modal-dialog .modal-content 50 | .modal-body .icon{ 51 | color: #ff3c5f; 52 | background: white; 53 | font-size: 100px; 54 | line-height: 150px; 55 | width: 150px; 56 | height: 150px; 57 | margin: -100px auto 30px; 58 | border-radius: 50%; 59 | border: 10px solid #0075da; 60 | } 61 | .modal-box .modal-dialog .modal-content 62 | .modal-body .title{ 63 | color: hotpink; 64 | font-size: 30px; 65 | font-weight: 700; 66 | margin: 0 0 20px 0; 67 | } 68 | .modal-box .modal-dialog .modal-content 69 | .modal-body .description{ 70 | font-size: 18px; 71 | line-height: 35px; 72 | margin: 0 25px 40px; 73 | } 74 | .modal-box .modal-dialog .modal-content 75 | .modal-body .modal-cancel, 76 | .modal-box .modal-dialog .modal-content 77 | .modal-body .subscribe{ 78 | color: white; 79 | background-color: #ff3c5f; 80 | font-size: 18px; 81 | font-weight: 700; 82 | text-transform: uppercase; 83 | width: 50%; 84 | padding: 25px 18px; 85 | border: none; 86 | overflow: hidden; 87 | display: inline-block; 88 | margin: 0 -1px; 89 | transition: all 0.3s; 90 | } 91 | .modal-box .modal-dialog .modal-content 92 | .modal-body .modal-cancel{ 93 | color: #000; 94 | background-color: gray; 95 | } 96 | -------------------------------------------------------------------------------- /demo/24/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 24-ConfirmBox 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | 28 | 53 |
54 |
55 |
56 |
57 | 58 | -------------------------------------------------------------------------------- /demo/25/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800&display=swap'); 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | body{ 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | min-height: 100vh; 14 | background: linear-gradient(0deg, #0b74cb 0%, #0b74cb 50%, #fff 50%, #fff 100%); 15 | } 16 | .container{ 17 | max-width: 1000px; 18 | position: relative; 19 | display: flex; 20 | justify-content: center; 21 | flex-wrap: wrap; 22 | transform-style: preserve-3d; 23 | } 24 | .container .card{ 25 | position: relative; 26 | width: 180px; 27 | height: 240px; 28 | background: #fff; 29 | margin: 0 10px; 30 | display: flex; 31 | justify-content: center; 32 | align-items: center; 33 | border-radius: 4px; 34 | box-shadow: 0 5px 15px rgba(0,0,0,.1); 35 | transition: 0.5s; 36 | overflow: hidden; 37 | transform-style: preserve-3d; 38 | } 39 | .container:hover .card{ 40 | transform: perspective(500px) rotateY(30deg); 41 | } 42 | .container .card:hover{ 43 | transform: perspective(500px) rotateY(0deg); 44 | } 45 | .container .card:hover ~ .card{ 46 | transform: perspective(500px) rotateY(-30deg); 47 | } 48 | .container .card h2{ 49 | width: 80px; 50 | height: 80px; 51 | line-height: 80px; 52 | font-size: 3em; 53 | background: #2196f3; 54 | color: #fff; 55 | text-align: center; 56 | border-radius: 50%; 57 | transition: box-shadow 0.5s; 58 | } 59 | .container .card:hover h2{ 60 | background: #fff; 61 | color: #2196f3; 62 | box-shadow: 0 0 0 150px #2196f3; 63 | } -------------------------------------------------------------------------------- /demo/25/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 25-CardEffects 6 | 7 | 8 | 9 | 10 |
11 |
12 |

1

13 |
14 |
15 |

2

16 |
17 |
18 |

3

19 |
20 |
21 |

4

22 |
23 |
24 |

5

25 |
26 |
27 | 28 | -------------------------------------------------------------------------------- /demo/26/css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | body{ 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | min-height: 100vh; 10 | } 11 | .imgBx{ 12 | width: 100px; 13 | height: 100px; 14 | margin: 0 auto 20px; 15 | border-radius: 50%; 16 | overflow: hidden; 17 | border: 4px solid #333; 18 | box-shadow: 0 10px 15px rgba(0,0,0,.2); 19 | } 20 | .imagBx img{ 21 | max-width: 100%; 22 | } 23 | h2{ 24 | margin-top: 20px; 25 | font-family: consolas; 26 | text-align: center; 27 | font-size: 2em; 28 | } 29 | .odometer{ 30 | font-size: 4em; 31 | } -------------------------------------------------------------------------------- /demo/26/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/26/img/logo.png -------------------------------------------------------------------------------- /demo/26/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 26-Odometer 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 |
15 |
16 | 000000 17 |
18 |

粉丝数

19 |
20 | 21 | 26 | 27 | -------------------------------------------------------------------------------- /demo/27/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: blueviolet; 3 | padding: 0px; 4 | margin: 0px; 5 | overflow: hidden; 6 | } 7 | .toggle{ 8 | background-color: #fc0781; 9 | text-align: center; 10 | height: 100px; 11 | width: 100px; 12 | border-radius: 50%; 13 | position: absolute; 14 | margin: auto; 15 | top: 0px; 16 | bottom: 0px; 17 | left: 0px; 18 | right: 0px; 19 | } 20 | .fa-plus{ 21 | font-size: 59px; 22 | color: white; 23 | display: block; 24 | margin-top: 20px; 25 | transition: 0.7s; 26 | } 27 | .menu{ 28 | background-color: white; 29 | height: 100px; 30 | width: 100px; 31 | transform: scale(0); 32 | border-radius: 50%; 33 | position: absolute; 34 | margin: auto; 35 | top: 0px; 36 | bottom: 0px; 37 | left: 0px; 38 | right: 0px; 39 | z-index: -1; 40 | transition: 0.7s; 41 | } 42 | a{ 43 | display: inline-block; 44 | position: absolute; 45 | font-size: 15px; 46 | color: #bbbbbb; 47 | } 48 | a:nth-child(1){ 49 | top: 6px; 50 | left: 45px; 51 | } 52 | a:nth-child(2){ 53 | top: 24px; 54 | left: 77px; 55 | } 56 | a:nth-child(3){ 57 | top: 58px; 58 | left: 76px; 59 | } 60 | a:nth-child(4){ 61 | top: 78px; 62 | left: 42px; 63 | } 64 | a:nth-child(5){ 65 | top: 58px; 66 | left: 10px; 67 | } 68 | a:nth-child(6){ 69 | top: 23px; 70 | left: 12px; 71 | } 72 | a:hover{ 73 | color: #fc0781; 74 | } -------------------------------------------------------------------------------- /demo/27/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/27/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /demo/27/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/27/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /demo/27/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/27/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /demo/27/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/27/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /demo/27/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/27/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /demo/27/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 27-RadialMenu 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 | 39 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /demo/28/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | min-height: 100vh; 8 | } 9 | .imgBx{ 10 | position: relative; 11 | width: 500px; 12 | height: 500px; 13 | overflow: hidden; 14 | } 15 | .imgBx img{ 16 | position: absolute; 17 | top: 0; 18 | left: 0; 19 | width: 100%; 20 | height: 100%; 21 | background-size: cover; 22 | transition: 0.5s; 23 | } 24 | .imgBx:hover img:nth-child(2){ 25 | transform: translateX(-50%) scaleX(2); 26 | opacity: 0; 27 | filter: blur(10px); 28 | } 29 | .imgBx img:nth-child(1){ 30 | transform: translateX(50%) scaleX(2); 31 | opacity: 0; 32 | filter: blur(10px); 33 | } 34 | .imgBx:hover img:nth-child(1){ 35 | transform: translateX(0) scaleX(1); 36 | opacity: 1; 37 | filter: blur(0px); 38 | } -------------------------------------------------------------------------------- /demo/28/img/image1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/28/img/image1.jpg -------------------------------------------------------------------------------- /demo/28/img/image2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/28/img/image2.jpg -------------------------------------------------------------------------------- /demo/28/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 28-ImageEffect 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 |
14 | 15 | -------------------------------------------------------------------------------- /demo/29/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #d73031; 3 | margin: 0; 4 | padding: 0; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | min-height: 100vh; 9 | } 10 | .pagination-outer{ 11 | background: linear-gradient(to right, transparent, #fff, #fff, transparent); 12 | font-family: tahoma; 13 | padding: 0 30px; 14 | display: inline-flex; 15 | position: relative; 16 | } 17 | .pagination li a.page-link{ 18 | color: #d73031; 19 | background-color: transparent; 20 | font-size: 22px; 21 | line-height: 40px; 22 | height: 50px; 23 | width: 40px; 24 | border: none; 25 | overflow: hidden; 26 | position: relative; 27 | transition: all 0.4s ease 0s; 28 | } 29 | .pagination li.active a.page-link, 30 | .pagination li a.page-link:hover, 31 | .pagination li.active a.page-link:hover{ 32 | color: white; 33 | background-color: transparent; 34 | text-shadow: 0 0 10px #000; 35 | box-shadow: 0 0 10px rgba(0,0,0,0.5); 36 | } 37 | .pagination li a.page-link:before, 38 | .pagination li a.page-link:after{ 39 | content: ''; 40 | background-color: #d73031; 41 | height: 100%; 42 | width: 100%; 43 | position: absolute; 44 | left: -100%; 45 | top: 100%; 46 | z-index: -1; 47 | clip-path: polygon(0 0, 0% 100%, 100% 100%); 48 | transition: all 0.3s ease 0s; 49 | } 50 | .pagination li a.page-link:after{ 51 | background-color: #ed4040; 52 | left: 100%; 53 | top: -100%; 54 | clip-path: polygon(100% 0, 0 0, 100% 100%); 55 | } 56 | .pagination li a.page-link:hover::before, 57 | .pagination li a.page-link:hover::after{ 58 | left: 0; 59 | top: 0; 60 | } -------------------------------------------------------------------------------- /demo/29/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 29-Pagination 6 | 7 | 8 | 9 | 10 | 11 | 40 | 41 | -------------------------------------------------------------------------------- /demo/30/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | ul{ 6 | position: absolute; 7 | top: 50%; 8 | left: 50%; 9 | transform: translate(-50%.-50%); 10 | display: flex; 11 | } 12 | ul li{ 13 | list-style: none; 14 | width: 6px; 15 | height: 20px; 16 | background: #262626; 17 | margin: 0 4px; 18 | animation: animate .7s infinite alternate; 19 | } 20 | 21 | @keyframes animate{ 22 | 0%{ 23 | transform: scaleY(1); 24 | } 25 | 25%{ 26 | transform: scaleY(1); 27 | } 28 | 50%{ 29 | transform: scaleY(1); 30 | } 31 | 75%{ 32 | transform: scaleY(1); 33 | } 34 | 100%{ 35 | transform: scaleY(3); 36 | } 37 | } 38 | ul li:nth-child(1){ 39 | animation-delay: 0.1s; 40 | } 41 | ul li:nth-child(2){ 42 | animation-delay: 0.2s; 43 | } 44 | ul li:nth-child(3){ 45 | animation-delay: 0.3s; 46 | } 47 | ul li:nth-child(4){ 48 | animation-delay: 0.4s; 49 | } 50 | ul li:nth-child(5){ 51 | animation-delay: 0.5s; 52 | } 53 | ul li:nth-child(6){ 54 | animation-delay: 0.6s; 55 | } 56 | -------------------------------------------------------------------------------- /demo/30/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 30-Loading 6 | 7 | 8 | 9 | 10 | 18 | 19 | -------------------------------------------------------------------------------- /demo/31/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap'); 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: 'Poppins', sans-serif; 7 | } 8 | body{ 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | min-height: 100vh; 13 | background: linear-gradient(#0f4675, #0f4675 50%, #fff 50%, #fff 100%); 14 | } 15 | .container{ 16 | width: 1100px; 17 | display: flex; 18 | justify-content: space-between; 19 | flex-wrap: wrap; 20 | } 21 | .container .box{ 22 | position: relative; 23 | width: 320px; 24 | background: #fff; 25 | padding: 100px 40px 60px; 26 | box-shadow: 0 15px 45px rgba(0,0,0,.1); 27 | } 28 | .container .box:before{ 29 | content: ''; 30 | position: absolute; 31 | top: 0; 32 | left: 0; 33 | width: 100%; 34 | height: 100%; 35 | background: #ff226d; 36 | transform: scaleY(0); 37 | transform-origin: top; 38 | transition: transform 0.5s; 39 | } 40 | .container .box:hover:before{ 41 | transform: scaleY(1); 42 | transform-origin: bottom; 43 | transition: transform 0.5s; 44 | } 45 | .container .box h2{ 46 | position: absolute; 47 | left: 40px; 48 | top: 60px; 49 | font-size: 4em; 50 | font-weight: 800; 51 | z-index: 1; 52 | opacity: 0.1; 53 | transition: 0.5s; 54 | } 55 | .container .box:hover h2{ 56 | opacity: 1; 57 | color: #fff; 58 | transform: translateY(-40px); 59 | } 60 | .container .box h3{ 61 | position: relative; 62 | font-size: 1.5em; 63 | z-index: 2; 64 | color: #333; 65 | transition: 0.5s; 66 | } 67 | .container .box p{ 68 | position: relative; 69 | z-index: 2; 70 | color: #555; 71 | transition: 0.5s; 72 | } 73 | .container .box:hover h3, 74 | .container .box:hover p{ 75 | color: #fff; 76 | } -------------------------------------------------------------------------------- /demo/31/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 31-Card-Effect 6 | 7 | 8 | 9 | 10 |
11 |
12 |

01

13 |

Service One

14 |

这些年一直在提醒自己一件事情，千万不要感动自己，大部分人看似努力，不过是愚蠢导致的。什么熬夜看书到天亮，连续几天只睡几小时，多久没放假了。如果这些东西也值得炫耀，那么富士康流水线上任何一个人都比你努力多了。人难免天生有自怜情绪，唯有时刻保持清醒，才能看清真正的价值在哪里。
15 | ―――于宙 《我们这一代人的困惑》 16 |

17 |
18 |
19 |

02

20 |

Service Two

21 |

这些年一直在提醒自己一件事情，千万不要感动自己，大部分人看似努力，不过是愚蠢导致的。什么熬夜看书到天亮，连续几天只睡几小时，多久没放假了。如果这些东西也值得炫耀，那么富士康流水线上任何一个人都比你努力多了。人难免天生有自怜情绪，唯有时刻保持清醒，才能看清真正的价值在哪里。
22 | ―――于宙 《我们这一代人的困惑》 23 |

24 |
25 |
26 |

03

27 |

Service Three

28 |

这些年一直在提醒自己一件事情，千万不要感动自己，大部分人看似努力，不过是愚蠢导致的。什么熬夜看书到天亮，连续几天只睡几小时，多久没放假了。如果这些东西也值得炫耀，那么富士康流水线上任何一个人都比你努力多了。人难免天生有自怜情绪，唯有时刻保持清醒，才能看清真正的价值在哪里。
29 | ―――于宙 《我们这一代人的困惑》 30 |

31 |
32 |
33 | 34 | -------------------------------------------------------------------------------- /demo/32/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;} -------------------------------------------------------------------------------- /demo/32/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background: #242323; 3 | font-family: tahoma; 4 | } 5 | #blog-landing{ 6 | margin-top: 81px; 7 | position: relative; 8 | max-width: 100%; 9 | width: 100%; 10 | 11 | } 12 | img{ 13 | width: 100%; 14 | max-width: 100%; 15 | height: auto; 16 | } 17 | .white-panel{ 18 | position: absolute; 19 | background: white; 20 | box-shadow: 0px 1px 2px rgba(0,0,0,0.3); 21 | padding: 10px; 22 | } 23 | .white-panel:hover{ 24 | box-shadow: 1px 1px 10px rgba(0,0,0,0.5); 25 | margin-top: -15px; 26 | transition: all 0.3s ease-in-out; 27 | } -------------------------------------------------------------------------------- /demo/32/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/32/img/1.jpg -------------------------------------------------------------------------------- /demo/32/img/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/32/img/10.jpg -------------------------------------------------------------------------------- /demo/32/img/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/32/img/11.jpg -------------------------------------------------------------------------------- /demo/32/img/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/32/img/12.jpg -------------------------------------------------------------------------------- /demo/32/img/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/32/img/13.jpg -------------------------------------------------------------------------------- /demo/32/img/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/32/img/14.jpg -------------------------------------------------------------------------------- /demo/32/img/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/32/img/15.jpg -------------------------------------------------------------------------------- /demo/32/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/32/img/2.jpg -------------------------------------------------------------------------------- /demo/32/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/32/img/3.jpg -------------------------------------------------------------------------------- /demo/32/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/32/img/4.jpg -------------------------------------------------------------------------------- /demo/32/img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/32/img/5.jpg -------------------------------------------------------------------------------- /demo/32/img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/32/img/6.jpg -------------------------------------------------------------------------------- /demo/32/img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/32/img/7.jpg -------------------------------------------------------------------------------- /demo/32/img/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/32/img/8.jpg -------------------------------------------------------------------------------- /demo/32/img/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/32/img/9.jpg -------------------------------------------------------------------------------- /demo/32/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 32-GridLayout 6 | 11 | 12 | 13 |

下方超链接1：和视频中的代码一样，【无动画效果】

14 |

下方超链接2：B站UP @壹柒贰玖 提供，【无动画效果】


15 |

1.点这里查看“视频中”代码效果预览


16 |

2.点这里查看“优化后”代码效果预览

17 | 18 | -------------------------------------------------------------------------------- /demo/32/index_demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 兼容IE8的响应式网格瀑布流布局插件 8 | 9 | 10 | 44 | 47 | 48 | 49 | 50 | 127 | 128 | 129 | 130 | 142 | 143 | -------------------------------------------------------------------------------- /demo/32/index_video.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 响应式网格瀑布流布局 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 | 14 |

15 | Title 01 16 |

17 |

Description 01

18 |
19 |
20 | 21 |

22 | Title 02 23 |

24 |

Description 02

25 |
26 |
27 | 28 |

29 | Title 03 30 |

31 |

Description 03

32 |
33 |
34 | 35 |

36 | Title 04 37 |

38 |

Description 04

39 |
40 |
41 | 42 |

43 | Title 05 44 |

45 |

Description 05

46 |
47 |
48 | 49 |

50 | Title 06 51 |

52 |

Description 06

53 |
54 |
55 | 56 |

57 | Title 07 58 |

59 |

Description 07

60 |
61 |
62 | 63 |

64 | Title 08 65 |

66 |

Description 08

67 |
68 |
69 | 70 |

71 | Title 09 72 |

73 |

Description 09

74 |
75 |
76 | 77 |

78 | Title 10 79 |

80 |

Description 10

81 |
82 |
83 | 84 |

85 | Title 11 86 |

87 |

Description 11

88 |
89 |
90 | 91 |

92 | Title 12 93 |

94 |

Description 12

95 |
96 |
97 | 98 |

99 | Title 13 100 |

101 |

Description 13

102 |
103 |
104 | 105 |

106 | Title 14 107 |

108 |

Description 14

109 |
110 |
111 | 112 |

113 | Title 15 114 |

115 |

Description 15

116 |
117 |
118 |
119 | 120 | 121 | 132 | 133 | -------------------------------------------------------------------------------- /demo/33/css/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i); 2 | body{ 3 | font-family: tahoma; 4 | /*background-image: url();*/ 5 | 6 | } 7 | .team .item{ 8 | text-align: center; 9 | position: relative; 10 | margin-bottom: 15px; 11 | overflow: hidden; 12 | } 13 | .team .item:hover .info{ 14 | bottom: 50px; 15 | } 16 | .team .item:hover .team-img:after{ 17 | opacity: 1; 18 | visibility: visible; 19 | } 20 | .team .item .team-img{ 21 | overflow: hidden; 22 | border-radius: 10px; 23 | position: relative; 24 | } 25 | .team .item .team-img:after{ 26 | content: ''; 27 | width: 100%; 28 | height: 100%; 29 | position: absolute; 30 | top: 0; 31 | left: 0; 32 | background-color: rgb(0,0,0,0.8); 33 | background: linear-gradient(to top, #111, rgba(0,0,0,0.4)); 34 | opacity: 0; 35 | visibility: hidden; 36 | transition: all 0.4s; 37 | } 38 | .team .item .info{ 39 | position: absolute; 40 | bottom: -500px; 41 | left: 0; 42 | padding: 0 15px; 43 | width: 100%; 44 | z-index: 4; 45 | transition: all 0.4s; 46 | } 47 | .team .item .info h5{ 48 | font-size: 15px; 49 | color: white; 50 | letter-spacing: 1px; 51 | margin-bottom: 5px; 52 | } 53 | .team .item .info span{ 54 | font-size: 13px; 55 | font-family: italic; 56 | margin-bottom: 10px; 57 | color: #ee3158; 58 | } 59 | .team .item .info p{ 60 | margin-bottom: 10px; 61 | color: #a9a9a9; 62 | } 63 | .team .item .info .icon{ 64 | margin: 0 10px; 65 | font-size: 12px; 66 | color: #eee; 67 | cursor: pointer; 68 | } 69 | .pink{ 70 | color: deeppink; 71 | font-weight: bold; 72 | } -------------------------------------------------------------------------------- /demo/33/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/33/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /demo/33/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/33/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /demo/33/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/33/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /demo/33/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/33/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /demo/33/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/33/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /demo/33/img/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/33/img/01.jpg -------------------------------------------------------------------------------- /demo/33/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 33-CardEffect 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |


16 |
17 |

WEB DESIGN

18 |

OUR TALENTED TEAM

19 |

20 |
21 |
22 |
23 |
24 |
25 | 26 |
27 |
28 |
29 |
Alex Smith
30 | Project Manager 31 |

32 | 人难免天生有自怜情绪，唯有时刻保持清醒，才能看清真正的价值在哪里。 33 |

34 | 45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | 55 |
56 |
57 |
58 |
Alex Smith
59 | Project Manager 60 |

61 | 人难免天生有自怜情绪，唯有时刻保持清醒，才能看清真正的价值在哪里。 62 |

63 | 74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 | 84 |
85 |
86 |
87 |
Alex Smith
88 | Project Manager 89 |

90 | 人难免天生有自怜情绪，唯有时刻保持清醒，才能看清真正的价值在哪里。 91 |

92 | 103 |
104 |
105 |
106 |
107 |
108 | 109 |
110 |
111 | 112 | 113 | 114 | 120 | 121 | -------------------------------------------------------------------------------- /demo/33/js/jquery.hover3d.min.js: -------------------------------------------------------------------------------- 1 | !function(e){e.fn.hover3d=function(t){var r=e.extend({selector:null,perspective:1e3,sensitivity:20,invert:!1,shine:!1,hoverInClass:"hover-in",hoverOutClass:"hover-out",hoverClass:"hover-3d"},t);return this.each(function(){function t(e){i.addClass(r.hoverInClass+" "+r.hoverClass),currentX=currentY=0,setTimeout(function(){i.removeClass(r.hoverInClass)},1e3)}function s(e){var t=i.innerWidth(),s=i.innerHeight(),n=Math.round(e.pageX-i.offset().left),o=Math.round(e.pageY-i.offset().top),v=r.invert?(t/2-n)/r.sensitivity:-(t/2-n)/r.sensitivity,c=r.invert?-(s/2-o)/r.sensitivity:(s/2-o)/r.sensitivity,u=n-t/2,p=o-s/2,f=Math.atan2(p,u),h=180*f/Math.PI-90;0>h&&(h+=360),i.css({perspective:r.perspective+"px",transformStyle:"preserve-3d",transform:"rotateY("+v+"deg) rotateX("+c+"deg)"}),a.css("background","linear-gradient("+h+"deg, rgba(255,255,255,"+e.offsetY/s*.5+") 0%,rgba(255,255,255,0) 80%)")}function n(){i.addClass(r.hoverOutClass+" "+r.hoverClass),i.css({perspective:r.perspective+"px",transformStyle:"preserve-3d",transform:"rotateX(0) rotateY(0)"}),setTimeout(function(){i.removeClass(r.hoverOutClass+" "+r.hoverClass),currentX=currentY=0},1e3)}var o=e(this),i=o.find(r.selector);currentX=0,currentY=0,r.shine&&i.append('
');var a=e(this).find(".shine");o.css({perspective:r.perspective+"px",transformStyle:"preserve-3d"}),i.css({perspective:r.perspective+"px",transformStyle:"preserve-3d"}),a.css({position:"absolute",top:0,left:0,bottom:0,right:0,transform:"translateZ(1px)","z-index":9}),o.on("mouseenter",function(){return t()}),o.on("mousemove",function(e){return s(e)}),o.on("mouseleave",function(){return n()})})}}(jQuery); -------------------------------------------------------------------------------- /demo/34/booklet/images/arrow-next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/booklet/images/arrow-next.png -------------------------------------------------------------------------------- /demo/34/booklet/images/arrow-prev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/booklet/images/arrow-prev.png -------------------------------------------------------------------------------- /demo/34/booklet/images/shadow-top-back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/booklet/images/shadow-top-back.png -------------------------------------------------------------------------------- /demo/34/booklet/images/shadow-top-forward.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/booklet/images/shadow-top-forward.png -------------------------------------------------------------------------------- /demo/34/booklet/images/shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/booklet/images/shadow.png -------------------------------------------------------------------------------- /demo/34/css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | } 5 | body{ 6 | background:#eba426; 7 | color:#444; 8 | font-size:12px; 9 | color: #333; 10 | font-family: 'Oswald', sans-serif; 11 | } 12 | .booklet{ 13 | width:900px; 14 | height:607px; 15 | position:relative; 16 | margin:0 auto 10px; 17 | -moz-box-shadow:0px 0px 1px #fff; 18 | -webkit-box-shadow:0px 0px 1px #fff; 19 | box-shadow:0px 0px 1px #fff; 20 | -moz-border-radius:10px; 21 | -webkit-border-radius:10px; 22 | border-radius:10px; 23 | } 24 | .booklet .b-wrap-left { 25 | background:#fff url(../images/left_bg.jpg) no-repeat top left; 26 | -webkit-border-top-left-radius: 10px; 27 | -webkit-border-bottom-left-radius: 10px; 28 | -moz-border-radius-topleft:10px; 29 | -moz-border-radius-bottomleft: 10px; 30 | border-top-left-radius: 10px; 31 | border-bottom-left-radius: 10px; 32 | } 33 | .booklet .b-wrap-right { 34 | background:#efefef url(../images/right_bg.jpg) no-repeat top left; 35 | -webkit-border-top-right-radius: 10px; 36 | -webkit-border-bottom-right-radius: 10px; 37 | -moz-border-radius-topright: 10px; 38 | -moz-border-radius-bottomright: 10px; 39 | border-top-right-radius: 10px; 40 | border-bottom-right-radius: 10px; 41 | } 42 | .booklet .b-counter { 43 | bottom:10px; 44 | position:absolute; 45 | display:block; 46 | width:90%; 47 | height:20px; 48 | border-top:1px solid #ddd; 49 | color:#222; 50 | text-align:center; 51 | font-size:12px; 52 | padding:5px 0 0; 53 | background:transparent; 54 | -moz-box-shadow:0px -1px 1px #fff; 55 | -webkit-box-shadow:0px -1px 1px #fff; 56 | box-shadow:0px -1px 1px #fff; 57 | opacity:0.8; 58 | } 59 | .book_wrapper{ 60 | margin:0 auto; 61 | padding-top:50px; 62 | width:905px; 63 | height:540px; 64 | position:relative; 65 | background:transparent url(../images/bg.png) no-repeat 9px 27px; 66 | } 67 | .book_wrapper h1{ 68 | color:orange; 69 | margin:5px 5px 5px 15px; 70 | font-size:24px; 71 | background:transparent url(../images/h1.png) no-repeat bottom left; 72 | padding-bottom:7px; 73 | text-transform: uppercase; 74 | font-weight: normal; 75 | } 76 | .book_wrapper p{ 77 | font-size:15px; 78 | margin:5px 5px 5px 15px; 79 | } 80 | .book_wrapper a.article, 81 | .book_wrapper a.demo{ 82 | background:transparent url(../images/circle.png) no-repeat 50% 0px; 83 | display:block; 84 | width:95px; 85 | height:41px; 86 | text-decoration:none; 87 | outline:none; 88 | font-size:16px; 89 | color:#555; 90 | float:left; 91 | line-height:41px; 92 | padding-left:47px; 93 | } 94 | .book_wrapper a.demo{ 95 | margin-left:50px; 96 | } 97 | .book_wrapper a.article:hover, 98 | .book_wrapper a.demo:hover{ 99 | background-position:50% -41px; 100 | color:#13386a; 101 | } 102 | .book_wrapper img{ 103 | margin:10px 0px 5px 35px; 104 | width:300px; 105 | padding:4px; 106 | border:1px solid #ddd; 107 | -moz-box-shadow:1px 1px 1px #fff; 108 | -webkit-box-shadow:1px 1px 1px #fff; 109 | box-shadow:1px 1px 1px #fff; 110 | } 111 | .booklet .b-wrap-right img{ 112 | border:1px solid #E6E3C2; 113 | } 114 | a#next_page_button, 115 | a#prev_page_button{ 116 | display:none; 117 | position:absolute; 118 | width:41px; 119 | height:40px; 120 | cursor:pointer; 121 | margin-top:-20px; 122 | top:50%; 123 | background:transparent url(../images/buttons.png) no-repeat 0px -40px; 124 | } 125 | a#prev_page_button{ 126 | left:-30px; 127 | } 128 | a#next_page_button{ 129 | right:-30px; 130 | background-position:-41px -40px; 131 | } 132 | a#next_page_button:hover{ 133 | background-position:-41px 0px; 134 | } 135 | a#prev_page_button:hover{ 136 | background-position:0px 0px; 137 | } 138 | -------------------------------------------------------------------------------- /demo/34/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/images/1.jpg -------------------------------------------------------------------------------- /demo/34/images/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/images/10.jpg -------------------------------------------------------------------------------- /demo/34/images/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/images/11.jpg -------------------------------------------------------------------------------- /demo/34/images/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/images/12.jpg -------------------------------------------------------------------------------- /demo/34/images/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/images/13.jpg -------------------------------------------------------------------------------- /demo/34/images/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/images/14.jpg -------------------------------------------------------------------------------- /demo/34/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/images/2.jpg -------------------------------------------------------------------------------- /demo/34/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/images/3.jpg -------------------------------------------------------------------------------- /demo/34/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/images/4.jpg -------------------------------------------------------------------------------- /demo/34/images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/images/5.jpg -------------------------------------------------------------------------------- /demo/34/images/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/images/6.jpg -------------------------------------------------------------------------------- /demo/34/images/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/images/7.jpg -------------------------------------------------------------------------------- /demo/34/images/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/images/8.jpg -------------------------------------------------------------------------------- /demo/34/images/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/images/9.jpg -------------------------------------------------------------------------------- /demo/34/images/ajax-loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/images/ajax-loader.gif -------------------------------------------------------------------------------- /demo/34/images/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/images/bg.png -------------------------------------------------------------------------------- /demo/34/images/buttons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/images/buttons.png -------------------------------------------------------------------------------- /demo/34/images/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/images/circle.png -------------------------------------------------------------------------------- /demo/34/images/h1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/images/h1.png -------------------------------------------------------------------------------- /demo/34/images/left_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/images/left_bg.jpg -------------------------------------------------------------------------------- /demo/34/images/right_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/images/right_bg.jpg -------------------------------------------------------------------------------- /demo/34/images/wood.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/34/images/wood.jpg -------------------------------------------------------------------------------- /demo/35/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 35-Calendar 6 | 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 | 15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /demo/36/css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | body { 6 | background-color: #ef4478; 7 | font: normal 13px/1.5; 8 | font-family: 'Roboto Condensed', sans-serif; 9 | color: #333; 10 | } 11 | .wrapper { 12 | width: 705px; 13 | margin: 20px auto; 14 | padding: 20px; 15 | } 16 | h1 { 17 | display: inline-block; 18 | background-color: #fff; 19 | color: #ef4478; 20 | font-size: 16px; 21 | font-weight: normal; 22 | text-transform: uppercase; 23 | padding: 4px 20px; 24 | float: left; 25 | border-radius: 50px; 26 | } 27 | .clear { 28 | clear: both; 29 | } 30 | .items { 31 | display: block; 32 | margin: 20px 0; 33 | } 34 | .item { 35 | background-color: #fff; 36 | float: left; 37 | margin: 0 10px 10px 0; 38 | width: 205px; 39 | padding: 10px; 40 | 41 | } 42 | .item img { 43 | display: block; 44 | margin: auto; 45 | } 46 | h2 { 47 | font-size: 12px; 48 | display: block; 49 | border-bottom: 1px solid #ccc; 50 | margin: 0 0 10px 0; 51 | padding: 0 0 5px 0; 52 | } 53 | button { 54 | border: 1px solid #ef4478; 55 | padding: 4px 14px; 56 | background-color: #ef4478; 57 | color: #fff; 58 | text-transform: uppercase; 59 | float: right; 60 | margin: 5px 0; 61 | font-weight: 400; 62 | cursor: pointer; 63 | font-family: 'Roboto Condensed', sans-serif; 64 | border-radius: 50px; 65 | 66 | } 67 | button:focus { 68 | outline: none !important; 69 | } 70 | span { 71 | float: right; 72 | } 73 | 74 | p { 75 | font-size: 14px; 76 | } 77 | .shopping-cart { 78 | display: inline-block; 79 | background: url(../img/cart.png) no-repeat 0 0; 80 | width: 24px; 81 | height: 24px; 82 | margin: 0 10px 0 0; 83 | } 84 | -------------------------------------------------------------------------------- /demo/36/img/cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/36/img/cart.png -------------------------------------------------------------------------------- /demo/36/img/m-mtss18tp50-07-29-metronaut-original-imaf74dfgwwbygzx.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/36/img/m-mtss18tp50-07-29-metronaut-original-imaf74dfgwwbygzx.jpeg -------------------------------------------------------------------------------- /demo/36/img/one.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/36/img/one.jpg -------------------------------------------------------------------------------- /demo/36/img/three.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/36/img/three.jpg -------------------------------------------------------------------------------- /demo/36/img/two.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/36/img/two.jpg -------------------------------------------------------------------------------- /demo/36/img/xl-mtss18tp50-13-29-metronaut-original-imaf52zrsevzsth6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/36/img/xl-mtss18tp50-13-29-metronaut-original-imaf52zrsevzsth6.jpeg -------------------------------------------------------------------------------- /demo/36/img/xl-mw216white-metronaut-original-imaf3k542sb52ue6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/local-host-8080/demo-html-css/425bb12ac99146f44ae6d533bbb5f96e5660e454/demo/36/img/xl-mw216white-metronaut-original-imaf3k542sb52ue6.jpeg -------------------------------------------------------------------------------- /demo/36/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 36-Add-Cart 6 | 7 | 8 | 9 | 10 |


11 | 12 |
13 |

ON OFFER

14 | 15 | 16 |
17 | 18 |
19 | 20 |
21 | item 22 |
23 |

ITEM 1

24 |

PRICE: $449

25 | 26 | 27 |
28 | 29 | 30 |
31 | item 32 |
33 |

ITEM 1

34 |

PRICE: $449

35 | 36 | 37 |
38 | 39 | 40 |
41 | item 42 |
43 |

ITEM 1

44 | 45 |

PRICE: $449

46 | 47 | 48 | 49 |
50 | 51 |
52 | 53 |
54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /demo/36/js/scripts.js: -------------------------------------------------------------------------------- 1 | 2 | $('.add-to-cart').on('click', function () { 3 | var cart = $('.shopping-cart'); 4 | var imgtodrag = $(this).parent('.item').find("img").eq(0); 5 | if (imgtodrag) { 6 | var imgclone = imgtodrag.clone() 7 | .offset({ 8 | top: imgtodrag.offset().top, 9 | left: imgtodrag.offset().left 10 | }) 11 | .css({ 12 | 'opacity': '0.8', 13 | 'position': 'absolute', 14 | 'height': '150px', 15 | 'width': '150px', 16 | 'z-index': '100' 17 | }) 18 | .appendTo($('body')) 19 | .animate({ 20 | 'top': cart.offset().top + 10, 21 | 'left': cart.offset().left + 10, 22 | 'width': 75, 23 | 'height': 75 24 | }, 1000, 'easeInOutExpo'); 25 | 26 | setTimeout(function () { 27 | cart.effect("shake", { 28 | times: 2 29 | }, 200); 30 | }, 1500); 31 | 32 | imgclone.animate({ 33 | 'width': 0, 34 | 'height': 0 35 | }, function () { 36 | $(this).detach() 37 | }); 38 | } 39 | }); -------------------------------------------------------------------------------- /demo/37/css/style.css: -------------------------------------------------------------------------------- 1 | /* font-face */ 2 | @font-face { 3 | font-family: 'Roboto'; 4 | font-style: normal; 5 | font-weight: 400; 6 | src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype'); 7 | } 8 | /* variables */ 9 | /* default style */ 10 | body { 11 | background-color: #fff; 12 | color: #333; 13 | font-family: "Roboto", arial, sans-serif; 14 | font-size: 16px; 15 | } 16 | /* common style */ 17 | * { 18 | margin: 0; 19 | padding: 0; 20 | } 21 | *, 22 | *:after, 23 | *:before { 24 | box-sizing: border-box; 25 | } 26 | * { 27 | outline: none; 28 | } 29 | ::-webkit-scrollbar { 30 | display: none; 31 | } 32 | /* */ 33 | .container { 34 | margin: 0 auto; 35 | max-width: 400px; 36 | text-align: center; 37 | } 38 | .selected-item { 39 | margin: 20px 0; 40 | } 41 | /* custom select style */ 42 | .cusSelBlock { 43 | height: 50px; 44 | min-width: 250px; 45 | } 46 | #cusSelectbox { 47 | height: 100%; 48 | width: 100%; 49 | } 50 | .s-hidden { 51 | visibility: hidden; 52 | } 53 | .cusSelBlock { 54 | display: inline-block; 55 | position: relative; 56 | -webkit-perspective: 800px; 57 | perspective: 800px; 58 | } 59 | .selectLabel { 60 | position: absolute; 61 | left: 0; 62 | top: 0; 63 | z-index: 9999; 64 | background-color: #fff; 65 | border: 1px solid #333; 66 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 67 | color: #333; 68 | cursor: pointer; 69 | display: block; 70 | height: 100%; 71 | width: 100%; 72 | letter-spacing: 2px; 73 | line-height: 50px; 74 | padding: 0 50px 0 20px; 75 | text-align: left; 76 | -webkit-transform-style: preserve-3d; 77 | transform-style: preserve-3d; 78 | -webkit-transform-origin: 50% 0%; 79 | transform-origin: 50% 0%; 80 | transition: -webkit-transform 300ms; 81 | transition: transform 300ms; 82 | transition: transform 300ms, -webkit-transform 300ms; 83 | -webkit-backface-visibility: hidden; 84 | -webkit-touch-callout: none; 85 | -webkit-user-select: none; 86 | -moz-user-select: none; 87 | -ms-user-select: none; 88 | user-select: none; 89 | } 90 | .selectLabel:after { 91 | content: '\25BC'; 92 | border-left: 1px solid #333; 93 | color: #333; 94 | font-size: 12px; 95 | line-height: 17px; 96 | padding: 10px; 97 | text-align: center; 98 | position: absolute; 99 | right: 0px; 100 | top: 15%; 101 | height: 70%; 102 | width: 50px; 103 | } 104 | .selectLabel:active { 105 | -webkit-transform: rotateX(30deg); 106 | transform: rotateX(30deg); 107 | } 108 | .selectLabel:active:after { 109 | content: '\25B2'; 110 | } 111 | .selectLabel.active:after { 112 | content: '\25B2'; 113 | } 114 | ::-webkit-scrollbar { 115 | display: none; 116 | } 117 | .options { 118 | position: absolute; 119 | top: 50px; 120 | height: 1px; 121 | width: 100%; 122 | } 123 | .options li { 124 | background-color: #ffffff; 125 | border-left: 1px solid #333; 126 | border-right: 1px solid #333; 127 | border-bottom: 1px solid #333; 128 | cursor: pointer; 129 | display: block; 130 | line-height: 50px; 131 | list-style: none; 132 | opacity: 1; 133 | padding: 0 50px 0 20px; 134 | text-align: left; 135 | transition: -webkit-transform 300ms ease; 136 | transition: transform 300ms ease; 137 | transition: transform 300ms ease, -webkit-transform 300ms ease; 138 | position: absolute; 139 | top: -50px; 140 | left: 0; 141 | z-index: 0; 142 | height: 50px; 143 | width: 100%; 144 | } 145 | .options li:hover, 146 | .options li.active { 147 | background-color: #333; 148 | color: #fff; 149 | } 150 | .options li:nth-child(1) { 151 | -webkit-transform: translateY(2px); 152 | transform: translateY(2px); 153 | z-index: 6; 154 | } 155 | .options li:nth-child(2) { 156 | -webkit-transform: translateY(4px); 157 | transform: translateY(4px); 158 | z-index: 5; 159 | } 160 | .options li:nth-child(3) { 161 | z-index: 4; 162 | } 163 | .options li:nth-child(4) { 164 | z-index: 3; 165 | } 166 | .options li:nth-child(5) { 167 | z-index: 2; 168 | } 169 | .options li:nth-child(6) { 170 | z-index: 1; 171 | } 172 | /**/ 173 | .feaBlock { 174 | margin: 20px 0; 175 | text-align: left; 176 | } 177 | -------------------------------------------------------------------------------- /demo/37/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 37-SelectBox 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 |

You Selected Country : Select

16 |
17 | 18 | 26 | 27 |
28 |
    29 |
  1. Up & Down key works in list itesms.
    2. 30 |
  2. Enter works in list items.
    3. 31 |
  3. Mouse Click works in list items.
    4. 32 |
  4. Scrollbar hide, but you can scroll the list items.
    5. 33 |
34 |
35 | 36 |
37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /demo/37/js/script.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | 3 | var defaultselectbox = $('#cusSelectbox'); 4 | var numOfOptions = $('#cusSelectbox').children('option').length; 5 | 6 | // hide select tag 7 | defaultselectbox.addClass('s-hidden'); 8 | 9 | // wrapping default selectbox into custom select block 10 | defaultselectbox.wrap('
'); 11 | 12 | // creating custom select div 13 | defaultselectbox.after('
'); 14 | 15 | // getting default select box selected value 16 | $('.selectLabel').text(defaultselectbox.children('option').eq(0).text()); 17 | 18 | // appending options to custom un-ordered list tag 19 | var cusList = $('