大器晚成款基于jquery和css3的头像恶搞特效,愚人

趣文:巧用CSS文件,愚人节极客式恶搞

2013/03/30 · CSS · 16 评论 · 来源: 伯乐在线     · CSS

后天就是3月1日愚人节了,约等于分外可恰巧开玩笑、整蛊的小日子了。假设您想和那个要上网的意中人或同事开个极客式玩笑,那就来试试那一个海外网民Wes Bos分享的 CSS 文件呢。

/* 豁免权利表明:恶搞带给的保有后果,请恶搞者自行承当。伯乐在线不辜负义务何义务。(*^__^*) */

 

大器晚成款基于jquery和css3的头像恶搞特效,jquerycss3

明日给大家横扫千军意气风发款基于jquery和css3的头像恶搞特效。这款实例中,三个头像在镜头中手舞足蹈,头像还应该有动人的帽子,单击上面包车型大巴按键可以为头像切换区别的罪名。效果图如下:

图片 1

在线预览   源码下载

福寿康宁的代码。

html代码:

Html代码  图片 2

  1. <div class="wwiaftm-container">  
  2.         <div class="base wwiaftm">  
  3.             <div class="body-1 wwiaftm">  
  4.                 <div class="body-2 wwiaftm">  
  5.                     <div class="hat wwiaftm" style="background-image: url(Mini_Sombrero.png)">  
  6.                     </div>  
  7.                     <div class="head wwiaftm">  
  8.                         <div class="profile">  
  9.                             <img src="head.png">  
  10.                         </div>  
  11.                     </div>  
  12.                     <div class="wwiaftm arm-1 left">  
  13.                         <div class="wwiaftm arm-2 left">  
  14.                             <div class="wwiaftm fingers">  
  15.                             </div>  
  16.                         </div>  
  17.                     </div>  
  18.                     <div class="wwiaftm arm-1 right">  
  19.                         <div class="wwiaftm arm-2 right">  
  20.                             <div class="wwiaftm fingers">  
  21.                             </div>  
  22.                         </div>  
  23.                     </div>  
  24.                 </div>  
  25.             </div>  
  26.         </div>  
  27.     </div>  
  28.     <div class="switch-container">  
  29.         <button id="hat-switch">  
  30.             Hat Me!</button>  
  31.     </div>  
  32.     <script src='jquery.min.js'></script>  
  33.     <script>        var hats = Array(  
  34.   'Mini_Sombrero.png', 'med.png',  
  35.   'svg.med.png',  
  36.   'cartoon-cowboy-8.gif',  
  37.   '1313955-witch-hat-002_92007.gif',  
  38.   'hat_mario_101401.jpg',  
  39.   'vector-hat-design1.jpg'  
  40. );  
  41.   
  42.         $('#hat-switch').on('click', function (e) {  
  43.             e.preventDefault();  
  44.             var hat = hats[Math.floor(Math.random() * hats.length)];  
  45.             $('.hat').css('background-image', 'url('   hat   ')');  
  46.         });  
  47.         //@ sourceURL=pen.js  
  48.     </script>  

 css3代码:

