├── README.md ├── demoImage ├── ball.gif ├── blur.png ├── flash.gif ├── gradient.png ├── label.png ├── light.gif └── progress.gif ├── index.html └── style ├── ball.css ├── blur.css ├── flash.css ├── gradient.css ├── label.css ├── light.css └── progress.css /README.md: -------------------------------------------------------------------------------- 1 | # css3-collection 2 | CSS动效集锦 3 | ## 近大远小 4 | ![Image text](https://github.com/penghuwan/css3-collection/blob/master/demoImage/ball.gif) 5 | 6 | ## 瀚海茫茫 7 | ![Image text](https://github.com/penghuwan/css3-collection/blob/master/demoImage/blur.png) 8 | 9 | ## 浮光掠影 10 | ![Image text](https://github.com/penghuwan/css3-collection/blob/master/demoImage/flash.gif) 11 | 12 | ## 颜色渐变 13 | ![Image text](https://github.com/penghuwan/css3-collection/blob/master/demoImage/gradient.png) 14 | 15 | ## 斜角标签 16 | ![Image text](https://github.com/penghuwan/css3-collection/blob/master/demoImage/label.png) 17 | 18 | ## 圆环进度 19 | ![Image text](https://github.com/penghuwan/css3-collection/blob/master/demoImage/progress.gif) 20 | 21 | ## 梵唱佛光 22 | ![Image text](https://github.com/penghuwan/css3-collection/blob/master/demoImage/light.gif) 23 | -------------------------------------------------------------------------------- /demoImage/ball.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangchenxi-coder/css3-collection/ef681d6f4f877705442720c140c026c809ef8341/demoImage/ball.gif -------------------------------------------------------------------------------- /demoImage/blur.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangchenxi-coder/css3-collection/ef681d6f4f877705442720c140c026c809ef8341/demoImage/blur.png -------------------------------------------------------------------------------- /demoImage/flash.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangchenxi-coder/css3-collection/ef681d6f4f877705442720c140c026c809ef8341/demoImage/flash.gif -------------------------------------------------------------------------------- /demoImage/gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangchenxi-coder/css3-collection/ef681d6f4f877705442720c140c026c809ef8341/demoImage/gradient.png -------------------------------------------------------------------------------- /demoImage/label.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangchenxi-coder/css3-collection/ef681d6f4f877705442720c140c026c809ef8341/demoImage/label.png -------------------------------------------------------------------------------- /demoImage/light.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangchenxi-coder/css3-collection/ef681d6f4f877705442720c140c026c809ef8341/demoImage/light.gif -------------------------------------------------------------------------------- /demoImage/progress.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangchenxi-coder/css3-collection/ef681d6f4f877705442720c140c026c809ef8341/demoImage/progress.gif -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /style/ball.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | @keyframes small { 4 | from { 5 | transform: scale(1); 6 | } 7 | to { 8 | transform: scale(0.4); 9 | } 10 | } 11 | .ball { 12 | width: 200px; 13 | height: 200px; 14 | border-radius: 50%; 15 | background: blueviolet; 16 | animation: small 2s ease-in-out infinite alternate; 17 | } -------------------------------------------------------------------------------- /style/blur.css: -------------------------------------------------------------------------------- 1 | .common-img { 2 | width: 100px; 3 | } 4 | .blur { 5 | width: 100px; 6 | filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ 7 | 8 | -webkit-filter: blur(2px); /* Chrome, Opera */ 9 | -moz-filter: blur(2px); 10 | -ms-filter: blur(2px); 11 | filter: blur(2px); 12 | 13 | filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=2, MakeShadow=false); /* IE6~IE9 */ 14 | } -------------------------------------------------------------------------------- /style/flash.css: -------------------------------------------------------------------------------- 1 | .flash { 2 | position: relative; 3 | width: 500px; 4 | } 5 | .flash img { 6 | width: 100%; 7 | } 8 | .flash-bar { 9 | position: absolute; 10 | left:-100px; 11 | width: 20px; 12 | height: 100%; 13 | background: #fff; 14 | opacity: 0.5; 15 | transform: skewX(-30deg); 16 | transform-origin: 0 100%; 17 | } 18 | .flash:hover .flash-bar { 19 | left:900px; 20 | transition: left ease-in-out 1s; 21 | } -------------------------------------------------------------------------------- /style/gradient.css: -------------------------------------------------------------------------------- 1 | .background-gradient { 2 | background: rgb(44, 136, 207); 3 | position: relative; 4 | width: 500px; 5 | height: 200px; 6 | } 7 | .background-gradient .mask { 8 | background-image: linear-gradient(to right, rgb(44, 136, 207), transparent), url("https://pic1.zhimg.com/50/v2-6c5aa2304a93b7fbaf903e3560543d7b_hd.jpg"); 9 | background-position:center; 10 | background-blend-mode:normal; 11 | position: absolute; 12 | height: 100%; 13 | width: 180px; 14 | right: 0; 15 | } -------------------------------------------------------------------------------- /style/label.css: -------------------------------------------------------------------------------- 1 | .label { 2 | position: relative; 3 | overflow: hidden; 4 | } 5 | .label-bar { 6 | text-align: center; 7 | background: red; 8 | position: absolute; 9 | top:80px; 10 | left: 0px; 11 | width: 141px; 12 | height:20px; 13 | transform-origin: 0 100%; 14 | transform: rotate(-45deg); 15 | } 16 | -------------------------------------------------------------------------------- /style/light.css: -------------------------------------------------------------------------------- 1 | @keyframes light { 2 | from { 3 | box-shadow:0px 0px 4px #f00; 4 | } 5 | to { 6 | box-shadow:0px 0px 16px #f00; 7 | } 8 | } 9 | .light { 10 | width: 100px; 11 | height: 100px; 12 | margin:20px; 13 | border-radius: 50%; 14 | animation: light 2s ease-in-out infinite alternate; 15 | } -------------------------------------------------------------------------------- /style/progress.css: -------------------------------------------------------------------------------- 1 | 2 | @keyframes left_cirlce_spin { 3 | 0%,50% { 4 | transform: rotate(-45deg); 5 | } 6 | 100%{ 7 | transform: rotate(135deg); 8 | } 9 | } 10 | @keyframes right_cirlce_spin { 11 | 0% { 12 | transform: rotate(45deg); 13 | } 14 | 50%,100%{ 15 | transform: rotate(225deg); 16 | } 17 | } 18 | .progress { 19 | overflow: hidden; 20 | width: 100px; 21 | height: 100px; 22 | } 23 | .progress .wrapper-circle { 24 | overflow: hidden; 25 | width: 50%; 26 | height: 100%; 27 | } 28 | .left { 29 | float: left; 30 | } 31 | .right { 32 | float: right; 33 | } 34 | .progress { 35 | margin: 20px; 36 | } 37 | .progress .circle { 38 | border-radius: 50%; 39 | width: 90px; 40 | height: 90px; 41 | } 42 | .progress .left .circle { 43 | float: left; 44 | border: 5px solid red; 45 | border-top-color: transparent; 46 | border-left-color: transparent; 47 | animation: left_cirlce_spin 4s linear infinite; 48 | } 49 | 50 | .progress .right .circle { 51 | float: right; 52 | border: 5px solid red; 53 | border-top-color: transparent; 54 | border-right-color: transparent; 55 | animation: right_cirlce_spin 4s linear infinite; 56 | } --------------------------------------------------------------------------------