├── README.md ├── 3.回到顶部 ├── img.jpg ├── gotop.png ├── gotop.css └── gotop.html ├── 4.渐变轮播图 ├── lunbo1.png ├── lunbo2.png ├── lunbo3.png ├── nexImg.png ├── preImg.png ├── style.css └── index.html ├── 6.简单左右轮播图 ├── lunbo1.png ├── lunbo2.png ├── lunbo3.png ├── lunbo4.png ├── form.css └── index.html ├── 7.仿网易云轮播图 ├── image │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── nexImg.png │ └── preImg.png ├── form.css └── index.html ├── 8.图片碎片合成放大 ├── image │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ ├── 9.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 13.jpg │ ├── 14.jpg │ ├── 15.jpg │ ├── 16.jpg │ ├── 17.jpg │ ├── 18.jpg │ ├── 19.jpg │ ├── 20.jpg │ ├── 21.jpg │ ├── 22.jpg │ ├── 23.jpg │ ├── 24.jpg │ └── 25.jpg ├── test.css └── test.html ├── 1.图片炫酷效果 ├── 纯html和css图片两张左右显示一 │ ├── img.jpg │ ├── index.html │ └── cssform.css ├── 纯html和css图片两张左右显示二 │ ├── img.jpg │ ├── index.html │ └── cssform.css ├── 纯html和css实现图片大小动态重合 │ ├── img.jpg │ ├── index.html │ └── cssform.css ├── 纯html和css实现图片效果 翻转一 │ ├── img.jpg │ ├── index.html │ └── cssform.css ├── 纯html和css实现图片效果 翻转二 │ ├── img.jpg │ ├── index.html │ └── cssform.css ├── 纯html和css实现图片旋转几十度 │ ├── img.jpg │ ├── index.html │ └── cssform.css ├── 纯html和css实现图片特效一，上滑 │ ├── img.jpg │ ├── index.html │ └── cssform.css ├── 纯html和css实现图片特效二，下滑 │ ├── img.jpg │ ├── index.html │ └── cssform.css ├── 纯html和css实现图片特效三，中间展开 │ ├── img.jpg │ ├── index.html │ └── cssform.css └── 纯html和css实现图片旋转几十度，内部照片从上往下滑动 │ ├── img.jpg │ ├── index.html │ └── cssform.css ├── 2.纯css实现垂直手风琴菜单列表 ├── style.css └── index.html ├── LICENSE └── 5.时间倒计时 └── clock.html /README.md: -------------------------------------------------------------------------------- 1 | # MyAwesomeCode 2 | 保存我B站上的前端炫酷代码 3 | 4 | https://www.bilibili.com/ 5 | -------------------------------------------------------------------------------- /3.回到顶部/img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/3.回到顶部/img.jpg -------------------------------------------------------------------------------- /3.回到顶部/gotop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/3.回到顶部/gotop.png -------------------------------------------------------------------------------- /4.渐变轮播图/lunbo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/4.渐变轮播图/lunbo1.png -------------------------------------------------------------------------------- /4.渐变轮播图/lunbo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/4.渐变轮播图/lunbo2.png -------------------------------------------------------------------------------- /4.渐变轮播图/lunbo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/4.渐变轮播图/lunbo3.png -------------------------------------------------------------------------------- /4.渐变轮播图/nexImg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/4.渐变轮播图/nexImg.png -------------------------------------------------------------------------------- /4.渐变轮播图/preImg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/4.渐变轮播图/preImg.png -------------------------------------------------------------------------------- /6.简单左右轮播图/lunbo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/6.简单左右轮播图/lunbo1.png -------------------------------------------------------------------------------- /6.简单左右轮播图/lunbo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/6.简单左右轮播图/lunbo2.png -------------------------------------------------------------------------------- /6.简单左右轮播图/lunbo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/6.简单左右轮播图/lunbo3.png -------------------------------------------------------------------------------- /6.简单左右轮播图/lunbo4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/6.简单左右轮播图/lunbo4.png -------------------------------------------------------------------------------- /7.仿网易云轮播图/image/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/7.仿网易云轮播图/image/1.jpg -------------------------------------------------------------------------------- /7.仿网易云轮播图/image/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/7.仿网易云轮播图/image/2.jpg -------------------------------------------------------------------------------- /7.仿网易云轮播图/image/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/7.仿网易云轮播图/image/3.jpg -------------------------------------------------------------------------------- /7.仿网易云轮播图/image/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/7.仿网易云轮播图/image/4.jpg -------------------------------------------------------------------------------- /7.仿网易云轮播图/image/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/7.仿网易云轮播图/image/5.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/1.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/2.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/3.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/4.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/5.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/6.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/7.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/8.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/9.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/10.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/11.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/12.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/13.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/14.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/15.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/16.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/17.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/18.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/19.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/20.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/21.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/22.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/23.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/24.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/24.jpg -------------------------------------------------------------------------------- /8.图片碎片合成放大/image/25.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/8.图片碎片合成放大/image/25.jpg -------------------------------------------------------------------------------- /7.仿网易云轮播图/image/nexImg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/7.仿网易云轮播图/image/nexImg.png -------------------------------------------------------------------------------- /7.仿网易云轮播图/image/preImg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/7.仿网易云轮播图/image/preImg.png -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css图片两张左右显示一/img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/1.图片炫酷效果/纯html和css图片两张左右显示一/img.jpg -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css图片两张左右显示二/img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/1.图片炫酷效果/纯html和css图片两张左右显示二/img.jpg -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片大小动态重合/img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/1.图片炫酷效果/纯html和css实现图片大小动态重合/img.jpg -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片效果 翻转一/img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/1.图片炫酷效果/纯html和css实现图片效果 翻转一/img.jpg -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片效果 翻转二/img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/1.图片炫酷效果/纯html和css实现图片效果 翻转二/img.jpg -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片旋转几十度/img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/1.图片炫酷效果/纯html和css实现图片旋转几十度/img.jpg -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片特效一，上滑/img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/1.图片炫酷效果/纯html和css实现图片特效一，上滑/img.jpg -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片特效二，下滑/img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/1.图片炫酷效果/纯html和css实现图片特效二，下滑/img.jpg -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片特效三，中间展开/img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/1.图片炫酷效果/纯html和css实现图片特效三，中间展开/img.jpg -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片旋转几十度，内部照片从上往下滑动/img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yewanting/MyAwesomeCode/HEAD/1.图片炫酷效果/纯html和css实现图片旋转几十度，内部照片从上往下滑动/img.jpg -------------------------------------------------------------------------------- /6.简单左右轮播图/form.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | .total{ 6 | height: 250px; 7 | width: 655px; 8 | overflow: hidden; 9 | } 10 | #banner{ 11 | height: 250px; 12 | width: 3275px; /*655×4 = 3275*/ 13 | } 14 | li{ 15 | float: left; 16 | width: 655px; 17 | height: 250px; 18 | list-style: none; 19 | } 20 | img{ 21 | width: 100%; 22 | height: 100%; 23 | } -------------------------------------------------------------------------------- /3.回到顶部/gotop.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background: url("img.jpg"); 3 | background-repeat: repeat-y; 4 | background-size: 700px 600px; 5 | background-position: 50% 0 ; 6 | height: 2000px; 7 | } 8 | #gotop{ 9 | position: fixed; 10 | display: none; 11 | right: 0; 12 | bottom: 0; 13 | } 14 | #gotop img{ 15 | width: 80px; 16 | height: 200px; 17 | } 18 | #gotop img:hover{ 19 | cursor: pointer; 20 | } -------------------------------------------------------------------------------- /8.图片碎片合成放大/test.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #c1e3fa; 3 | } 4 | 5 | ul{ 6 | list-style: none; 7 | margin: auto; 8 | position: absolute; 9 | left: 0; 10 | right: 0; 11 | top: 0; 12 | bottom: 0; 13 | /* border: 1px solid red; */ 14 | } 15 | 16 | .liclass{ 17 | position: absolute; 18 | background-color: #fff; 19 | transition: transform 1500ms ease-out; 20 | } 21 | 22 | .divclass{ 23 | background-size: 100% 100%; 24 | transition: transform 1500ms ease-out; 25 | } -------------------------------------------------------------------------------- /7.仿网易云轮播图/form.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: rgb(119,115,110); 3 | } 4 | 5 | ul{ 6 | list-style:none; 7 | position: absolute; 8 | padding:0; 9 | top:0; 10 | left:0; 11 | right:0; 12 | bottom:0; 13 | margin:auto; 14 | width:800px; 15 | height:200px; 16 | } 17 | 18 | 19 | ul:hover{ 20 | cursor: pointer; 21 | } 22 | 23 | 24 | li{ 25 | float:left; 26 | position: absolute; 27 | left: 0px; 28 | transition-duration: 0.4s; 29 | } 30 | 31 | div{ 32 | width:50px; 33 | height:5px; 34 | border:1px solid rgb(156,156,156); 35 | bottom: -80px; 36 | position:absolute; 37 | background-color:white; 38 | } -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片效果 翻转一/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 炫酷图片效果 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 | Image-1 13 |
14 |
15 |