Html代码  图片 3

  1. .wwiaftm-container {  
  2.   position: relative;  
  3.   width: 200px;  
  4.   height: 275px;  
  5.   margin: auto;  
  6.   padding-top: 100px;  
  7. }  
  8.   
  9. .profile {  
  10.   border-radius: 100px;  
  11.   overflow: hidden;  
  12. }  
  13.   
  14. .wwiaftm {  
  15.   background: #48e0a4;  
  16.   position: absolute;  
  17.   margin: auto;  
  18.   border-radius: 25%;  
  19. }  
  20.   
  21. .body-1 {  
  22.   background-repeat: no-repeat;  
  23.   background-position: center;  
  24.   background-size: 70%;  
  25. }  
  26.   
  27. .base {  
  28.   width: 60px;  
  29.   height: 80px;  
  30.   bottom: 0;  
  31.   left: 0;  
  32.   right: 0;  
  33. }  
  34.   
  35. .hat {  
  36.   top: -120px;  
  37.   height: 80px;  
  38.   width: 100px;  
  39.   -webkit-transform-origin: 50% 100%;  
  40.   transform-origin: 50% 100%;  
  41.   -webkit-transform: rotate3d(0,0,1,0deg);  
  42.   transform: rotate3d(0,0,1,0deg);  
  43.   background-repeat: no-repeat;  
  44.   background-position: center;  
  45.   transparent;  
  46.   background-size: 100%;  
  47.   z-index: 10 !important;  
  48. }  
  49.   
  50. .body-1, .body-2, .head {  
  51.   top: -60px;  
  52.   height: 80px;  
  53.   width: 60px;  
  54.   -webkit-transform-origin: 50% 100%;  
  55.   transform-origin: 50% 100%;  
  56.   -webkit-transform: rotate3d(0,0,1,0deg);  
  57.   transform: rotate3d(0,0,1,0deg);  
  58. }  
  59.   
  60. .body-1 {  
  61.   -webkit-animation: flail 4s linear infinite;  
  62.   animation: flail 4s linear infinite;  
  63. }  
  64.   
  65. .body-2 {  
  66.   -webkit-animation: flail 3s linear infinite;  
  67.   animation: flail 3s linear infinite;  
  68. }  
  69.   
  70. .head, .hat {  
  71.   -webkit-animation: flail 2s linear infinite;  
  72.   animation: flail 2s linear infinite;  
  73.   z-index: 1;  
  74. }  
  75.   
  76. .head .eye, .head .mouth {  
  77.   height: 20%;  
  78.   width: 15%;  
  79.   background: black;  
  80.   position: absolute;  
  81.   top: 25%;  
  82. }  
  83.   
  84. .head .eye.right {  
  85.   right: 20%;  
  86. }  
  87.   
  88. .head .eye.left {  
  89.   left: 20%;  
  90. }  
  91.   
  92. .head .mouth {  
  93.   width: 70%;  
  94.   top: 60%;  
  95.   height: 5%;  
  96.   left: 0;  
  97.   right: 0;  
  98.   margin: auto;  
  99. }  
  100.   
  101. .arm-1, .arm-2 {  
  102.   position: absolute;  
  103.   width: 50px;  
  104.   height: 20px;  
  105.   right: 90%;  
  106.   top: 25%;  
  107.   -webkit-animation: flail 1s linear infinite;  
  108.   animation: flail 1s linear infinite;  
  109.   -webkit-transform-origin: 100% 50%;  
  110.   transform-origin: 100% 50%;  
  111. }  
  112.   
  113. .arm-1.right, .arm-2.right {  
  114.   left: 90%;  
  115.   -webkit-transform-origin: 0% 50%;  
  116.   transform-origin: 0% 50%;  
  117. }  
  118.   
  119. .arm-1 .arm-2 {  
  120.   -webkit-animation: flail .5s linear infinite;  
  121.   animation: flail .5s linear infinite;  
  122.   right: 80%;  
  123.   top: auto;  
  124. }  
  125.   
  126. .arm-1 .arm-2.right {  
  127.   left: 80%;  
  128.   right: auto;  
  129. }  
  130.   
  131. @-webkit-keyframes flail {  
  132.   0% {  
  133.     -webkit-transform: rotate3d(0,0,1,0deg);  
  134.   }  
  135.   25% {  
  136.     -webkit-transform: rotate3d(0,0,1,50deg);  
  137.   }  
  138.   50% {  
  139.     -webkit-transform: rotate3d(0,0,1,0deg);  
  140.   }  
  141.   75% {  
  142.     -webkit-transform: rotate3d(0,0,1,-50deg);  
  143.   }  
  144.   100% {  
  145.     -webkit-transform: rotate3d(0,0,1,0deg);  
  146.   }  
  147. }  
  148.   
  149. @keyframes flail {  
  150.   0% {  
  151.     transform: rotate3d(0,0,1,0deg);  
  152.   }  
  153.   25% {  
  154.     transform: rotate3d(0,0,1,50deg);  
  155.   }  
  156.   50% {  
  157.     transform: rotate3d(0,0,1,0deg);  
  158.   }  
  159.   75% {  
  160.     transform: rotate3d(0,0,1,-50deg);  
  161.   }  
  162.   100% {  
  163.     transform: rotate3d(0,0,1,0deg);  
  164.   }  
  165. }  
  166.   
  167. .switch-container {  
  168.   text-align: center;  
  169.   margin-top: 25px;  
  170. }  
  171.   
  172. #hat-switch {  
  173.   text-align: center;  
  174.   font-size: 24px;  
  175.   cursor: pointer;  
  176. }  

 

今日给我们享用黄金年代款基于jquery和css3的头像恶搞特效。那款实例中,一个头像在画面中起舞,头...

太阳系本身便是突发性。大家每个人都在某种程度上总计将太阳系中的全部活动正是几年光明的时节,望着大自然。可是你通晓你以至足以在计算机显示屏上画出您的想像力吗?在本教程中,大家将动用CSS3营造二个由地球,明月和日光组成的简洁明了太阳系。

