Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 成人国产在线视频,久久精品国产线看观看亚洲,久久婷婷影院 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          html5+css3實(shí)現(xiàn)特殊網(wǎng)頁效果11例
          
        
           
          
	
	
          
		
                        
          TML 是用來描述網(wǎng)頁的一種語言。
          HTML 指的是超文本標(biāo)記語言 (Hyper Text Markup Language)
          HTML 不是一種編程語言，而是一種標(biāo)記語言 (markup language)
          標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)
          HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
          HTML5 是最新的 HTML 標(biāo)準(zhǔn)。
          HTML5 是專門為承載豐富的 web 內(nèi)容而設(shè)計(jì)的，并且無需額外插件。
          HTML5 擁有新的語義、圖形以及多媒體元素。
          HTML5 提供的新元素和新的 API 簡(jiǎn)化了 web 應(yīng)用程序的搭建。
          HTML5 是跨平臺(tái)的，被設(shè)計(jì)為在不同類型的硬件（PC、平板、手機(jī)、電視機(jī)等等）之上運(yùn)行。
          CSS 是一種描述 HTML 文檔樣式的語言。
          CSS 描述應(yīng)該如何顯示 HTML 元素。
          CSS 用于控制網(wǎng)頁的樣式和布局。
          CSS3 是最新的 CSS 標(biāo)準(zhǔn)。
          CSS3 被拆分為"模塊"。主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。
          CSS3的新特征有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實(shí)現(xiàn)透明效果、漸變效果、使用@Font-Face實(shí)現(xiàn)定制字體、多背景圖、文字或圖像的變形處理（旋轉(zhuǎn)、縮放、傾斜、移動(dòng)）、多欄布局、媒體查詢等。
          1 標(biāo)注效果
          要實(shí)現(xiàn)如下效果：
          HTML5:
          <ruby>
少<rt>shào</rt>小<rt>xiǎo</rt>離<rt>lí</rt>家<rt>jiā</rt>老<rt>lǎo</rt>大<rt>dà</rt>回<rt>huí</rt>
</ruby>，
<ruby>
鄉(xiāng)<rt>xiāng</rt>音<rt>yīn</rt>無<rt>wú</rt>改<rt>gǎi</rt>鬢<rt>bìn</rt>毛<rt>máo</rt>衰<rt>cuī</rt>
</ruby>。
          2 與文本換行相關(guān)的屬性

          使用說明
          line-break
          用于指定如何（或是否）斷行。除了Firefox，其它瀏覽器都支持。取值包括：
          auto，使用缺省的斷行規(guī)則分解文本；
          loose，使用最松散的斷行規(guī)則分解文本，一般用于短行的情況，如報(bào)紙；
          normal，使用最一般的斷行規(guī)則分解文本；
          strict，使用最嚴(yán)格的斷行原則分解文本。
          word-wrap
          允許長(zhǎng)單詞或URL地址換行到下一行。所有瀏覽器都支持。取值包括：
          normal，只在允許的斷字點(diǎn)換行（瀏覽器保持默認(rèn)處理）；
          break-word，在長(zhǎng)單詞或 URL 地址內(nèi)部進(jìn)行換行。
          word-break
          定義文本自動(dòng)換行。Chrome和Safari瀏覽器支持不夠友好。取值包括：
          normal：為默認(rèn)值，允許在字內(nèi)換行;
          keep-all,對(duì)于中文、韓文、日文，不允許字?jǐn)嚅_；
          break-all，與normal相同，允許非亞洲語言文本行的任意字內(nèi)斷開。
          white-space
          設(shè)置如何處理元素中的空格。所有瀏覽器都支持。取值包括：
          normal，默認(rèn)處理方式；
          pre，顯示預(yù)先格式化的文本，當(dāng)文字超出邊界時(shí)不換行；
          nowrap， 強(qiáng)制在同一行內(nèi)顯示所有文本，合并文本間的多余空白，直到文本結(jié)束或者遭遇br對(duì)象；
          pre-wrap，顯示預(yù)先格式化的文本，不合并文字間的空白距離，當(dāng)文字碰到邊界時(shí)發(fā)生換行；
          pre-line， 保持文本的換行，不保留文字間的空白距離，當(dāng)文字碰到邊界時(shí)發(fā)生換行。
          3 text-shadow
          要實(shí)現(xiàn)的效果：
          CSS3：
          p {
    text-align: center;
    font: bold 60px helvetica, arial, sans-serif;
    color: #fff;
    text-shadow: black 0.1em 0.1em 0.2em;
}
          要實(shí)現(xiàn)的效果：
          CSS3：
          p {
    text-align: center;
    font:bold 60px helvetica, arial, sans-serif;
    color: red;
    text-shadow: 0 0 4px white, 
        0 -5px 4px #ff3, 
        2px -10px 6px #fd3, 
        -2px -15px 11px #f80, 
        2px -25px 18px #f20;
}
          要實(shí)現(xiàn)的效果：
          CSS3：
          p {
    text-align: center;
    padding: 24px;
    margin: 0;
    font-family: helvetica, arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: #D1D1D1;
    background: #CCC;
    text-shadow: -1px -1px white,  
        1px 1px #333;
}
          要實(shí)現(xiàn)的效果：
          CSS3：
          p {
    text-align: center;
    padding: 24px;
    margin: 0;
    font-family: helvetica, arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: #D1D1D1;
    background: #CCC;
    text-shadow: 1px 1px white,  
        -1px -1px #333;
}
          4 border的transparent屬性
          要實(shí)現(xiàn)的效果：
          CSS3：
          #demo {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}
          要實(shí)現(xiàn)的效果：
          CSS3：
          #demo {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}
          要實(shí)現(xiàn)的效果：
          CSS3：
          #demo {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}
          要實(shí)現(xiàn)的效果：
          CSS3：
          #demo {
    height: 0;
    width: 120px;
    border-bottom: 120px solid #ec3504;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;

}
          5 transform: rotate
          要實(shí)現(xiàn)的效果：
          CSS3和HTML5：
          <style type="text/css">
