整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          第13天 - 16天搞定前端,CSS的動(dòng)畫效果,酷

          以往,想在HTML上實(shí)現(xiàn)動(dòng)畫效果,要不就用被喬布斯恨死的了Flash 動(dòng)畫,要不就用網(wǎng)頁(yè)動(dòng)畫圖像或者JavaScript 實(shí)現(xiàn)效果。在CSS3之后,就可以用CSS在HTML上實(shí)現(xiàn)動(dòng)畫了。

          要?jiǎng)?chuàng)建 CSS3 動(dòng)畫,你需要了解 @keyframes 規(guī)則。現(xiàn)在 @keyframes 創(chuàng)建動(dòng)畫時(shí),需將其綁定到一個(gè)選擇器,否則動(dòng)畫不會(huì)有任何效果。

          13.1 原生創(chuàng)建動(dòng)畫

          用CSS3原生代碼創(chuàng)建動(dòng)畫,語(yǔ)法是@keyframes animationname {keyframes-selector {css-styles;}},其中animationname :必需,動(dòng)畫的名稱;

          keyframes-selector:必需,動(dòng)畫時(shí)長(zhǎng)的百分比合法的值:0-100%, from(與 0% 相同),to(與 100% 相同)
          css-styles:必需,一個(gè)或多個(gè)合法的 CSS 樣式屬性。

          <!DOCTYPE html>
          <html>
          <head>
              <meta charset="UTF-8">
              <title>動(dòng)起來(lái)</title>
              <style>
                  div {
                      width: 100px;
                      height: 100px;
                      background: red;
                      position: relative;
                      animation: myfirst 5s;
                      -webkit-animation: firstan 5s; /* Safari and Chrome */
                  }
          
                  @keyframes firstan {
                      0% {
                          background: red;
                          left: 0px;
                          top: 0px;
                      }
                      25% {
                          background: yellow;
                          left: 200px;
                          top: 0px;
                      }
                      50% {
                          background: blue;
                          left: 200px;
                          top: 200px;
                      }
                      75% {
                          background: green;
                          left: 0px;
                          top: 200px;
                      }
                      100% {
                          background: red;
                          left: 0px;
                          top: 0px;
                      }
                  }
          
                  @-webkit-keyframes myfirst /* Safari and Chrome */
                  {
                      0% {
                          background: red;
                          left: 0px;
                          top: 0px;
                      }
                      25% {
                          background: yellow;
                          left: 200px;
                          top: 0px;
                      }
                      50% {
                          background: blue;
                          left: 200px;
                          top: 200px;
                      }
                      75% {
                          background: green;
                          left: 0px;
                          top: 200px;
                      }
                      100% {
                          background: red;
                          left: 0px;
                          top: 0px;
                      }
                  }
              </style>
          </head>
          <body>
          <div/>
          </body>
          </html>
          

          輸出結(jié)果


          13.2 動(dòng)畫庫(kù)創(chuàng)建

          如果每次都要自己手動(dòng)用CSS去創(chuàng)建動(dòng)畫,那效果太低了。為此,有人專門專門開發(fā)了CSS動(dòng)畫庫(kù)animation.css。可以在線https://animate.stylek看效果,它里面的動(dòng)畫效果,可以滿足大多數(shù)需求了。下載https://github.com/animate-css/animate.css里的animate.min.css文件,放到HTML文件相同目錄下。

          <!DOCTYPE html>
          <html>
          <head>
              <meta charset="UTF-8">
              <title>用動(dòng)畫庫(kù)實(shí)現(xiàn)動(dòng)畫</title>
              <link rel="stylesheet" type="text/css" href="animate.min.css"/>
          </head>
          <body>
          <main class="animate__animated animate__fadeInLeft">
              老陳說(shuō)編程,動(dòng)畫效果行
          </main>
          </body>
          </html>

          輸出結(jié)果



          好了,有關(guān)CSS動(dòng)畫效果的內(nèi)容,老陳講完了,如果覺(jué)得對(duì)你有所幫助,希望老鐵能轉(zhuǎn)發(fā)點(diǎn)贊,讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點(diǎn)贊,就是對(duì)老陳繼續(xù)創(chuàng)作和分享最大的鼓勵(lì)。

          一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙,分享多年的編程經(jīng)驗(yàn)。想學(xué)編程的朋友,可關(guān)注:老陳說(shuō)編程。分享Python,前端(小程序)、App和嵌入式方面的干貨。關(guān)注我,沒(méi)錯(cuò)的。

          #前端##HTML5##CSS##程序員##Web#

          索 HTML 圖像的不同概念,以及如何有效地使用它們?cè)谀木W(wǎng)站上增加視覺(jué)吸引力、傳達(dá)信息和表達(dá)情感。 本指南包含大量示例和實(shí)用技巧,可幫助您創(chuàng)建一個(gè)視覺(jué)效果驚人且用戶友好的網(wǎng)站。



          圖像是網(wǎng)頁(yè)設(shè)計(jì)師和開發(fā)人員的強(qiáng)大工具,它們可用于傳達(dá)信息、表達(dá)情感并使網(wǎng)站更具視覺(jué)吸引力。 HTML 圖像概念是網(wǎng)頁(yè)設(shè)計(jì)和開發(fā)的重要方面。 它們用于將圖像嵌入到網(wǎng)頁(yè)中,以便于顯示和共享圖片和圖形。 在這篇博文中,我們將探討 HTML 圖像的不同概念以及如何有效地使用它們。

          首先,讓我們談?wù)劜煌愋偷?HTML 圖像。 有兩種主要類型的圖像:內(nèi)嵌圖像和背景圖像。 內(nèi)聯(lián)圖像直接嵌入到 HTML 代碼中,而背景圖像則應(yīng)用于元素的背景。

          1 | 內(nèi)聯(lián)圖像



          在此示例中,內(nèi)聯(lián)圖像“image.jpg”直接嵌入到 HTML 代碼中并顯示給用戶。

          2 | 背景圖片


          在此示例中,背景圖像“image.jpg”應(yīng)用于 div 元素的背景并顯示給用戶。

          3 | 替代 (alt) 文本

          以合乎邏輯且一致的方式使用圖像也很重要。 這意味著您應(yīng)該使用它們來(lái)傳達(dá)與網(wǎng)頁(yè)內(nèi)容相關(guān)的信息或表達(dá)情感,而不是隨意使用它們。 此外,使用 alt 屬性為圖像添加文本替代也很重要,它允許可能使用屏幕閱讀器的用戶訪問(wèn)圖像,或者以防圖像加載失敗。


          在此示例中,替代文本“日落的美麗圖像”讓用戶清楚地了解圖像所代表的內(nèi)容。

          4 | 調(diào)整圖像大小

          另一個(gè) HTML 圖像概念是使用寬度和高度屬性調(diào)整圖像大小的能力。 這些屬性允許您調(diào)整圖像大小以適合您的布局和設(shè)計(jì)。


          在此示例中,圖像的寬度設(shè)置為 300 像素,圖像的高度設(shè)置為 200 像素。

          結(jié)論

          HTML 圖像概念是網(wǎng)頁(yè)設(shè)計(jì)和開發(fā)的重要方面。 它們用于將圖像嵌入到網(wǎng)頁(yè)中,以便于顯示和共享圖片和圖形。 通過(guò)了解不同類型的圖像并正確使用它們,您可以為您的網(wǎng)站增加額外的視覺(jué)吸引力,并以有力的方式傳達(dá)信息或表達(dá)情感。 無(wú)論是使用內(nèi)聯(lián)圖片還是背景圖片,添加替代文本或調(diào)整大小,這些概念都是創(chuàng)建視覺(jué)效果驚人且用戶友好的網(wǎng)站的關(guān)鍵。

          但不要只相信我們的話,您自己試試吧! 嘗試使用 HTML 圖像,看看它們?nèi)绾卧鰪?qiáng)您網(wǎng)站的整體外觀。 通過(guò)每一行代碼,您離創(chuàng)建一個(gè)您的訪問(wèn)者會(huì)喜歡的美觀且引人入勝的網(wǎng)站又近了一步。 請(qǐng)記住,圖像具有喚起情感和傳達(dá)信息的力量,因此請(qǐng)明智地使用它們并將它們作為您網(wǎng)頁(yè)設(shè)計(jì)策略的重要組成部分。 通過(guò)正確組合 HTML 和圖像,您將創(chuàng)建一個(gè)脫穎而出并給訪問(wèn)者留下持久印象的網(wǎng)站。

          我們?cè)陂_發(fā)網(wǎng)站時(shí),一般會(huì)在圖片上加一個(gè)過(guò)光效果,目的是為了,讓用戶明白我的鼠標(biāo)移動(dòng)到這里了,同時(shí)還能增加網(wǎng)頁(yè)上的美觀效果。下面是它的實(shí)現(xiàn)基礎(chǔ)代碼,大家可以看看了解了解。

          html部分

          <div class="box">

          <div class="light">

          </div>

          </div>

          創(chuàng)建一個(gè)box,包裹一個(gè)light

          css部分

          *{

          padding: 0;

          margin: 0;

          }

          html{

          display: flex;

          justify-content: center;

          }

          .box{

          position: relative;

          margin-top: 30px;

          width: 300px;

          height: 200px;

          background-color: green;

          overflow: hidden;

          }

          .light{

          content: '';

          display: block;

          position: absolute;

          top: -20%;

          left: -100%;

          width: 350px;

          height: 100px;

          transform: rotate(-45deg);

          background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));

          /* 過(guò)度實(shí)現(xiàn)部分 */

          /* transition: 0.8s; */

          }

          .box:hover .light{

          /* 過(guò)度實(shí)現(xiàn)部分 */

          /* transform: translate(200%,200%) rotate(-45deg); */

          animation: cross 0.5s;

          }

          @keyframes cross{

          from{

          }

          to{

          top: 80%;

          left: 100%;

          transform: rotate(-45deg);v

          }

          }

          想要通過(guò)過(guò)度效果實(shí)現(xiàn)的同學(xué),將動(dòng)畫效果注釋掉,釋放過(guò)度部分的注釋就可以了。

          實(shí)現(xiàn)原理

          將ligth盒子設(shè)置為寬350px,高100px的長(zhǎng)方形,通過(guò)添加漸變實(shí)現(xiàn)光影效果,再將其逆時(shí)針旋轉(zhuǎn)45度定位于box盒子的左上方,然后通過(guò)“動(dòng)畫”或者“過(guò)度”效果使其向右下方移動(dòng)。(動(dòng)畫效果在鼠標(biāo)離開box的時(shí)候,會(huì)有一個(gè)光影返回去的效果。)


          主站蜘蛛池模板: 欧洲精品码一区二区三区免费看| 国产伦精品一区二区三区精品 | 2014AV天堂无码一区| 国偷自产av一区二区三区| 亚洲sm另类一区二区三区| 精品国产福利第一区二区三区| 日韩精品无码Av一区二区| 四虎在线观看一区二区| 在线精品亚洲一区二区| 91一区二区视频| 麻豆天美国产一区在线播放| 制服中文字幕一区二区 | 亚洲成人一区二区| 波多野结衣中文字幕一区| 国内精自品线一区91| 亚洲精品无码一区二区| 亚洲AV无码一区二区三区牲色| 一区高清大胆人体| 老熟妇仑乱一区二区视頻| 日韩精品中文字幕无码一区| 亚洲av午夜福利精品一区| 日韩一区二区三区无码影院| 久久亚洲一区二区| 亚洲国产高清在线精品一区| 日韩精品一区二区三区中文| 亚洲视频一区在线观看| 伊人色综合一区二区三区影院视频 | 在线观看视频一区二区| 国产SUV精品一区二区88L| 国产a久久精品一区二区三区| 一区二区三区在线|日本| 一区二区三区在线观看免费 | 无码少妇一区二区| 99久久精品日本一区二区免费| 精品亚洲AV无码一区二区三区 | 中文字幕一区精品| 日韩人妻精品一区二区三区视频| 人妻av无码一区二区三区| 国产日本亚洲一区二区三区| 色婷婷av一区二区三区仙踪林| 国产中文字幕一区|