纯CSS塑造的安卓系统开机画面动漫特效代,css安卓

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纯CSS创设的安卓系统开机画面动漫特效代码</title>
<style>
.android{
position:relative;
width:200px;
height:290px;
margin:80px auto;
background: #A5C63B;
border-radius:200px 200px 50px 50px;
transition: all .25s ease-out;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
}
.android:hover{
filter: blur(3px);
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
transform: scale(1.2) rotate(3deg);
-webkit-transform: scale(1.2) rotate(3deg);
-moz-transform: scale(1.2) rotate(3deg);
-o-transform: scale(1.2) rotate(3deg);
-ms-transform: scale(1.2) rotate(3deg);
}
.android:after{
content:'';
position:absolute;
display:block;
width:200px;
height:8px;
top:95px;
background: #fff;
}
.android .eye:after,
.android .eye:before{
content:'';
position:absolute;
display:block;
width:18px;
height:18px;
top:35px;
left:50px;
background: #fff;
border-radius:15px;
}
.android .eye:after{
left:auto;
right:50px;
animation:animated-robot-eye-right 5s ease 1s infinite alternate;
-webkit-animation:animated-robot-eye-right 5s ease 1s infinite alternate;
-moz-animation:animated-robot-eye-right 5s ease 1s infinite alternate;
-o-animation:animated-robot-eye-right 5s ease 1s infinite alternate;
-ms-animation:animated-robot-eye-right 5s ease 1s infinite alternate;
}
.android .eye:before{
animation:animated-robot-eye-right 5s ease 1s infinite alternate;
-webkit-animation:animated-robot-eye-right 5s ease 1s infinite alternate;
-moz-animation:animated-robot-eye-right 5s ease 1s infinite alternate;
-o-animation:animated-robot-eye-right 5s ease 1s infinite alternate;
-ms-animation:animated-robot-eye-right 5s ease 1s infinite alternate;
}
@keyframes animated-robot-eye-right
{
0% {}
25% {transform: translate(-102px,0px);}
50% {}
100% {}
}
@-webkit-keyframes animated-robot-eye-right
{
0% {}
25% {-webkit-transform: translate(-102px,0px);}
50% {}
100% {}
}
@-moz-keyframes animated-robot-eye-right
{
0% {}
25% {-moz-transform: translate(-102px,0px);}
50% {}
100% {}
}
@-o-keyframes animated-robot-eye-right
{
0% {}
25% {-o-transform: translate(-102px,0px);}
50% {}
100% {}
}
@-ms-keyframes animated-robot-eye-right
{
0% {}
25% {-ms-transform: translate(-102px,0px);}
50% {}
100% {}
}
@keyframes animated-robot-eye-left
{
0% {}
25% {transform: translate(-82px,0px);}
50% {}
100% {}
}
@-webkit-keyframes animated-robot-eye-left
{
0% {}
25% {-webkit-transform: translate(-82px,0px);}
50% {}
100% {}
}
@-moz-keyframes animated-robot-eye-left
{
0% {}
25% {-moz-transform: translate(-82px,0px);}
50% {}
100% {}
}
@-o-keyframes animated-robot-eye-left
{
0% {}
25% {-o-transform: translate(-82px,0px);}
50% {}
100% {}
}
@-ms-keyframes animated-robot-eye-left
{
0% {}
25% {-ms-transform: translate(-82px,0px);}
50% {}
100% {}
}
.android:hover .eye:after,
.android:hover .eye:before{
height:3px;
top:43px;
}
.android .ear:after,
.android .ear:before{
content:'';
position:absolute;
display:block;
width:6px;
height:40px;
top:-25px;
left:50px;
background: #A5C63B;
border-radius:5px;
transform:rotate(-25deg);
-webkit-transform:rotate(-25deg);
-moz-transform:rotate(-25deg);
-o-transform:rotate(-25deg);
-ms-transform:rotate(-25deg);
}
.android .ear:after{
left:auto;
right:50px;
transform:rotate(25deg);
-webkit-transform:rotate(25deg);
-moz-transform:rotate(25deg);
-o-transform:rotate(25deg);
-ms-transform:rotate(25deg);
}
.android .ear:before{
animation:animated-robot-ear-right 5s ease 1s infinite alternate;
-webkit-animation:animated-robot-ear-right 5s ease 1s infinite alternate;
-moz-animation:animated-robot-ear-right 5s ease 1s infinite alternate;
-o-animation:animated-robot-ear-right 5s ease 1s infinite alternate;
-ms-animation:animated-robot-ear-right 5s ease 1s infinite alternate;

}
@keyframes animated-robot-ear-right
{
0% {}
25% {transform:translate(90px,6px) rotate(25deg);}
50% {}
100% {}
}

@-webkit-keyframes animated-robot-ear-right
{
0% {}
25% {-webkit-transform:translate(90px,6px) rotate(25deg);}
50% {}
100% {}
}