.bubble {
    width: 200px; /*定義框大小，可忽略，讓消息框自由收縮*/
    height: 50px;
    background:hsla(93,96%,62%,1); /*定義背景色，必須與下面箭頭背景色一致*/
    padding: 12px;  /*增加補(bǔ)白，防止消息文本跑到框外*/
    position: relative; /*定義定位包含框，方便定位箭頭*/
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;   /*圓角*/
}
.bubble:before { 
    content: "";   /*不顯示任何內(nèi)容*/
    width: 0;  /*定義箭頭內(nèi)容區(qū)大小*/
    height: 0;
    position: absolute;  /*絕對(duì)定位*/
    z-index:-1;  /*顯示在消息框下面*/
}
.bubble.bubble-left:before {
    right: 90%;
    top: 50%;
    
    -webkit-transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    transform: rotate(-25deg);  /*定位箭頭傾斜角度*/
    /*定義箭頭長(zhǎng)短、粗細(xì)*/
    border-top: 20px  solid transparent;
    border-right: 80px  solid hsla(93,96%,62%,1);
    border-bottom: 20px  solid transparent;

}

div {
    margin:50px;
}

<div class="bubble bubble-left">左側(cè)消息提示框<br>class="bubble bubble-left"</div>
          6 background: repeating-linear-gradient
          要實(shí)現(xiàn)的效果：
          CSS3：
          html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    background: -webkit-repeating-linear-gradient(to top, #f9f9f9, #f9f9f9 29px, #ccc 30px);
    background: repeating-linear-gradient( to top, #f9f9f9, #f9f9f9 29px, #ccc 30px );
    background-size: 100% 30px;
    position: relative;
}
body:before {
    content: "";
    display: inline-block;
    height: 100%;
    width: 4px;
    border-left: 4px double #FCA1A1;
    position: absolute;
    left: 30px;
}
          需要實(shí)現(xiàn)的效果：
          CSS3：
          .box {
    background: linear-gradient(-135deg, #f00 30px, #fff 30px, #162e48 32px);
    color: #fff;
    padding: 12px 24px;
}
          7 實(shí)現(xiàn)選項(xiàng)卡效果
          <script>
function setTab(cursel,n){
	    for(i=1;i<=n;i++){
	        	var menu=document.getElementById("tab_"+i);
	        	var con=document.getElementById("con_"+i);
	        	menu.className=i==cursel?"hover":"";
	        	con.style.display=i==cursel?"block":"none";
	    }
}
</script>

<div id="tab">
    <div class="Menubox">
        <ul>
            <li id="tab_1" class="hover" onclick="setTab(1,4)">明星</li>
            <li id="tab_2" onclick="setTab(2,4)">搞笑</li>
            <li id="tab_3" onclick="setTab(3,4)">美女</li>
            <li id="tab_4" onclick="setTab(4,4)">攝影</li>
        </ul>
    </div>
    <div class="Contentbox">
        <div id="con_1" class="hover" ><img src="images/1.png" /></div>
        <div id="con_2" class="hide"><img src="images/2.png" /></div>
        <div id="con_3" class="hide"><img src="images/3.png" /></div>
        <div id="con_4" class="hide"><img src="images/4.png" /></div>
    </div>
</div>
</body>
          8 表格隔行添加背景色
          CSS3：
          tbody tr:nth-child(2n) {
    background-color: #f5fafe;
}
          9 border-radius
          圓角表格的CSS3：
          .bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}
          10 border-spacing
          單線表格的CSS3：
          table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;
}
          11 box-shadow
          設(shè)計(jì)圖片翹邊陰影效果：
          CSS3：
          .box {
    width: 980px;
    clear: both;
    overflow: hidden;
    height: auto;
    margin: 20px auto;
}
.box li {
    background: #fff;
    float: left;
    position: relative;
    margin: 20px 10px;
    border: 2px solid #efefef;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    -o-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
}
.box li img {
    width: 290px;
    height: 200px;
    margin: 5px;
}
.box li:before {
    content: "";
    position: absolute;
    width: 90%;
    height: 80%;
    bottom: 13px;
    left: 21px;
    background: transparent;  /*透明背景*/
    z-index: -2;   /*顯示在照片的下面*/
    box-shadow: 0 8px 20px rgba(0,0,0,0.8);  /*添加陰影*/
    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    -o-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    transform: skew(-12deg) rotate(-6deg);   /*變形并旋轉(zhuǎn)陰影，讓其翹起*/
    -webkit-transform: skew(-12deg) rotate(-6deg);
    -moz-transform: skew(-12deg) rotate(-6deg);
    -os-transform: skew(-12deg) rotate(-6deg);
    -o-transform: skew(-12deg) rotate(-6deg);
}
.box li:after { /*在左側(cè)添加翹邊陰影*/
    content: "";
    position: absolute;
    width: 90%;
    height: 80%;
    bottom: 13px;
    right: 21px;
    z-index: -2;
    background: transparent;
    box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    transform: skew(12deg) rotate(6deg);
    -webkit-transform: skew(12deg) rotate(6deg);
    -moz-transform: skew(12deg) rotate(6deg);
    -os-transform: skew(12deg) rotate(6deg);
    -o-transform: skew(12deg) rotate(6deg);
}

