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 中文字幕在线观看免费视频,91成人在线免费视频,波多野结衣教室 

      

        

          



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

          


          
	

          

 

          
  
          
    
          
      
          
        
          講解 CSS 過渡和動(dòng)畫 transition/animation (很全面 )
          
        
           
          
	
	
          
		
                        
           講解CSS過渡和動(dòng)畫 transition/animation：全方位深入實(shí)踐指南
          **引言：賦予網(wǎng)頁動(dòng)態(tài)生命力**
          CSS過渡（Transition）與動(dòng)畫（Animation）是現(xiàn)代Web前端開發(fā)中不可或缺的設(shè)計(jì)元素，它們使靜態(tài)網(wǎng)頁變得生動(dòng)活潑，極大地提升了用戶體驗(yàn)。本文旨在以全面且易于理解的方式講解CSS過渡與動(dòng)畫的工作原理、應(yīng)用場(chǎng)景及其具體實(shí)現(xiàn)方法，輔以實(shí)例代碼，幫助您更好地理解和掌握這一關(guān)鍵技術(shù)。
          ---
          ### **一、CSS過渡基礎(chǔ)概念**
          **標(biāo)題：走進(jìn)CSS Transition的世界**
          **1. 過渡是什么？**
          CSS過渡是一種視覺效果，它能夠在CSS屬性值發(fā)生變化時(shí)平滑地過渡。例如，當(dāng)鼠標(biāo)懸停在一個(gè)元素上時(shí)，其背景顏色可以從白色逐漸過渡到黑色。
          **2. 如何定義過渡？**
          過渡由三個(gè)關(guān)鍵部分組成：**觸發(fā)器**（何時(shí)啟動(dòng)過渡）、**持續(xù)時(shí)間**（過渡多久完成）以及**執(zhí)行方式**（如何變化）。
          ```css
          /* 基礎(chǔ)過渡設(shè)置 */
          .example {
          transition: property duration timing-function delay;
          }
          /* 示例 */
          .box {
          width: 100px;
          height: 100px;
          background-color: red;
          transition: background-color 0.5s ease-in-out;
          }
          ```
          在此示例中，`.box`元素的背景色會(huì)在屬性值改變時(shí)，在0.5秒內(nèi)平滑過渡。
          ---
          ### **二、過渡觸發(fā)方式**
          **標(biāo)題：觸發(fā)動(dòng)畫的關(guān)鍵時(shí)刻**
          過渡通常在CSS屬性值發(fā)生改變時(shí)自動(dòng)觸發(fā)，常見的觸發(fā)方式有：
          - **偽類觸發(fā)**（`:hover`, `:focus`, `:active`等）
          - **JavaScript操作觸發(fā)**（通過更改DOM元素樣式）
          ```html
          <!DOCTYPE html>
          <html lang="en">
          <head>
          <style>
          .box {
          width: 100px;
          height: 100px;
          background-color: red;
          transition: background-color 0.5s ease-in-out;
          }
          .box:hover {
          background-color: blue;
          }
          </style>
          </head>
          <body>
          <div class="box"></div>
          </body>
          </html>
          ```
          在這個(gè)例子中，當(dāng)鼠標(biāo)懸停在`.box`元素上時(shí)，背景顏色會(huì)通過過渡效果變藍(lán)。
          ---
          ### **三、CSS動(dòng)畫進(jìn)階詳解**
          **標(biāo)題：構(gòu)建復(fù)雜的動(dòng)畫效果**
          CSS動(dòng)畫比過渡更為靈活，允許開發(fā)者定義一系列關(guān)鍵幀（@keyframes），并在指定時(shí)間段內(nèi)逐步變換樣式。
          **1. 創(chuàng)建關(guān)鍵幀規(guī)則**
          ```css
          @keyframes fadeInOut {
          0% { opacity: 0; }
          50% { opacity: 1; }
          100% { opacity: 0; }
          }
          ```
          上述代碼定義了一個(gè)名為`fadeInOut`的動(dòng)畫，元素將在動(dòng)畫期間經(jīng)歷透明度從0到1再到0的變化。
          **2. 應(yīng)用動(dòng)畫**
          ```css
          .box {
          animation-name: fadeInOut;
          animation-duration: 2s;
          animation-iteration-count: infinite;
          animation-direction: alternate;
          }
          ```
          通過`animation-*`系列屬性，我們將`fadeInOut`動(dòng)畫應(yīng)用于`.box`元素，使其無限循環(huán)交替播放，每次持續(xù)2秒。
          ---
          ### **四、動(dòng)畫高級(jí)特性**
          **標(biāo)題：探索動(dòng)畫的更多可能性**
          - **動(dòng)畫填充模式**（animation-fill-mode）控制動(dòng)畫結(jié)束后元素的樣式狀態(tài)。
          - **動(dòng)畫延時(shí)**（animation-delay）決定動(dòng)畫何時(shí)開始。
          - **動(dòng)畫播放次數(shù)**（animation-iteration-count）可設(shè)置動(dòng)畫循環(huán)次數(shù)，甚至使用`infinite`無限循環(huán)。
          - **動(dòng)畫方向**（animation-direction）影響動(dòng)畫是否逆序播放。
          ---
          ### **五、綜合案例分析**
          **標(biāo)題：實(shí)際項(xiàng)目中的CSS過渡與動(dòng)畫運(yùn)用**
          此處可以結(jié)合實(shí)際項(xiàng)目需求，給出一個(gè)或多個(gè)包含復(fù)雜過渡和動(dòng)畫交互的HTML+CSS示例，比如響應(yīng)式導(dǎo)航菜單的展開收起動(dòng)畫、輪播圖切換過渡效果等，以增強(qiáng)文章的實(shí)用性。
          ---
          **結(jié)語：**
          熟練掌握CSS過渡和動(dòng)畫，能讓您的網(wǎng)頁設(shè)計(jì)更具表現(xiàn)力和吸引力。無論是微小的UI細(xì)節(jié)還是復(fù)雜的交互場(chǎng)景，善用過渡和動(dòng)畫都能有效提升用戶體驗(yàn)。記住，適時(shí)適度的動(dòng)態(tài)效果才是錦上添花，過度則可能適得其反。希望通過這篇文章，您能夠洞悉CSS過渡與動(dòng)畫的奧秘，并在實(shí)踐中游刃有余地運(yùn)用這些強(qiáng)大的工具。
          您2019豬事順利，心想事成。
          前言
          前面兩篇文章都有提到過box-shadow，里面也有很多的基礎(chǔ)知識(shí)，有看過的小伙伴應(yīng)該都有或多或少的收獲吧，今天我們?cè)購幕A(chǔ)入手，希望能讓大家更熟悉它。
          沒有看過之前文章的小伙伴請(qǐng)點(diǎn)擊：
          CSS3 box-shadow實(shí)現(xiàn)背景動(dòng)畫
          CSS3動(dòng)畫解析抖音 LOGO制作
          下面我們從最基礎(chǔ)的開始演示。
          單側(cè)投影
          關(guān)鍵點(diǎn): 1、外 box-shadow 前四個(gè)參數(shù)：x 偏移值、y 偏移值 、模糊半徑、擴(kuò)張半徑。 2、單側(cè)投影的核心是第四個(gè)參數(shù)：擴(kuò)張半徑。這個(gè)參數(shù)會(huì)根據(jù)你指定的值去擴(kuò)大或縮小投影尺寸，如果我們用一個(gè)負(fù)的擴(kuò)張半徑，而他的值剛好等于模糊半徑，那么投影的尺寸就會(huì)與投影所屬的元素尺寸完全一致，除非使用偏移量來移動(dòng)他，否則我們將看不到任何投影。
          <style>