@-moz-keyframes animated-robot-ear-right
{
0% {}
25% {-moz-transform:translate(90px,6px) rotate(25deg);}
50% {}
100% {}
}
@-o-keyframes animated-robot-ear-right
{
0% {}
25% {-o-transform:translate(90px,6px) rotate(25deg);}
50% {}
100% {}
}
@-ms-keyframes animated-robot-ear-right
{
0% {}
25% {-ms-transform:translate(90px,6px) rotate(25deg);}
50% {}
100% {}
}
@keyframes animated-robot-ear-left
{
0% {transform: translate(-42px,0px);}
25% {}
50% {}
100% {}
}
@-webkit-keyframes animated-robot-ear-left
{
0% {-webkit-transform: translate(-42px,0px);}
25% {}
50% {}
100% {}
}
@-moz-keyframes animated-robot-ear-left
{
0% {-moz-transform: translate(-42px,0px);}
25% {}
50% {}
100% {}
}
@-o-keyframes animated-robot-ear-left
{
0% {-o-transform: translate(-42px,0px);}
25% {}
50% {}
100% {}
}
@-ms-keyframes animated-robot-ear-left
{
0% {-ms-transform: translate(-42px,0px);}
25% {}
50% {}
100% {}
}
.android .hand:after,
.android .hand:before{
content:'';
position:absolute;
display:block;
width:44px;
height:150px;
top:96px;
left:-52px;
background: #A5C63B;
border-radius:44px;

}
.android .hand:after{
left:auto;
right:-52px;
}

.android .hand:after
{
transform-origin:0 0;
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-o-transform-origin:0 0;
-ms-transform-origin:0 0;
animation:animated-robot-hand-right 5s ease 1s infinite alternate;
-webkit-animation:animated-robot-hand-right 5s ease 1s infinite alternate;
-moz-animation:animated-robot-hand-right 5s ease 1s infinite alternate;
-o-animation:animated-robot-hand-right 5s ease 1s infinite alternate;
-ms-animation:animated-robot-hand-right 5s ease 1s infinite alternate;
}
.android .hand:before
{
transform-origin:44px 0;
-webkit-transform-origin:44px 0;
-moz-transform-origin:44px 0;
-o-transform-origin:44px 0;
-ms-transform-origin:44px 0;
animation:animated-robot-hand-left 5s ease 1s infinite alternate;
-webkit-animation:animated-robot-hand-left 5s ease 1s infinite alternate;
-moz-animation:animated-robot-hand-left 5s ease 1s infinite alternate;
-o-animation:animated-robot-hand-left 5s ease 1s infinite alternate;
-ms-animation:animated-robot-hand-left 5s ease 1s infinite alternate;
}

@keyframes animated-robot-hand-right
{
0% {transform: translate(-52px,0px);}
25% {transform: rotate(0deg);}
50% {transform: rotate(-180deg);}
100% {transform: translate(-10px,120px) rotate(-180deg);}
}
@-webkit-keyframes animated-robot-hand-right
{
0% {-webkit-transform: translate(-52px,0px);}
25% {-webkit-transform: rotate(0deg);}
50% {-webkit-transform: rotate(-180deg);}
100% {-webkit-transform: translate(-10px,120px) rotate(-180deg);}
}
@-moz-keyframes animated-robot-hand-right
{
0% {-moz-transform: translate(-52px,0px);}
25% {-moz-transform: rotate(0deg);}
50% {-moz-transform: rotate(-180deg);}
100% {-moz-transform: translate(-10px,120px) rotate(-180deg);}
}
@-o-keyframes animated-robot-hand-right
{
0% {-o-transform: translate(-52px,0px);}
25% {-o-transform: rotate(0deg);}
50% {-o-transform: rotate(-180deg);}
100% {-o-transform: translate(-10px,120px) rotate(-180deg);}
}
@-ms-keyframes animated-robot-hand-right
{
0% {-ms-transform: translate(-52px,0px);}
25% {-ms-transform: rotate(0deg);}
50% {-ms-transform: rotate(180deg);}
100% {-ms-transform: translate(-10px,120px) rotate(180deg);}
}
@keyframes animated-robot-hand-left
{
0% {transform: translate(52px,0px);}
25% {transform: rotate(0deg);}
50% {transform: rotate(180deg);}
100% {transform: translate(10px,120px) rotate(180deg);}
}
@-webkit-keyframes animated-robot-hand-left
{
0% {-webkit-transform: translate(52px,0px);}
25% {-webkit-transform: rotate(0deg);}
50% {-webkit-transform: rotate(180deg);}
100% {-webkit-transform: translate(10px,120px) rotate(180deg);}
}
@-moz-keyframes animated-robot-hand-left
{
0% {-moz-transform: translate(52px,0px);}
25% {-moz-transform: rotate(0deg);}
50% {-moz-transform: rotate(180deg);}
100% {-moz-transform: translate(10px,120px) rotate(180deg);}
}
@-o-keyframes animated-robot-hand-left
{
0% {-o-transform: translate(52px,0px);}
25% {-o-transform: rotate(0deg);}
50% {-o-transform: rotate(180deg);}
100% {-o-transform: translate(10px,120px) rotate(180deg);}
}
@-ms-keyframes animated-robot-hand-left
{
0% {-ms-transform: translate(52px,0px);}
25% {-ms-transform: rotate(0deg);}
50% {-ms-transform: rotate(-180deg);}
100% {-ms-transform: translate(10px,120px) rotate(-180deg);}
}

