这世界上根本不存在“不会做”这回事,当你失去了所有的依靠的时候,自然什么都会了。


 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>CSS3-铰链-效果</title>
 6 <style>
 7   body{
 8     width: 100%;
 9     height: 100%;
10     overflow: hidden;
11     position: absolute;
12     left: 0;
13     background-color: #000;
14   }
15   .element{
16 
17     color: #f35626;
18     margin: -24px auto auto auto;
19     position: absolute;
20     top: 50%;
21     left: 50%;
22     background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
23     -webkit-background-clip: text;
24     -webkit-text-fill-color: transparent;
25     -webkit-animation: hue 60s infinite linear;
26     margin-bottom: 1.5rem;
27     font-size: 3rem;
28     font-weight: 100;
29     line-height: 1;
30     letter-spacing: -.05em;
31   }
32   .animated {
33     -webkit-animation-duration: 3s;
34     animation-duration: 3s;
35     -webkit-animation-fill-mode: both;
36     animation-fill-mode: both;
37   }
38 @keyframes hinge {
39   0% {
40     transform-origin: top left;
41     animation-timing-function: ease-in-out;
42   }
43 
44   20%, 60% {
45     transform: rotate3d(0, 0, 1, 80deg);
46     transform-origin: top left;
47     animation-timing-function: ease-in-out;
48   }
49 
50   40%, 80% {
51     transform: rotate3d(0, 0, 1, 60deg);
52     transform-origin: top left;
53     animation-timing-function: ease-in-out;
54     opacity: 1;
55   }
56 
57   to {
58     transform: translate3d(0, 700px, 0);
59     opacity: 0;
60   }
61 }
62 
63 .hinge {
64   animation-name: hinge;
65 }
66 </style>
67 </head>
68 <body>
69     <div class="element animated hinge">hinge</div>
70 </body>
71 </html>
View Code

 

 

posted @ 2017-01-21 15:25 Linda_Je 阅读(177) 评论(0) 推荐(0) Edit
把圈子变小,把语速放缓,把心放宽,把生活打理简单,把故事往心底深藏,把手边事再做得好一点,现在想要的以后都会有,等你自己可以发出微光的时候,就再也不会害怕寒冷了。 ​​​​ 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 Read More
posted @ 2017-01-21 11:53 Linda_Je 阅读(1465) 评论(0) 推荐(0) Edit
为自己的目标努力着,全身心投入一件事情。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3-晃动-效果</title> <style> .element{ color: #f35626; background-image Read More
posted @ 2017-01-21 11:40 Linda_Je 阅读(2430) 评论(0) 推荐(0) Edit
一些该拿起的就拿起,该舍弃的要舍弃。因为,只有该结束的结束了,该开始的才会开始。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3-轻弹-效果</title> <style> .element{ color: #f356 Read More
posted @ 2017-01-21 11:38 Linda_Je 阅读(192) 评论(0) 推荐(0) Edit
嘲笑你上进的人,最好趁早远离。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3-摆动-效果</title> <style> .element{ color: #f35626; background-image: -we Read More
posted @ 2017-01-21 11:32 Linda_Je 阅读(1428) 评论(0) 推荐(0) Edit
愿你是披荆斩棘的女英雄。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3-弹跳-效果</title> <style> .element{ color: #f35626; background-image: -webki Read More
posted @ 2017-01-21 11:06 Linda_Je 阅读(613) 评论(0) 推荐(0) Edit
我不知道该说什么,只是在这一秒突然很想更新。 ​​​​ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3-橡皮筋-效果</title> <style> .element{ color: #f35626; backgrou Read More
posted @ 2017-01-21 10:58 Linda_Je 阅读(1425) 评论(0) 推荐(0) Edit
不回头看,去过自己另外的生活。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3-闪光-效果</title> <style> .element{ color: #f35626; background-image: -we Read More
posted @ 2017-01-21 10:52 Linda_Je 阅读(1062) 评论(0) 推荐(0) Edit
你想做那个遗世独立的人,我知道。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3-闪光-效果</title> 6 <style> 7 .element{ 8 color: #f35626; 9 ba Read More
posted @ 2017-01-21 10:30 Linda_Je 阅读(1039) 评论(0) 推荐(0) Edit
每日一更,今天是反弹效果集 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3-反弹-效果</title> 6 <style> 7 .element{ 8 color: #f35626; 9 backg Read More
posted @ 2017-01-21 09:48 Linda_Je 阅读(517) 评论(0) 推荐(0) Edit
点击右上角即可分享
微信分享提示