<ul class="box">
    <li><img src="images/1.jpg" /></li>
    <li><img src="images/2.jpg" /></li>
    <li><img src="images/3.jpg" /></li>
</ul>
          ref
          《HTML5+CSS3+JavaScript從入門到精通（實(shí)例版）》
          -End-
          次我們展示多個(gè)圖標(biāo)動(dòng)畫特效！上次有人在問，為什么不寫 font-family，就調(diào)用不了圖標(biāo)。很簡(jiǎn)單，你在 @font-face 中，指定 font-family 名字為 'FishC-icon';
           @font-face {
           font-family:'FishC-icon';
           src: url('font/icons.ttf'), url('font/icons.eot'), url('font/icons.woff'), url('font/icons.svg');
           }
          那么在偽元素中就要告訴腳本，勞資就用'FishC-icon'里的圖標(biāo)！
          這次因?yàn)橛卸鄠€(gè)動(dòng)畫對(duì)象，所以用延遲參數(shù)形成動(dòng)畫序列，先寫 5 個(gè) div 吧
          <!DOCTYPE html>
          <html lang="en">
          <head>
           <meta charset="UTF-8">
           <title>圖標(biāo)元素2</title>
           <style type="text/css">
           @font-face {
           font-family:'FishC-icon';
           src: url('font/icons.ttf'), url('font/icons.eot'), url('font/icons.woff'), url('font/icons.svg');
           }
           .icon{
           display: inline-block;
           margin-right: 33px;
           }
           .android::before{
           content: "\e65f";
           font-size: 66px;
           font-family: 'FishC-icon';
           }
           .app::before{
           content: "\e660";
           font-size: 66px;
           font-family: 'FishC-icon';
           }
           .page::before{
           content: "\e64d";
           font-size: 66px;
           font-family: 'FishC-icon';
           }
           .show::before{
           content: "\e647";
           font-size: 66px;
           font-family: 'FishC-icon';
           }
           .victor::before{
           content: "\e648";
           font-size: 66px;
           font-family: 'FishC-icon';
           }
           </style>
          </head>
          <body>
           <div class="android icon">Android</div>
           <div class="app icon">Apple</div>
           <div class="page icon">Page</div>
           <div class="show icon">Show</div>
           <div class="victor icon">Victor</div>
          </body>
          </html>
          效果圖： 
          此時(shí)由于沒有隱藏文字，這是上一講的點(diǎn)睛之筆 ，有興趣自己去找。但不同之處在于此處的圖標(biāo)都設(shè)置為“inline-block”，使之能夠橫向排列。現(xiàn)在修改樣式
          .icon{
           display: inline-block;
           cursor: help;
           width: 111px;
           height: 111px;
           font-size: 0px;
           line-height: 100px;
           border-radius: 50%;/*圓框*/
           background:#7FE;
           color: #000;
           text-align: center;
           animation:move 1s
           }
          效果圖：
          例如，使圖標(biāo)位置向下偏移 -100%。
          然后在向上移動(dòng)回到初始位置，此過程中讓圖標(biāo)從完全透明化變?yōu)橥耆煌该鳌?/strong>
           @keyframes move{
           from{
           opacity: 0;
           transform: translateY(100%);
           }
           to{
           opacity: 1;
           transform: translateY(0%);
           }
           }

          效果圖：
           
          利用 transform 屬性的 translateY 方法來實(shí)現(xiàn)圖標(biāo)的向下偏移。
          然后使用 opacity 屬性設(shè)置圖標(biāo)的透明度，0.0 （完全透明）到 1.0（完全不透明）。
          由于未設(shè)置單個(gè)圖標(biāo)的延遲，所以一下子 5 個(gè)同時(shí)出現(xiàn)。
          既然提到了延遲，那就設(shè)置一下咯～
          使用 animation-delay 屬性設(shè)置延遲：
          .android{
           animation-delay: 0s;
           }
           .app{
           animation-delay: .3s;
           }
           .page{
           animation-delay: .6s;
           }
           .show{
           animation-delay: 1.2s;
           }
           .victor{
           animation-delay: 1.5s;
           }

          效果圖：
          光這么直棱棱也不好玩。
          然后我們自己設(shè)置貝塞爾（cubic-bezier）速度曲線，達(dá)到不同速率節(jié)奏效果 ～
          假設(shè)你穿越成功，會(huì)看到：
          拖動(dòng)粉點(diǎn)（起始點(diǎn)），藍(lán)點(diǎn)（終點(diǎn)）即可以生成坐標(biāo)。


          生成的結(jié)果為 cubic-bezier(.86,.15,.18,.9)。
          .icon{
           animation-fill-mode: both;
           animation: move 2s cubic-bezier(.86,.15,.18,.9);
           }
          效果圖：
           

          其中 animation-fill-mode 屬性用來屬性規(guī)定動(dòng)畫在播放之前或之后，其動(dòng)畫效果是否可見。。


           設(shè)置完成后，防止圖標(biāo)閃現(xiàn)。
           學(xué)習(xí)HTML5開發(fā)培訓(xùn)，到重慶千鋒教育，千鋒重慶HTML5開發(fā)培訓(xùn)怎么樣？千鋒提供兩周免費(fèi)試聽課程，歡迎你來試聽。
          TML5的canvas技術(shù)制作網(wǎng)頁酷炫效果,可用于網(wǎng)頁首頁展示效果，增強(qiáng)用戶體驗(yàn)！
          效果隨著你的點(diǎn)擊或者鼠標(biāo)觸發(fā)即可隨時(shí)變化閃動(dòng)的粒子！
          實(shí)現(xiàn)方法：
          html:
          css:
          js代碼：
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	


          
 

 