.android .foot:after,
.android .foot:before{
content:'';
position:absolute;
display:block;
width:44px;
height:110px;
bottom:-90px;
left:40px;
background: #A5C63B;
border-radius:44px;
}

.android .foot:after
{
transform-origin:0 0;
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-o-transform-origin:0 0;
-ms-transform-origin:0 0;
animation:animated-robot-foot-right 5s ease 1s infinite alternate;
-webkit-animation:animated-robot-foot-right 5s ease 1s infinite alternate;
-moz-animation:animated-robot-foot-right 5s ease 1s infinite alternate;
-o-animation:animated-robot-foot-right 5s ease 1s infinite alternate;
-ms-animation:animated-robot-foot-right 5s ease 1s infinite alternate;
}
.android .foot:before
{
transform-origin:44px 0;
-webkit-transform-origin:44px 0;
-moz-transform-origin:44px 0;
-o-transform-origin:44px 0;
-ms-transform-origin:44px 0;
animation:animated-robot-foot-left 5s ease 1s infinite alternate;
-webkit-animation:animated-robot-foot-left 5s ease 1s infinite alternate;
-moz-animation:animated-robot-foot-left 5s ease 1s infinite alternate;
-o-animation:animated-robot-foot-left 5s ease 1s infinite alternate;
-ms-animation:animated-robot-foot-left 5s ease 1s infinite alternate;
}

@keyframes animated-robot-foot-right
{
0% {transform: rotate(0deg);}
25% {transform: rotate(0deg);bottom:-120px;}
50% {transform: rotate(-90deg);}
100% {transform: translate(-50px,-120px);}
}
@-webkit-keyframes animated-robot-foot-right
{
0% {-webkit-transform: rotate(0deg);}
25% {-webkit-transform: rotate(0deg);bottom:-120px;}
50% {-webkit-transform: rotate(-90deg);}
100% {-webkit-transform: translate(-50px,-120px);}
}
@-moz-keyframes animated-robot-foot-right
{
0% {-moz-transform: rotate(0deg);}
25% {-moz-transform: rotate(0deg);bottom:-120px;}
50% {-moz-transform: rotate(-90deg);}
100% {-moz-transform: translate(-50px,-120px);}
}
@-o-keyframes animated-robot-foot-right
{
0% {-o-transform: rotate(0deg);}
25% {-o-transform: rotate(0deg);bottom:-120px;}
50% {-o-transform: rotate(-90deg);}
100% {-o-transform: translate(-50px,-120px);}
}
@-ms-keyframes animated-robot-foot-right
{
0% {-ms-transform: rotate(0deg);}
25% {-ms-transform: rotate(0deg);bottom:-120px;}
50% {-ms-transform: rotate(-90deg);}
100% {-ms-transform: translate(-50px,-120px);}
}
@keyframes animated-robot-foot-left
{
0% {transform: rotate(0deg);}
25% {transform: rotate(0deg);bottom:-120px;}
50% {transform: rotate(90deg);}
100% {transform: translate(50px,-120px);}
}
@-webkit-keyframes animated-robot-foot-left
{
0% {-webkit-transform: rotate(0deg);}
25% {-webkit-transform: rotate(0deg);bottom:-120px;}
50% {-webkit-transform: rotate(90deg);}
100% {-webkit-transform: translate(50px,-120px);}
}

@-o-keyframes animated-robot-foot-left
{
0% {-o-transform: rotate(0deg);}
25% {-o-transform: rotate(0deg);bottom:-120px;}
50% {-o-transform: rotate(90deg);}
100% {-o-transform: translate(50px,-120px);}
}
@-moz-keyframes animated-robot-foot-left
{
0% {-moz-transform: rotate(0deg);}
25% {-moz-transform: rotate(0deg);bottom:-120px;}
50% {-moz-transform: rotate(90deg);}
100% {-moz-transform: translate(50px,-120px);}
}
@-ms-keyframes animated-robot-foot-left
{
0% {-ms-transform: rotate(0deg);}
25% {-ms-transform: rotate(0deg);bottom:-120px;}
50% {-ms-transform: rotate(90deg);}
100% {-ms-transform: translate(50px,-120px);}
}
.android .foot:after{
left:auto;
right:40px;
}
</style>
</head>
<body>
<div class="android">
<div class="eye"></div>
<div class="ear"></div>
<div class="hand"></div>
<div class="foot"></div>
</div>
<div>;
</body>
</html>

!DOCTYPE html html head meta http-equiv="Content-Type" content="text/html; charset=gb2312" / title纯CSS构建的安...

意气风发、打开浏览器的 Custom.css 文件