.left {
 box-shadow: -8px 0 5px -5px #333;
}

.right {
 box-shadow: 8px 0 5px -5px #333;
}

.top {
 box-shadow: 0 -8px 5px -5px #333;
}

.bottom {
 box-shadow: 0 8px 5px -5px #333;
}
</style>
<div class='left'>左</div>
<div class='right'>右</div>
<div class='top'>上</div>
<div class='bottom'>下</div>

          立體文字陰影
          知識(shí)點(diǎn)： 
          1、立體文字陰影的關(guān)鍵點(diǎn)在于多層 text-shadow 的疊加 
          2、合理運(yùn)用了 SASS 函數(shù)來自動(dòng)計(jì)算多層 text-shadow 的 CSS 代碼 
          3、運(yùn)用了 Sass 的顏色函數(shù)，漸進(jìn)實(shí)現(xiàn)層級(jí)陰影顏色 - fade-out: 改變顏色的透明度，讓顏色更加透明 - desaturate: 改變顏色的飽和度值，讓顏色更少的飽和
          4、HSL(顏色值)
          • H：Hue(色調(diào))。0(或360)表示紅色，120表示綠色，240表示藍(lán)色，也可取其他數(shù)值來指定顏色。取值為：0 - 360
          • S：Saturation(飽和度)。取值為：0.0% - 100.0% 
          •  L：Lightness(亮度)。取值為：0.0% - 100.0%
          <style>