主站蜘蛛池模板：
相泽亚洲一区中文字幕|
国产精品无码一区二区在线观
|
久久一区二区免费播放|
亚洲性无码一区二区三区|
中文字幕精品亚洲无线码一区
|
国产美女口爆吞精一区二区|
亚洲色无码专区一区|
久久久久人妻精品一区蜜桃|
一区二区在线免费视频|
亚洲AV成人一区二区三区观看
|
精品无码人妻一区二区免费蜜桃|
国产不卡视频一区二区三区|
精品一区二区三区在线观看l|
久久精品一区二区三区四区|
国产精品一区二区久久精品无码|
偷拍精品视频一区二区三区|
日韩少妇无码一区二区三区|
日韩在线视频一区|
精品日韩一区二区三区视频|
精品女同一区二区三区免费站|
三上悠亚国产精品一区|
韩国美女vip福利一区|
亚洲一区无码中文字幕|
一区二区三区日本电影|
国产视频一区二区在线播放|
色综合一区二区三区|
无码一区二区波多野结衣播放搜索|
国产在线无码视频一区二区三区
|
国产一区二区三区手机在线观看|
国产一区二区三区免费观看在线|
精品一区二区久久久久久久网精
|
国产一区二区三区免费看|
国产成人午夜精品一区二区三区
|
久久se精品一区二区影院|
鲁丝丝国产一区二区|
亚洲国产精品无码第一区二区三区|
美女毛片一区二区三区四区|
精品女同一区二区三区免费站|
日韩免费无码视频一区二区三区
|
97精品一区二区视频在线观看|
深田咏美AV一区二区三区|