正文以 Chrome 为例(CSS 订正后马上生效卡塔尔国,步向同事或朋友的微型机,按下边格局张开 Custom.css 文件

  • Mac:~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
  • Windows XP:系统盘:Documents and Settings用户名Local SettingsApplication DataGoogleChromeUser DataDefaultUser StyleSheetsCustom.css(其余Windows 系统相像,在个体账号中的找“应用数据” AppData……卡塔 尔(阿拉伯语:قطر‎
  • Ubuntu (Chromium):~/.config/chromium/Default/User StyleSheets/Custom.css

图片 4

二、在 Custom.css 文件中增多相应CSS代码

让大家最早编制程序

1. 网页上下颠倒

CSS

/* Turn every website upside down */ body { -webkit-transform: rotate(180deg); }

1
2
3
4
5
6
/*
  Turn every website upside down
*/
body {
  -webkit-transform: rotate(180deg);
}

图片 5

点击查看原始尺寸图片

步骤: -

2. 网页旋转

CSS

/* Spin every Website */ body { /*-webkit-animation: spin 5s linear infinite;*/ }

1
2
3
4
5
6
/*
  Spin every Website
*/
body {
  /*-webkit-animation: spin 5s linear infinite;*/
}

图片 6

点击查看原始尺寸图片

1卡塔尔国使用下边给出的HTML代码来设计HTML结构。

3. 网页中兼有图片上下颠倒

CSS

/* Flip all images upside down */ img { /*-webkit-transform: rotate(180deg);*/ }

1
2
3
4
5
6
/*
  Flip all images upside down
*/
img {
  /*-webkit-transform: rotate(180deg);*/
}

图片 7

点击查阅原始尺寸图片

HTML(index.html)

4. 网页中具有图片都自转

CSS

/* Spin all images */ img { /*-webkit-animation: spin 1s linear infinite;*/ }

1
2
3
4
5
6
/*
Spin all images
*/
img {
  /*-webkit-animation: spin 1s linear infinite;*/
}

图片 8

点击查阅原始尺寸图片

<html>

5. 网页倒在地上了(请用内容抢先多屏的网页测量检验卡塔 尔(阿拉伯语:قطر‎

CSS

/* Make every website fall over! */ /* html, body { height: 100%; } html { -webkit-perspective: 1000; } body { -webkit-transform-origin: bottom center; -webkit-transform: rotateX(-90deg); -webkit-animation: fall 1.5s ease-in; } */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*
Make every website fall over!
*/
/*
html, body {
height: 100%;
}
 
html {
-webkit-perspective: 1000;
}
 
body {
-webkit-transform-origin: bottom center;
-webkit-transform: rotateX(-90deg);
-webkit-animation: fall 1.5s ease-in;
}
*/

图片 9

微微网址会不起成效,往下翻网页,有种自由下降的感到到

图片 10

点击查阅原始尺寸图片

<head>

地方就罗列那些了,其余恶搞内容,请参见上边这段 CSS 代码。

CSS

/* aprilFools.css Written by Wes Bos I assume no responsibility for angry co-workers or lost productivity Put these CSS definitons into your co-workers Custom.css file. They will be applied to every website they visit as well as their developer tools. Mac: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css PC: C:/Users/YourUsername/AppData/Local/Google/Chrome/User Data/Default/User StyleSheets/Custom.css Ubuntu (Chromium): ~/.config/chromium/Default/User StyleSheets/Custom.css */ /* Turn every website upside down */ body { /*-webkit-transform: rotate(180deg);*/ } /* blur every website for a split second every 30 seconds */ body { /*-webkit-animation: blur 30s infinite;*/ } /* Spin every Website */ body { /*-webkit-animation: spin 5s linear infinite;*/ } /* Flip all images upside down */ img { /*-webkit-transform: rotate(180deg);*/ } /* COMIC SANS EVERYTHING */ body, p, body p, body div p { /*font-family: 'Comic Sans MS', cursive !important;*/ } /* Spin all images */ img { /*-webkit-animation: spin 1s linear infinite;*/ } /* Hide every 2nd paragraph element on a page */ p:nth-child(2) { /*display:none !important;*/ } /* Spin dev tools round and round */ #-webkit-web-inspector { /*-webkit-animation: spin 1s linear infinite; */ } /* Flip dev tools upside down */ #-webkit-web-inspector { /*-webkit-transform:rotate(180deg);*/ } /* Hide the close button */ #-webkit-web-inspector .toolbar-item.close-left { /*display:none !important;*/ } /* Make console text all blurry */ #-webkit-web-inspector .console-group-messages { /*text-shadow: 0 0 3px rgba(0,0,0,.5) !important;*/ } #-webkit-web-inspector .console-error-level .console-message-text, #-webkit-web-inspector .console-error-level .section .header .title { /*text-shadow: 0 0 3px rgba(255,0,0,.5) !important;*/ } #-webkit-web-inspector .console-user-command > .console-message-text { /*text-shadow: 0 0 3px rgba(0,128,255,.5) !important;*/ } #-webkit-web-inspector .console-group-messages, #-webkit-web-inspector .console-user-command > .console-message-text, #-webkit-web-inspector .console-formatted-null, #-webkit-web-inspector .console-formatted-undefined, #-webkit-web-inspector .console-debug-level .console-message-text, #-webkit-web-inspector .console-error-level .console-message-text, #-webkit-web-inspector .console-error-level .section .header .title, #-webkit-web-inspector .console-group-messages .section .header .title, #-webkit-web-inspector .console-formatted-object, #-webkit-web-inspector .console-formatted-node, #-webkit-web-inspector .console-formatted-array, #-webkit-web-inspector .section .properties .name, #-webkit-web-inspector .event-properties .name, #-webkit-web-inspector .console-formatted-object .name, #-webkit-web-inspector .console-formatted-number, #-webkit-web-inspector .console-formatted-string, #-webkit-web-inspector #console-messages a { /*color: transparent !important;*/ } /* HTML PRIDE! */ html { /*-webkit-animation: rainbow 8s infinite;*/ } /* Make every website fall over! */ /* html, body { height: 100%; } html { -webkit-perspective: 1000; } body { -webkit-transform-origin: bottom center; -webkit-transform: rotateX(-90deg); -webkit-animation: fall 1.5s ease-in; } */ /* Insert a phrase every paragraph */ /* p:before { content: "YOLO "; } */ /* Animations */ @-webkit-keyframes blur { 0% { -webkit-filter: blur(0px); } 49% { -webkit-filter: blur(0px); } 50% { -webkit-filter: blur(1px); } 51% { -webkit-filter: blur(0px); } 100% { -webkit-filter: blur(0px); } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @-webkit-keyframes rainbow { 100% { -webkit-filter: hue-rotate(360deg); } } @-webkit-keyframes fall { 0% { -webkit-transform: none; } 100% { -webkit-transform: rotateX(-90deg); } }

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
/*
aprilFools.css
Written by Wes Bos
I assume no responsibility for angry co-workers or lost productivity
 
Put these CSS definitons into your co-workers Custom.css file.
They will be applied to every website they visit as well as their developer tools.
 
Mac: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
 
PC: C:/Users/YourUsername/AppData/Local/Google/Chrome/User Data/Default/User StyleSheets/Custom.css
 
Ubuntu (Chromium): ~/.config/chromium/Default/User StyleSheets/Custom.css
*/
 
/*
Turn every website upside down
*/
body {
  /*-webkit-transform: rotate(180deg);*/
}
 
/*
blur every website for a split second every 30 seconds
*/
body {
  /*-webkit-animation: blur 30s infinite;*/
}
 
/*
Spin every Website
*/
body {
  /*-webkit-animation: spin 5s linear infinite;*/
}
 
/*
Flip all images upside down
*/
img {
  /*-webkit-transform: rotate(180deg);*/
}
 
/*
COMIC SANS EVERYTHING
*/
 
body, p, body p, body div p {
  /*font-family: 'Comic Sans MS', cursive !important;*/
}
 
/*
Spin all images
*/
img {
  /*-webkit-animation: spin 1s linear infinite;*/
}
 
/*
Hide every 2nd paragraph element on a page
*/
p:nth-child(2) {
  /*display:none !important;*/
}
 
/*
Spin dev tools round and round
*/
#-webkit-web-inspector {
/*-webkit-animation: spin 1s linear infinite; */
}
 
/*
Flip dev tools upside down
*/
#-webkit-web-inspector {
/*-webkit-transform:rotate(180deg);*/
}
 
/* Hide the close button */
#-webkit-web-inspector .toolbar-item.close-left {
  /*display:none !important;*/
}
 
/* Make console text all blurry */
#-webkit-web-inspector .console-group-messages {
  /*text-shadow: 0 0 3px rgba(0,0,0,.5) !important;*/
}
 
#-webkit-web-inspector .console-error-level .console-message-text,
#-webkit-web-inspector .console-error-level .section .header .title {
  /*text-shadow: 0 0 3px rgba(255,0,0,.5) !important;*/
}
 