@function blessing($color) {
 $val: 0px 0px $color;
 @for $i from 1 through 50 {
 $color: fade-out(desaturate($color, 1%), .02);
 $val: #{$val}, -#{$i}px #{$i}px #{$color};
 }
 @return $val;
}

div {
 text-align: center;
 font-size: 20vmin;
 line-height: 45vh;
 text-shadow: blessing(hsl(0, 100%, 50%));
 color: hsl(14, 100%, 60%);
}
</style>
<div>福</div>

          編譯后的css(推薦scss在線編譯為css工具) https://www.sassmeister.com/
          ...
div {
 text-align: center;
 font-size: 20vmin;
 line-height: 45vh;
 text-shadow: 0px 0px #992400, 
 1px 1px rgba(152, 36, 1, 0.98), 
 2px 2px rgba(151, 37, 2, 0.96), 
 3px 3px rgba(151, 37, 2, 0.94), 
 ...
 ...
 ... 
 49px 49px rgba(116, 56, 37, 0.02), 
 50px 50px rgba(115, 56, 38, 0);
 color: #ff6333;
}

          從淺到深的學(xué)習(xí) CSS3陰影(box-shadow)
          從淺到深的學(xué)習(xí) CSS3陰影(box-shadow)
          線性漸變模擬長(zhǎng)陰影
          知識(shí)點(diǎn) 
          1、借用了元素的兩個(gè)偽元素 
          2、通過漸變色填充兩個(gè)偽元素，再通過位移、變換放置在合適的位置
          <style>
div {
 position: relative;
 width: 30vmin;
 height: 30vmin;
 line-height: 30vh;
 text-align: center;
 font-size: 30px;
 background: #fff;
 margin: 30vmin auto;
}

div::before,
div::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: -1;
}

div::before {
 content: ':before';
 font-size: 30px;
 text-align: center;
 line-height: 30vh;
 transform-origin: 0 50%;
 transform: translate(100%, 0) skewY(45deg) scaleX(.6);
 background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent);
}

div::after {
 content: ':after';
 font-size: 30px;
 text-align: center;
 line-height: 30vh;
 transform-origin: 0 0;
 transform: translate(0%, 100%) skewX(45deg) scaleY(.6);
 background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent);
}
</style>
<div>Web秀</div>

          從淺到深的學(xué)習(xí) CSS3陰影(box-shadow)
          漸變實(shí)現(xiàn)內(nèi)切角
          知識(shí)點(diǎn)
           1、陰影實(shí)現(xiàn)的關(guān)鍵點(diǎn)在于使用偽元素絕對(duì)定位在容器的一角，元素本身透明，陰影擴(kuò)散開形成內(nèi)切圓角效果 
          2、陰影實(shí)現(xiàn)缺點(diǎn)，單個(gè)標(biāo)簽最多只能是2個(gè)內(nèi)切圓角 
          3、徑向漸變實(shí)現(xiàn)內(nèi)切圓角可以是4邊
          <style>
div {
 position: relative;
 width: 20vw;
 height: 8vw;
 margin: 1vw auto;
 border-radius: 1vmin;
 overflow: hidden;
 line-height: 8vw;
 color: #fff;
 text-align: center;
}

.shadow::before {
 position: absolute;
 content: "";
 top: -2vw;
 left: -2vw;
 width: 4vw;
 height: 4vw;
 border-radius: 50%;
 box-shadow: 0 0 0 15vw #e91e63; 
 z-index: -1;
}

.shadow::after {
 position: absolute;
 content: "";
 bottom: -2vw;
 right: -2vw;
 width: 4vw;
 height: 4vw;
 border-radius: 50%;
 box-shadow: 0 0 0 15vw #e91e63; 
 z-index: -1;
}

