界面的一些元素

css代码

  1 #home {
  2     margin: 0 auto;
  3     width: 80%;/*原始65*/
  4     min-width: 980px;/*页面顶部的宽度*/
  5     background-color: rgba(245, 245, 245, 0.7);
  6     padding: 30px;
  7     margin-top: 50px;
  8     margin-bottom: 50px;
  9     box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
 10     border-radius:0.2%;
 11 }
 12 body {  
 13 background-color:black;
 14     background-position: 50% 5%; 
 15     background-size: cover;
 16 }
 17 canvas {
 18   position: fixed;
 19   width: 100%;
 20   height: 100%;
 21 z-index:-1;
 22 }
 23 #img{
 24 border-radius:50%;
 25  position: relative;
 26   left:310px;
 27 top:175px;
 28 }
 29 #blogTitle {
 30     height: 100px;  /*高度*/
 31     clear: both;
 32     background-color:#000000;   //博客标题的背景
 33 }
 34 #Header1_HeaderTitle{
 35    font-size:24px;
 36    font-family:微软雅黑;
 37     color:white;
 38    position: relative;
 39    left:100px;
 40    top:70px;
 41 }
 42 #blogTitle h1 {
 43     font-size: 36px;
 44     font-weight: bold;
 45     line-height: 1.8em;/*原始 1.6em*/
 46     margin-top: 10px;/*原始 15px */
 47     color: #FF1493;
 48 }
 49 #blogTitle h2 {
 50     font-weight: normal;
 51     font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/      
 52     line-height: 1.8;
 53     color: #FF1493;
 54     font-weight: bold;
 55     text-align: right;
 56     float: right; 
 57 }
 58 #navigator{
 59     background-color:#000000;          //标题栏下的颜色
 60     border: 1px solid #ccc;
 61    border-width:1px 0 0 0;
 62 }
 63 .blogStats{
 64 margin-right:10px;
 65 }
 66 #navList a:link, #navList a:visited, #navList a:active{
 67     color: #ffffff;
 68     font-size: 18px;
 69     font-weight: bold;
 70     margin-left:100px;
 71 }
 72 #navList li{
 73  position: relative;
 74   left:200px;
 75 }
 76 #sideBar{
 77 background-color:#000000;
 78 border:none;
 79 }
 80 .blogStats{
 81     color: #eee;
 82 }
 83 .postTitle {
 84     border-left: 8px solid rgba(132,112,255, 0);
 85     margin-left: 10px;
 86     margin-bottom: 10px;
 87     font-size: 20px;
 88     float: right;
 89     width: 100%;
 90     clear: both;
 91 }
 92 .postTitle a:link, .postTitle a:visited, .postTitle a:active {
 93     color:     #FF6A6A;
 94     transition: all 0.4s linear 0s;
 95 }
 96 .postTitle a:hover {
 97     margin-left: 30px;
 98     color: #EE6363;
 99     text-decoration: none;
100 }
101 .postCon {
102     float: right;
103     line-height: 1.5em;
104     width: 100%;
105     clear: both;
106     padding: 10px 0;
107 }
108 #blog-news{
109 background-color:#f0f0f4;
110 height:87px;
111 }
112 #sideBarMain{
113 border-radius:10%;
114 }
115 #profile_block{
116 margin-left:10px;
117 }
118 .day .postTitle a {
119     padding-left: 10px;
120 }
121 .day {
122     background: rgba(255, 255, 255, 0.5);
123 margin-top:15px;
124 padding:0 10px 0 10px;
125 }
126 /*文章附加信息*/
127 .postDesc {   
128     background: url(images/posted_time.png) no-repeat 0 1px;
129     color: #757575;
130     float: left;
131     width: 100%;
132     clear: both;
133     text-align: left;     
134     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
135     font-size: 13px;
136     padding-right: 20px;/*5px  padding-left: 90px;posted 发表时间左边距离*/
137     margin-top: 20px;
138     line-height: 1.8;
139     padding-bottom: 35px;
140 }
141 
142 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, 
143 .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, 
144 .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
145 {
146     background:#f0f0f4;
147     margin-bottom: 35px;
148     word-wrap: break-word;
149 }
150 
151 .CalTitle{
152     background: rgba(255, 255, 255, 0);
153 }
154 .catListTitle{
155     background-color:#cccccc;  //栏目的条纹颜色
156 }
157 .post{
158 padding:0 10px 0 10px;
159 }
160 #sideBar h3{
161 width:125px;
162 posion:relative;
163 margin:16px 0 0 0;
164 padding-left:95px;
165 }
166 #sidebar_shortcut h3{
167 width:140px;
168 padding-left:80px;
169 }
170 #widget_my_zzk{
171 margin-left:10px;
172 }
173 #widget_my_zzk #q{
174 background-color:#ffffff;
175 }
176 #btnZzk{
177 border:1px solid #808080;
178 border-radius:10%;
179 }
180 #widget_my_google .btn_my_zzk{
181 border:1px solid #808080;
182 border-radius:10%;
183 }
184 .input_my_zzk{
185 width:140px;
186 }
187 #widget_my_google{
188 margin-left:10px;
189 }
190 #sidebar_search{
191 height:91px;
192 }
193 #topics{
194     background: rgba(255, 255, 255, 0.5);
195 }
196 
197 .c_ad_block{
198     display: none;
199 }
200 
201 #tbCommentBody{
202     width: 100%;
203     height: 200px;
204     background: rgba(255, 255, 255, 0.5);
205 }
206 
207 #q{background: rgba(255, 255, 255, 0);}
208 
209 .CalNextPrev{background: rgba(255, 255, 255, 0);}
210 
211 .cnblogs_code{
212     background: rgba(255, 255, 255, 0);    
213 }
214 
215 .cnblogs_code div{
216     background: rgba(255, 255, 255, 0);    
217 }
218 
219 .cnblogs_code_toolbar{
220     background: rgba(255, 255, 255, 0);  
221 }
222 #main{min-width: 640px;}
223 .entrylist{
224     background: rgba(255, 255, 255, 0.5);  
225 }
226 #sidebar_shortcut ul{
227 margin-left:15px;
228 margin-top:10px;
229 }
230 #sidebar_shortcut ul li a{
231 font-size:14px;
232 font-family:微软雅黑;
233 color:#f0f0f4;
234 }
235 #comment_form_container,#under_post_news{
236 padding:0 10px 0 10px;
237 }

 