Hello World!

16 |

Do you want to learn it?Follow me!

17 |
18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片效果 翻转二/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 炫酷图片效果 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 | Image-1 13 |
14 |
15 |

Hello World!

16 |

Do you want to learn it?Follow me!

17 |
18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片旋转几十度/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 炫酷图片效果 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 |

Hello World!

13 |

Do you want to learn it?Follow me!

14 |
15 |
16 | Image-1 17 |
18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片旋转几十度，内部照片从上往下滑动/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 炫酷图片效果 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 |

Hello World!

13 |

Do you want to learn it?Follow me!

14 |
15 |
16 | Image-1 17 |
18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片特效一，上滑/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 炫酷图片效果 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 | Image-1 13 |
14 |
15 |

Hello World!

16 |

Do you want to learn it?Follow me!

17 |
18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片特效三，中间展开/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 炫酷图片效果 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 | Image-1 13 |
14 |
15 |

Hello World!

16 |

Do you want to learn it?Follow me!

17 |
18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片特效二，下滑/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 炫酷图片效果 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 | Image-1 13 |
14 |
15 |

Hello World!

16 |

Do you want to learn it?Follow me!

17 |
18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css图片两张左右显示一/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 炫酷图片效果 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 |

Hello World!

13 |
Do you want to learn it?
14 |
Follow me!
15 |
16 |
17 | Image-1 18 |
19 |
20 |
21 | 22 | -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css图片两张左右显示二/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 炫酷图片效果 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 |