#-webkit-web-inspector .console-user-command > .console-message-text {
  /*text-shadow: 0 0 3px rgba(0,128,255,.5) !important;*/
}
 
#-webkit-web-inspector .console-group-messages,
#-webkit-web-inspector .console-user-command > .console-message-text,
#-webkit-web-inspector .console-formatted-null,
#-webkit-web-inspector .console-formatted-undefined,
#-webkit-web-inspector .console-debug-level .console-message-text,
#-webkit-web-inspector .console-error-level .console-message-text,
#-webkit-web-inspector .console-error-level .section .header .title,
#-webkit-web-inspector .console-group-messages .section .header .title,
#-webkit-web-inspector .console-formatted-object,
#-webkit-web-inspector .console-formatted-node,
#-webkit-web-inspector .console-formatted-array,
#-webkit-web-inspector .section .properties .name,
#-webkit-web-inspector .event-properties .name,
#-webkit-web-inspector .console-formatted-object .name,
#-webkit-web-inspector .console-formatted-number,
#-webkit-web-inspector .console-formatted-string,
#-webkit-web-inspector #console-messages a {
  /*color: transparent !important;*/
}
 
/* HTML PRIDE! */
html {
  /*-webkit-animation: rainbow 8s infinite;*/
}
 
/*
Make every website fall over!
*/
/*
html, body {
height: 100%;
}
 
html {
-webkit-perspective: 1000;
}
 
body {
-webkit-transform-origin: bottom center;
-webkit-transform: rotateX(-90deg);
-webkit-animation: fall 1.5s ease-in;
}
*/
 