首页html代码：

1、背景

  1 <script>
  2 const STAR_COUNT = ( window.innerWidth + window.innerHeight ) / 8,
  3       STAR_SIZE = 3,
  4       STAR_MIN_SCALE = 0.2,
  5       OVERFLOW_THRESHOLD = 50;
  6 
  7 const canvas = document.querySelector( 'canvas' ),
  8       context = canvas.getContext( '2d' );
  9 
 10 let scale = 1, // device pixel ratio
 11     width,
 12     height;
 13 
 14 let stars = [];
 15 
 16 let pointerX,
 17     pointerY;
 18 
 19 let velocity = { x: 0, y: 0, tx: 0, ty: 0, z: 0.0005 };
 20 
 21 let touchInput = false;
 22 
 23 generate();
 24 resize();
 25 step();
 26 
 27 window.onresize = resize;
 28 canvas.onmousemove = onMouseMove;
 29 canvas.ontouchmove = onTouchMove;
 30 canvas.ontouchend = onMouseLeave;
 31 document.onmouseleave = onMouseLeave;
 32 
 33 function generate() {
 34 
 35    for( let i = 0; i < STAR_COUNT; i++ ) {
 36     stars.push({
 37       x: 0,
 38       y: 0,
 39       z: STAR_MIN_SCALE + Math.random() * ( 1 - STAR_MIN_SCALE )
 40     });
 41    }
 42 
 43 }
 44 
 45 function placeStar( star ) {
 46 
 47   star.x = Math.random() * width;
 48   star.y = Math.random() * height;
 49 
 50 }
 51 
 52 function recycleStar( star ) {
 53 
 54   let direction = 'z';
 55 
 56   let vx = Math.abs( velocity.x ),
 57         vy = Math.abs( velocity.y );
 58 
 59   if( vx > 1 || vy > 1 ) {
 60     let axis;
 61 
 62     if( vx > vy ) {
 63       axis = Math.random() < vx / ( vx + vy ) ? 'h' : 'v';
 64     }
 65     else {
 66       axis = Math.random() < vy / ( vx + vy ) ? 'v' : 'h';
 67     }
 68 
 69     if( axis === 'h' ) {
 70       direction = velocity.x > 0 ? 'l' : 'r';
 71     }
 72     else {
 73       direction = velocity.y > 0 ? 't' : 'b';
 74     }
 75   }
 76   
 77   star.z = STAR_MIN_SCALE + Math.random() * ( 1 - STAR_MIN_SCALE );
 78 
 79   if( direction === 'z' ) {
 80     star.z = 0.1;
 81     star.x = Math.random() * width;
 82     star.y = Math.random() * height;
 83   }
 84   else if( direction === 'l' ) {
 85     star.x = -OVERFLOW_THRESHOLD;
 86     star.y = height * Math.random();
 87   }
 88   else if( direction === 'r' ) {
 89     star.x = width + OVERFLOW_THRESHOLD;
 90     star.y = height * Math.random();
 91   }
 92   else if( direction === 't' ) {
 93     star.x = width * Math.random();
 94     star.y = -OVERFLOW_THRESHOLD;
 95   }
 96   else if( direction === 'b' ) {
 97     star.x = width * Math.random();
 98     star.y = height + OVERFLOW_THRESHOLD;
 99   }
100 
101 }
102 
103 function resize() {
104 
105   scale = window.devicePixelRatio || 1;
106 
107   width = window.innerWidth * scale;
108   height = window.innerHeight * scale;
109 
110   canvas.width = width;
111   canvas.height = height;
112 
113   stars.forEach( placeStar );
114 
115 }
116 
117 function step() {
118 
119   context.clearRect( 0, 0, width, height );
120 
121   update();
122   render();
123 
124   requestAnimationFrame( step );
125 
126 }
127 
128 function update() {
129 
130   velocity.tx *= 0.96;
131   velocity.ty *= 0.96;
132 
133   velocity.x += ( velocity.tx - velocity.x ) * 0.8;
134   velocity.y += ( velocity.ty - velocity.y ) * 0.8;
135 
136   stars.forEach( ( star ) => {
137 
138     star.x += velocity.x * star.z;
139     star.y += velocity.y * star.z;
140 
141     star.x += ( star.x - width/2 ) * velocity.z * star.z;
142     star.y += ( star.y - height/2 ) * velocity.z * star.z;
143     star.z += velocity.z;
144   
145     // recycle when out of bounds
146     if( star.x < -OVERFLOW_THRESHOLD || star.x > width + OVERFLOW_THRESHOLD || star.y < -OVERFLOW_THRESHOLD || star.y > height + OVERFLOW_THRESHOLD ) {
147       recycleStar( star );
148     }
149 
150   } );
151 
152 }
153 
154 function render() {
155 
156   stars.forEach( ( star ) => {
157 
158     context.beginPath();
159     context.lineCap = 'round';
160     context.lineWidth = STAR_SIZE * star.z * scale;
161     context.strokeStyle = 'rgba(255,255,255,'+(0.5 + 0.5*Math.random())+')';
162 
163     context.beginPath();
164     context.moveTo( star.x, star.y );
165 
166     var tailX = velocity.x * 2,
167         tailY = velocity.y * 2;
168 
169     // stroke() wont work on an invisible line
170     if( Math.abs( tailX ) < 0.1 ) tailX = 0.5;
171     if( Math.abs( tailY ) < 0.1 ) tailY = 0.5;
172 
173     context.lineTo( star.x + tailX, star.y + tailY );
174 
175     context.stroke();
176 
177   } );
178 
179 }
180 
181 function movePointer( x, y ) {
182 
183   if( typeof pointerX === 'number' && typeof pointerY === 'number' ) {
184 
185     let ox = x - pointerX,
186         oy = y - pointerY;
187 
188     velocity.tx = velocity.tx + ( ox / 8*scale ) * ( touchInput ? 1 : -1 );
189     velocity.ty = velocity.ty + ( oy / 8*scale ) * ( touchInput ? 1 : -1 );
190 
191   }
192 
193   pointerX = x;
194   pointerY = y;
195 
196 }
197 
198 function onMouseMove( event ) {
199 
200   touchInput = false;
201 
202   movePointer( event.clientX, event.clientY );
203 
204 }
205 
206 function onTouchMove( event ) {
207 
208   touchInput = true;
209 
210   movePointer( event.touches[0].clientX, event.touches[0].clientY, true );
211 
212   event.preventDefault();
213 
214 }
215 
216 function onMouseLeave() {
217 
218   pointerX = null;
219   pointerY = null;
220 
221 }
222 </script>
223 <canvas width="1920" height="617"></canvas>
224 </script>

 

2、头像

1 <div class="title">
2 <img id="img" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2520793935,3193131669&fm=26&gp=0.jpg" width="80px" height="80px">
3 </div>

 

posted @ 2020-07-24 16:52  谷雨秋分  阅读(14)  评论(0)    收藏  举报