Hello World!

13 |
Do you want to learn it?
14 |
Follow me!
15 |
16 |
17 | Image-1 18 |
19 |
20 |
21 | 22 | -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片大小动态重合/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 炫酷图片效果 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 |

Hello World!

13 |
Do you want to learn it?
14 |
Follow me!
15 |
16 |
17 | Image-1 18 |
19 |
20 |
21 | 22 | -------------------------------------------------------------------------------- /2.纯css实现垂直手风琴菜单列表/style.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | background: #f192dd; 4 | } 5 | .box { 6 | margin: 100px auto; 7 | width: 20%; 8 | background-color: #2a9ead; 9 | 10 | } 11 | .box .box-item { 12 | border-bottom: 1px solid #666; 13 | color: #eee; 14 | } 15 | .box .title { 16 | margin: 0; 17 | padding: 10px; 18 | background-color: #2a9ead; 19 | } 20 | .box-item-content{ 21 | height: 0; 22 | overflow: hidden; 23 | background-color: rgb(54, 49, 49); 24 | margin: 0; 25 | padding-left: 20px; 26 | transition: 0.5s; 27 | } 28 | ul{ 29 | list-style: none; 30 | } 31 | ul li{ 32 | padding-top: 5px; 33 | } 34 | .box:hover .box-item:hover .box-item-content { 35 | height: 100px; 36 | } 37 | 38 | 39 | -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片旋转几十度/cssform.css: -------------------------------------------------------------------------------- 1 | html, body {border: 0; margin: 0; padding: 0;} 2 | *{ 3 | margin: 0; 4 | padding:0; 5 | box-sizing: border-box; 6 | } 7 | body {background-color:gray; } 8 | .box{ 9 | margin-top: 100px; 10 | margin-left: 200px; 11 | width: 400px; 12 | height: 400px; 13 | float: left; 14 | position: relative; 15 | overflow: hidden; 16 | text-align: center; 17 | border: 4px solid #fff; 18 | perspective: 500px 19 | } 20 | .box .textdiv{ 21 | position: absolute; 22 | opacity: 0.8; 23 | background-color: #fff; 24 | color: #111111; 25 | width: 100%; 26 | height: 100%; 27 | z-index: -100; 28 | } 29 | .box img{ 30 | box-sizing: border-box; 31 | width: 400px; 32 | height: 400px; 33 | transition: 0.6s; 34 | } 35 | .box:hover img{ 36 | transform: rotateX(70deg); 37 | transform-origin: center bottom 0; 38 | } 39 | 40 | h3{ 41 | font-size: 20px; 42 | margin-top: 30%; 43 | } 44 | 45 | p{ 46 | font-weight: 300; 47 | line-height: 20px; 48 | font-size: 14px; 49 | margin-bottom: 15px; 50 | } 51 | -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片特效一，上滑/cssform.css: -------------------------------------------------------------------------------- 1 | html, body {border: 0; margin: 0; padding: 0;} 2 | *{ 3 | margin: 0; 4 | padding:0; 5 | box-sizing: border-box; 6 | } 7 | body {background-color:gray; } 8 | .box{ 9 | margin-top: 100px; 10 | margin-left: 200px; 11 | width: 400px; 12 | height: 400px; 13 | float: left; 14 | position: relative; 15 | overflow: hidden; 16 | text-align: center; 17 | border: 4px solid #fff;} 18 | .box .textdiv{ 19 | opacity: 0.9; 20 | position: absolute; 21 | top: -100%; 22 | transition: 0.6s; 23 | background-color: #fff; 24 | width: 100%; 25 | height: 100%; 26 | } 27 | .box img{ 28 | box-sizing: border-box; 29 | width: 400px; 30 | height: 400px; 31 | transition: 0.6s; 32 | } 33 | .box:hover img{ 34 | transform: scale(1.3); 35 | } 36 | h3{ 37 | font-size: 20px; 38 | margin-top: 50%; 39 | } 40 | 41 | p{ 42 | font-weight: 300; 43 | line-height: 20px; 44 | font-size: 14px; 45 | margin-bottom: 15px; 46 | } 47 | .box:hover .textdiv{ 48 | top: 0; 49 | height: 100%; 50 | width: 100%; 51 | padding: 20px; 52 | } -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片特效二，下滑/cssform.css: -------------------------------------------------------------------------------- 1 | html, body {border: 0; margin: 0; padding: 0;} 2 | *{ 3 | margin: 0; 4 | padding:0; 5 | box-sizing: border-box; 6 | } 7 | body {background-color:gray; } 8 | .box{ 9 | margin-top: 100px; 10 | margin-left: 200px; 11 | width: 400px; 12 | height: 400px; 13 | float: left; 14 | position: relative; 15 | overflow: hidden; 16 | text-align: center; 17 | border: 4px solid #fff;} 18 | .box .textdiv{ 19 | opacity: 0.9; 20 | position: absolute; 21 | bottom: -100%; 22 | transition: 0.6s; 23 | background-color: #fff; 24 | width: 100%; 25 | height: 100%; 26 | } 27 | .box img{ 28 | box-sizing: border-box; 29 | width: 400px; 30 | height: 400px; 31 | transition: 0.6s; 32 | } 33 | .box:hover img{ 34 | transform: scale(1.3); 35 | } 36 | h3{ 37 | font-size: 20px; 38 | margin-top: 50%; 39 | } 40 | 41 | p{ 42 | font-weight: 300; 43 | line-height: 20px; 44 | font-size: 14px; 45 | margin-bottom: 15px; 46 | } 47 | .box:hover .textdiv{ 48 | bottom: 0; 49 | height: 100%; 50 | width: 100%; 51 | padding: 20px; 52 | } -------------------------------------------------------------------------------- /3.回到顶部/gotop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | gotop 6 | 7 | 8 | 9 |
10 | gotop 11 |
12 | 34 | 35 | -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片效果 翻转一/cssform.css: -------------------------------------------------------------------------------- 1 | html, body {border: 0; margin: 0; padding: 0;} 2 | *{ 3 | margin: 0; 4 | padding:0; 5 | box-sizing: border-box; 6 | } 7 | body {background-color:gray; } 8 | .box{ 9 | margin-top: 100px; 10 | margin-left: 200px; 11 | width: 400px; 12 | height: 400px; 13 | float: left; 14 | position: relative; 15 | overflow: hidden; 16 | text-align: center; 17 | border: 4px solid #fff; 18 | perspective: 500px 19 | } 20 | .box .textdiv{ 21 | position: absolute; 22 | opacity: 0; 23 | background-color: #fff; 24 | color: #111111; 25 | top:-100%; 26 | width: 100%; 27 | height: 100%; 28 | transition: 0.6s; 29 | transform: rotateX(360deg); 30 | } 31 | .box img{ 32 | box-sizing: border-box; 33 | width: 400px; 34 | height: 400px; 35 | transition: 0.6s; 36 | } 37 | .box:hover img{ 38 | opacity: 0; 39 | } 40 | .box:hover .textdiv{ 41 | opacity: 0.9; 42 | top:0; 43 | transform: none; 44 | 45 | } 46 | h3{ 47 | font-size: 20px; 48 | margin-top: 30%; 49 | } 50 | 51 | p{ 52 | font-weight: 300; 53 | line-height: 20px; 54 | font-size: 14px; 55 | margin-bottom: 15px; 56 | } 57 | -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片旋转几十度，内部照片从上往下滑动/cssform.css: -------------------------------------------------------------------------------- 1 | html, body {border: 0; margin: 0; padding: 0;} 2 | *{ 3 | margin: 0; 4 | padding:0; 5 | box-sizing: border-box; 6 | } 7 | body {background-color:gray; } 8 | .box{ 9 | margin-top: 100px; 10 | margin-left: 200px; 11 | width: 400px; 12 | height: 400px; 13 | float: left; 14 | position: relative; 15 | overflow: hidden; 16 | text-align: center; 17 | border: 4px solid #fff; 18 | perspective: 500px 19 | } 20 | .box .textdiv{ 21 | position: absolute; 22 | opacity: 0; 23 | background-color: #fff; 24 | color: #111111; 25 | top:-100%; 26 | width: 100%; 27 | height: 100%; 28 | z-index: -1; 29 | transition: 0.6s; 30 | } 31 | .box img{ 32 | box-sizing: border-box; 33 | width: 400px; 34 | height: 400px; 35 | transition: 0.6s; 36 | } 37 | .box:hover img{ 38 | transform: rotateX(70deg); 39 | transform-origin: center bottom 0; 40 | } 41 | .box:hover .textdiv{ 42 | opacity: 0.9; 43 | top:0; 44 | 45 | } 46 | h3{ 47 | font-size: 20px; 48 | margin-top: 30%; 49 | } 50 | 51 | p{ 52 | font-weight: 300; 53 | line-height: 20px; 54 | font-size: 14px; 55 | margin-bottom: 15px; 56 | } 57 | -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片效果 翻转二/cssform.css: -------------------------------------------------------------------------------- 1 | html, body {border: 0; margin: 0; padding: 0;} 2 | *{ 3 | margin: 0; 4 | padding:0; 5 | box-sizing: border-box; 6 | } 7 | body {background-color:gray; } 8 | .box{ 9 | margin-top: 100px; 10 | margin-left: 200px; 11 | width: 400px; 12 | height: 400px; 13 | float: left; 14 | position: relative; 15 | overflow: hidden; 16 | text-align: center; 17 | border: 4px solid #fff; 18 | perspective: 500px 19 | } 20 | .box .textdiv{ 21 | position: absolute; 22 | opacity: 0; 23 | background-color: #fff; 24 | color: #111111; 25 | top:-100%; 26 | width: 100%; 27 | height: 100%; 28 | transition: 0.6s; 29 | transform: rotateX(360deg); 30 | } 31 | .box img{ 32 | box-sizing: border-box; 33 | width: 400px; 34 | height: 400px; 35 | transition: 0.6s; 36 | } 37 | .box:hover img{ 38 | width: 0; 39 | height: 0; 40 | opacity: 0; 41 | } 42 | .box:hover .textdiv{ 43 | opacity: 0.9; 44 | top:0; 45 | transform: none; 46 | 47 | } 48 | h3{ 49 | font-size: 20px; 50 | margin-top: 30%; 51 | } 52 | 53 | p{ 54 | font-weight: 300; 55 | line-height: 20px; 56 | font-size: 14px; 57 | margin-bottom: 15px; 58 | } 59 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | This is free and unencumbered software released into the public domain. 2 | 3 | Anyone is free to copy, modify, publish, use, compile, sell, or 4 | distribute this software, either in source code form or as a compiled 5 | binary, for any purpose, commercial or non-commercial, and by any 6 | means. 7 | 8 | In jurisdictions that recognize copyright laws, the author or authors 9 | of this software dedicate any and all copyright interest in the 10 | software to the public domain. We make this dedication for the benefit 11 | of the public at large and to the detriment of our heirs and 12 | successors. We intend this dedication to be an overt act of 13 | relinquishment in perpetuity of all present and future rights to this 14 | software under copyright law. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | 24 | For more information, please refer to 25 | -------------------------------------------------------------------------------- /2.纯css实现垂直手风琴菜单列表/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 纯HTML和CSS实现垂直手风琴菜单列表 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |

Account

16 |
    17 |
  • language
    • 18 |
  • love
    • 19 |
  • picture
    • 20 |
21 |
22 |
23 |

Messages

24 |
    25 |
  • language
    • 26 |
  • love
    • 27 |
  • picture
    • 28 |
29 |
30 |
31 |

Settings

32 |
    33 |
  • language
    • 34 |
  • love
    • 35 |
  • picture
    • 36 |
37 |
38 |
39 |

Logout

40 |
    41 |
  • language
    • 42 |
  • love
    • 43 |
  • picture
    • 44 |
45 |
46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片特效三，中间展开/cssform.css: -------------------------------------------------------------------------------- 1 | html, body {border: 0; margin: 0; padding: 0;} 2 | *{ 3 | margin: 0; 4 | padding:0; 5 | box-sizing: border-box; 6 | } 7 | body {background-color: gray; } 8 | .box{ 9 | margin-top: 100px; 10 | margin-left: 200px; 11 | width: 400px; 12 | height: 400px; 13 | float: left; 14 | position: relative; 15 | overflow: hidden; 16 | text-align: center; 17 | border: 4px solid #fff;} 18 | .box .textdiv{ 19 | opacity: 0.9; 20 | position: absolute; 21 | top:50%; 22 | left: 50%; 23 | transition: 0.6s; 24 | background-color: #fff; 25 | width: 0%; 26 | height: 0; 27 | } 28 | .box img{ 29 | box-sizing: border-box; 30 | width: 400px; 31 | height: 400px; 32 | transition: 0.6s; 33 | } 34 | .box:hover img{ 35 | transform: scale(1.3); 36 | } 37 | h3{ 38 | font-size: 20px; 39 | margin-top: 50%; 40 | opacity: 0; 41 | } 42 | 43 | p{ 44 | font-weight: 300; 45 | line-height: 20px; 46 | font-size: 14px; 47 | margin-bottom: 15px; 48 | opacity: 0; 49 | } 50 | .box:hover .textdiv{ 51 | top:0; 52 | left: 0; 53 | height: 100%; 54 | width: 100%; 55 | padding: 20px; 56 | } 57 | .box:hover h3{ 58 | opacity: 0.9; 59 | } 60 | .box:hover p{ 61 | opacity: 0.9; 62 | } -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css图片两张左右显示一/cssform.css: -------------------------------------------------------------------------------- 1 | html, body {border: 0; margin: 0; padding: 0;} 2 | *{ 3 | margin: 0; 4 | padding:0; 5 | box-sizing: border-box; 6 | } 7 | body {background-color:gray; } 8 | .box{ 9 | margin-top: 100px; 10 | margin-left: 200px; 11 | width: 400px; 12 | height: 400px; 13 | float: left; 14 | overflow: hidden; 15 | position: relative; 16 | text-align: center; 17 | border: 4px solid #fff; 18 | } 19 | .box .textdiv{ 20 | position: absolute; 21 | opacity: 1; 22 | background-color: white; 23 | color: #111111; 24 | opacity: 0; 25 | width: 30%; 26 | height: 100%; 27 | transition: 0.6s; 28 | z-index: 100; 29 | transform: rotateY(-90deg); 30 | } 31 | .box img{ 32 | box-sizing: border-box; 33 | width: 390px; 34 | height: 390px; 35 | transition: 0.6s; 36 | } 37 | .box:hover img{ 38 | transform: translateX(30%); 39 | opacity: 1; 40 | } 41 | .box:hover .textdiv{ 42 | opacity: 1; 43 | transform: none; 44 | background-color: white; 45 | 46 | } 47 | h3{ 48 | font-size: 20px; 49 | margin-top: 30%; 50 | margin-bottom: 15px; 51 | display: none; 52 | } 53 | 54 | .textdiv div{ 55 | font-weight: 300; 56 | font-size: 14px; 57 | display: none; 58 | } 59 | .box:hover h3{ 60 | display: block; 61 | } 62 | .box:hover .textdiv div{ 63 | display: block; 64 | } 65 | -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css图片两张左右显示二/cssform.css: -------------------------------------------------------------------------------- 1 | html, body {border: 0; margin: 0; padding: 0;} 2 | *{ 3 | margin: 0; 4 | padding:0; 5 | box-sizing: border-box; 6 | } 7 | body {background-color:gray; } 8 | .box{ 9 | margin-top: 100px; 10 | margin-left: 200px; 11 | width: 400px; 12 | height: 400px; 13 | float: left; 14 | overflow: hidden; 15 | position: relative; 16 | text-align: center; 17 | border: 4px solid #fff; 18 | } 19 | .box .textdiv{ 20 | position: absolute; 21 | opacity: 1; 22 | background-color: white; 23 | color: #111111; 24 | opacity: 0; 25 | width: 30%; 26 | height: 100%; 27 | transition: 0.6s; 28 | z-index: 100; 29 | left: -30%; 30 | } 31 | .box img{ 32 | box-sizing: border-box; 33 | width: 390px; 34 | height: 390px; 35 | transition: 0.6s; 36 | } 37 | .box:hover img{ 38 | transform: translateX(30%); 39 | opacity: 1; 40 | } 41 | .box:hover .textdiv{ 42 | opacity: 1; 43 | transform: none; 44 | background-color: white; 45 | transform: translateX(100%); 46 | } 47 | h3{ 48 | font-size: 20px; 49 | margin-top: 30%; 50 | margin-bottom: 15px; 51 | display: none; 52 | } 53 | 54 | .textdiv div{ 55 | font-weight: 300; 56 | font-size: 14px; 57 | display: none; 58 | } 59 | .box:hover h3{ 60 | display: block; 61 | } 62 | .box:hover .textdiv div{ 63 | display: block; 64 | } 65 | -------------------------------------------------------------------------------- /1.图片炫酷效果/纯html和css实现图片大小动态重合/cssform.css: -------------------------------------------------------------------------------- 1 | html, body {border: 0; margin: 0; padding: 0;} 2 | *{ 3 | margin: 0; 4 | padding:0; 5 | box-sizing: border-box; 6 | } 7 | body {background-color:gray; } 8 | .box{ 9 | margin-top: 100px; 10 | margin-left: 200px; 11 | width: 400px; 12 | height: 400px; 13 | float: left; 14 | position: relative; 15 | text-align: center; 16 | /* border: 4px solid #fff; */ 17 | } 18 | .box .textdiv{ 19 | position: absolute; 20 | opacity: 0; 21 | background-color: gray; 22 | color: #111111; 23 | transform: translateX(100%); 24 | width: 100%; 25 | height: 100%; 26 | transition: 0.6s; 27 | } 28 | .box img{ 29 | box-sizing: border-box; 30 | width: 390px; 31 | height: 390px; 32 | transition: 0.6s; 33 | border:4px solid #fff ; 34 | } 35 | .box:hover img{ 36 | position: relative; 37 | transform:scale(0.5) translateX(-100%); 38 | opacity: 1; 39 | z-index: 100; 40 | } 41 | .box:hover .textdiv{ 42 | opacity: 0.9; 43 | right:0; 44 | transform: none; 45 | background-color: white; 46 | 47 | } 48 | h3{ 49 | font-size: 20px; 50 | margin-top: 30%; 51 | margin-bottom: 15px; 52 | display: none; 53 | } 54 | 55 | .textdiv div{ 56 | font-weight: 300; 57 | font-size: 14px; 58 | display: none; 59 | } 60 | .box:hover h3{ 61 | display: block; 62 | } 63 | .box:hover .textdiv div{ 64 | display: block; 65 | } 66 | -------------------------------------------------------------------------------- /6.简单左右轮播图/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 18 |
19 | 20 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /4.渐变轮播图/style.css: -------------------------------------------------------------------------------- 1 | .bannercontainer{ 2 | width: 100%; 3 | position: relative; 4 | height: 250px; 5 | } 6 | .bannercontainer #banner ul{ 7 | list-style: none; 8 | padding-left: 0; 9 | 10 | } 11 | 12 | .bannercontainer #banner ul li{ 13 | position: absolute; 14 | } 15 | 16 | .bannercontainer #banner ul li img{ 17 | width: 100%; 18 | height: 250px; 19 | } 20 | 21 | .bannercontainer #nexImg ,.bannercontainer #preImg{ 22 | margin: 10px; 23 | position: absolute; 24 | opacity: 0.5; 25 | top:50%; 26 | z-index: 10; 27 | 28 | } 29 | .bannercontainer #nexImg img ,.bannercontainer #preImg img 30 | { 31 | width: 15px; 32 | height: 20px; 33 | opacity: 0.8; 34 | } 35 | .bannercontainer #nexImg{ 36 | right: 0; 37 | } 38 | .bannercontainer #nexImg:hover,.bannercontainer #preImg:hover{ 39 | cursor: pointer; 40 | opacity: 0.5; 41 | } 42 | .bannercontainer .jumpBtn{ 43 | position: absolute; 44 | bottom: 10px; 45 | left: 45%; 46 | } 47 | .bannercontainer .jumpBtn ul{ 48 | margin-bottom:0; 49 | padding: 0; 50 | list-style: none; 51 | } 52 | .bannercontainer .jumpBtn ul li{ 53 | font-size: 12px; 54 | text-align: center; 55 | display: inline-block; 56 | width: 15px; 57 | height: 15px; 58 | border-radius: 50px; 59 | opacity: 0.4; 60 | } 61 | .on{ 62 | opacity: 1; 63 | display: block; 64 | width: 100%; 65 | height: 250px; 66 | transition: 2s; 67 | 68 | } 69 | .out{ 70 | opacity: 0; 71 | display: block; 72 | width: 100%; 73 | height: 250px; 74 | transition: 2s; 75 | } -------------------------------------------------------------------------------- /5.时间倒计时/clock.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Canvas倒计时 6 | 21 | 22 | 23 | 24 |
60
25 | 26 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /4.渐变轮播图/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 轮播图 7 | 8 | 9 | 10 |
11 | 24 | 25 |
26 | 27 |
28 | 29 |
30 | 31 |
32 | 33 |
34 |
    35 |
  • 1
    • 36 |
  • 2
    • 37 |
  • 3
    • 38 |
39 |
40 |
41 | 112 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /8.图片碎片合成放大/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 118 | -------------------------------------------------------------------------------- /7.仿网易云轮播图/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | --------------------------------------------------------------------------------