.linear {
 background-size: 70% 70%;
 background-image: 
 radial-gradient(
 circle at 100% 100%, 
 transparent 1vw, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 0 0, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 100% 0, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 0 100%, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw);
 background-repeat: no-repeat;
 background-position: 
 right bottom, 
 left top, 
 right top, 
 left bottom;
}
</style>
<div class="shadow">陰影實(shí)現(xiàn)缺點(diǎn)最多是2邊</div>
<div class="linear">徑向漸變內(nèi)切圓角4邊</div>

          從淺到深的學(xué)習(xí) CSS3陰影(box-shadow)
          圓環(huán)進(jìn)度條動(dòng)畫
          知識(shí)點(diǎn) ：圓環(huán)進(jìn)度條的移動(dòng)本質(zhì)上是陰影順序延時(shí)移動(dòng)的結(jié)果。
          <style>
body {
 background: #000;
}

.container {
 position: relative;
 overflow: hidden;
 width: 124px;
 height: 124px;
 overflow: hidden;
 margin: 100px auto;
 border-radius: 50%;
}

.shadow {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 120px;
 height: 120px;
 line-height: 120px;
 border-radius: 50%;
 color: #fff;
 font-size: 20px;
 cursor: pointer;
 box-shadow: 
 60px -60px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63;
 text-align: center;
}
.shadow:hover {
 animation: border 0.5s ease forwards;
}

@keyframes border {
 0% {
 box-shadow: 
 60px -60px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px transparent;
 }
 25% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 50% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 75% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 0px 125px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 100% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 0px 125px 0 2px #e91e63, 
 120px 40px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
}
</style>
<div class="container">
 <div class="shadow">web 秀</div></div>
</div>

          從淺到深的學(xué)習(xí) CSS3陰影(box-shadow)
          公告
          喜歡小編的點(diǎn)擊關(guān)注，了解更多知識(shí)！
          源碼地址和源文件下載請(qǐng)點(diǎn)擊下方“了解更多”
          、涉及的函數(shù)
          隱藏：
          初始化：class='hidden';
          過程中：hide();fadeOut;
          顯示：show();fadeIn();
          二、登錄框界面設(shè)計(jì)
          <div id='login' class='hidden'>
          <div class='login-title'>
          <a href="" title='關(guān)閉' class='close-window'></a>
          </div>
          <div class='login-form'>
          <form action="{:U('Common/login')}" method='post' name='login'>
          <ul>
          <li>
          <label for="login-acc">賬號(hào)</label>
          <input type="text" name='account' class='input' id='login-acc'/>
          </li>
          <li>
          <label for="login-pwd">密碼</label>
          <input type="password" name='pwd' class='input' id='login-pwd'/>
          </li>
          <li>
          <input type="submit" value='' id='login-btn'/>
          </li>
          </ul>
          </form>
          </div>
          </div>
          <!--背景遮罩--><div id='background' class='hidden'></div>
          三、打開登錄彈出框
          $( '.login' ).click( function () {
          var obj = $( '#login' );
          dialog( obj );
          }
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
91精品国产一区|
无码中文字幕人妻在线一区二区三区|
亚洲av福利无码无一区二区|
亚洲性色精品一区二区在线|
亚洲毛片αv无线播放一区|
国产女人乱人伦精品一区二区
|
亚洲日韩精品一区二区三区无码
|
国产短视频精品一区二区三区|
一级毛片完整版免费播放一区|
亚洲av成人一区二区三区在线播放
|
日韩一区二区a片免费观看|
在线视频一区二区|
日韩精品无码免费一区二区三区
|
亚洲国产专区一区|
国产精品福利区一区二区三区四区
|
久久一区二区三区免费|
日韩社区一区二区三区|
国产乱子伦一区二区三区|
2021国产精品视频一区|
亚洲福利一区二区精品秒拍|
亚洲视频一区调教|
亚洲国产视频一区|
蜜臀AV一区二区|
亚洲Av高清一区二区三区|
精品少妇ay一区二区三区|
亚洲一区中文字幕|
国模精品视频一区二区三区|
国精产品一区一区三区有限公司|
亚洲色一区二区三区四区|
久久一区二区三区精华液使用方法|
亚洲第一区二区快射影院|
国产乱码精品一区二区三区|
国产精品亚洲一区二区三区久久
|
亚洲AⅤ视频一区二区三区|
一区二区视频免费观看|
国产在线一区二区三区|
精品国产一区二区三区色欲|
国产精品无码一区二区在线观
|
国产不卡视频一区二区三区|
性色AV一区二区三区|
中文精品一区二区三区四区|