/*
Insert a phrase every paragraph
*/
/*
p:before {
content: "YOLO ";
}
*/
 
/* Animations */
 
@-webkit-keyframes blur {
  0% { -webkit-filter: blur(0px); }
  49% { -webkit-filter: blur(0px); }
  50% { -webkit-filter: blur(1px); }
  51% { -webkit-filter: blur(0px); }
  100% { -webkit-filter: blur(0px); }
}
 
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
 
@-webkit-keyframes rainbow {
  100% { -webkit-filter: hue-rotate(360deg); }
}
 
@-webkit-keyframes fall {
  0% { -webkit-transform: none; }
  100% { -webkit-transform: rotateX(-90deg); }
}

 

<title>太阳系</title>

假定各位还应该有别的极客式恶搞艺术,请在评价中留言吗~

 

/* 再次宣称:恶搞带给的持有后果(比方重装浏览器、重装系统、影响工效等卡塔 尔(阿拉伯语:قطر‎,请恶搞者自行担任。伯乐在线不肩负其余权利。/

 

重新整建:伯乐在线-黄利民

作品链接:

【非新鲜表达,转发必需在正文中表明并保留原来的书文链接、译文链接、译者和笔者等新闻,谢谢同盟!】

赞 2 收藏 16 评论

</head>

有关作者:黄利民

图片 11

伯乐在线联合发起人,关切 IT 和互连网。 个人主页 · 作者的篇章 · 99 ·  

图片 12

<body>

<div id="system">

<div id="sun"></div>

<div id="rarth-orbit">

<div id="earth"></div>

<div id="moon-orbit">

<div id="moon"></div>

</div>

</div>

</div>

</body>

</html>

近日我们早已打响地布署了那一个框架。

让我们为大家的太阳热辐射能系统加多一些颜料和吸重力。

2卡塔尔国在html结构中增添CSS文件并加多以下代码:

body{

background: white;

width:100%;

}

#system{

width:500px;

margin:auto;

background:black;

height:600px;

}

#sun{

margin-top:200px;

margin-left:150px;

position:absolute;

width:200px;

height:200px;

background:-webkit-linear-gradient(top, #e0872b 0%,#eace07 100%);

border-radius:50%;

}

#earth{

position:absolute;

margin-left:100px;

height:40px;

width:40px;

background:#eee;

border-radius:50%;

}

#earth-orbit{

position:absolute;

margin-top:100px;

margin-left:50px;

width:400px;

height:400px;

border:1px dotted white;

border-radius:100%;

-webkit-animation:spin 10s linear infinite;

animation:spin 10s linear infinite;

}

#moon{

width:10px;

height:10px;

border-radius:100%;

background:white;

position:absolute;

margin-left:70px;

}

#moon-orbit{

width:90px;

height:90px;

border-radius:100%;

border:1px dotted white;

margin-left:75px;

margin-top:-25px;

-webkit-animation:spin 5s linear infinite;

animation:spin 5s linear infinite;

}

大家需求做的末梢一件事是将动漫片增加到上述要素中。

3卡塔 尔(英语:State of Qatar)在CSS文件末尾增加以下代码:

@-webkit-keyframes spin{

100%{

-webkit-transform:rotate(360deg);

transform:rotate(360deg);

}

}

@keyframes spin{

100%{

-webkit-transform:rotate(360deg);

transform:rotate(360deg);

}

上述代码将旋转地球轨道划分360度,动漫的历次迭代将对地球轨道进行5秒,对于明亮的月轨道将急需10秒,并且迭代计数将是特别的,以便二回又贰遍地持续动漫。

图片 13

多谢阅读!

问询越来越多消息请关切Wechat民众号:蜜望子web 可能Wechat搜索(javascriptes6卡塔 尔(阿拉伯语:قطر‎

将你的查询和申报发送到大家的Wechat大伙儿号或在我们的QQ群634109637商酌。您也能够在上面研究您的标题。

除此以外,别忘了订阅大家。

万风流倜傥你兴奋那篇小说,那么请分享一下,帮助我们中年人。

本文由星彩网app下载发布于前端技术,转载请注明出处:大器晚成款基于jquery和css3的头像恶搞特效,愚人

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。