HTML與CSS中的動畫模組
這次帶給大家HTML與CSS中的動畫模組，使用HTML與CSS中的動畫模組注意事項有哪些，以下就是實戰案例，一起來看一下。
一.動畫模組
1.過渡和動畫之間的異同
#1.1不同點
過渡必須人為的觸發才會執行動畫
動畫不需要人為的觸發就可以執行動畫
1.2相同點
過渡和動畫都是用來給元素添加動畫的
過渡和動畫都是系統新增的一些屬性
過渡和動畫都需要滿足三要素才會有動畫效果
2 動畫三要素
2.1告訴系統需要執行哪個動畫
2.2告訴系統我們需要自己創建一個名稱叫做lnj的動畫
2.3告訴系統動畫持續的時長
p{ width: 100px;
height: 50px;
background-color: red;
/*1.告诉系统需要执行哪个动画*/
animation-name: lnj;
/*3.告诉系统动画持续的时长*/
animation-duration: 3s; }
/*2.告诉系统我们需要自己创建一个名称叫做lnj的动画*/
@keyframes lnj {
from{ margin-left: 0; }
to{ margin-left: 500px; }
}二.動畫模組- 其它屬性(上)
p {
width: 100px;
height: 50px;
background-color: red;
animation-name: sport;
animation-duration: 2s;
/*告诉系统多少秒之后开始执行动画*/
/*animation-delay: 2s;*/
/*告诉系统动画执行的速度*/
animation-timing-function: linear;
/*告诉系统动画需要执行几次*/
animation-iteration-count: 3;
//infinite : 无限的
/*告诉系统是否需要执行往返动画
取值: normal, 默认的取值, 执行完一次之后回到起点继续执行下一次
alternate, 往返动画, 执行完一次之后往回执行下一次
*/ animation-direction: alternate; }
@keyframes sport {
from{ margin-left: 0; }
to{ margin-left: 500px; } }
p:hover{
/* 告诉系统当前动画是否需要暂停
取值: running: 执行动画,默认取值
paused: 暂停动画, 当动画执行时,鼠标hover到p上方时,动画停止,鼠标移开,则继续动画;
*/
animation-play-state: paused; }三.動畫模組- 其它屬性(下)
.box2{
width: 200px;
height: 200px;
background-color: blue;
margin: 100px auto;
animation-name: myRotate;
animation-duration: 5s;
animation-delay: 2s;
/* 通过我们的观察, 动画是有一定的状态的
1.等待状态 2.执行状态 3.结束状态 */
/* animation-fill-mode作用: 指定动画等待状态和结束状态的样式
取值: none: 不做任何改变
forwards: 让元素结束状态保持动画最后一帧的样式;
//向前的
backwards: 让元素等待状态的时候显示动画第一帧的样式;
// 向后的
both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式
*/
/*animation-fill-mode: backwards;*/
/*animation-fill-mode: forwards;*/
animation-fill-mode: both; }
@keyframes myRotate {
0%{ transform: rotate(10deg); }
50%{ transform: rotate(50deg); }
100%{ transform: rotate(70deg); }
}
animation-fill-mode四.動畫模組-連寫
1.動畫模組連寫格式
animation:動畫名稱動畫時長動畫運動速度延遲時間執行次數往返動畫;
2.動畫模組連寫格式的簡寫
animation:動畫名稱動畫時長;
#五. 雲層效果
<html lang="en"> <head>
<meta charset="UTF-8"> <title>104-动画模块-云层效果</title> <style>
*{ margin: 0; padding: 0; }
ul{ height: 400px; background-color: skyblue;
margin-top: 100px; animation: change 5s linear 0s infinite alternate;
position: relative; overflow: hidden; //让屏幕下方的滚动条隐藏掉 }
ul li{ list-style: none; width: 400%;
//设置li的宽度为屏幕的四倍,移动最多的为屏幕宽度的三倍,为保证屏幕内一直有云朵,故多设置一个屏幕的宽度的云朵
height: 100%; position: absolute;
// 设置子绝父相后,三个li会重叠到一起
left: 0; top: 0; } ul li:nth-child(1){
background-image: url("images/cloud_one.png");
animation: one 30s linear 0s infinite alternate; }
ul li:nth-child(2){ background-image: url("images/cloud_two.png");
animation: two 30s linear 0s infinite alternate; }
ul li:nth-child(3){ background-image: url("images/cloud_three.png");
animation: three 30s linear 0s infinite alternate; }
@keyframes change {
from{ background-color: skyblue; }
to{ background-color: black; } }
@keyframes one {
from{ margin-left: 0; }
to{ margin-left: -100%;
//如果先往右移动,又出现屏幕上有一节没云朵的情况,故先往左移动;
} }
@keyframes two {
from{ margin-left: 0; }
to{ margin-left: -200%;
//由于动画的时间都一样,但是运动的距离不一样,又由于都是线性速度,所以就会出现有点运动快,有的运动慢!
} }
@keyframes three { from{ margin-left: 0; }
to{ margin-left: -300%; } }
</style> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>六. 無限滾動
<html lang="en"> <head> <meta charset="UTF-8"> <title>105-动画模块-无限滚动</title>
<style> *{ margin: 0; padding: 0; }
p{ width: 600px; height: 188px; border: 1px solid #000;
margin: 100px auto; overflow: hidden; } ul{ width: 2000px;
//这个无限滚动原理就是ul做动画
height: 188px; background-color: black;
//背景颜色黑色,当li的透明度为半透明时,li就会有黑色蒙版效果
animation: move 10s linear 0s infinite normal;
//name 时间 速度 延时 无限重复 是否往返(normal代表不往返)
}
ul li{ float: left; list-style: none; width: 300px;
height: 188px; background-color: red;
border: 1px solid #000; box-sizing: border-box; }
ul:hover{
/*动画添加给谁, 就让谁停止*/
animation-play-state: paused; }
ul:hover li{ opacity: 0.5;
//当li的透明度为0.5时,就会看到父元素的背景颜色(黑色),就会有蒙版效果
}
ul li:hover{ opacity: 1;
//透明度为1,不透明,看不到父元素的背景色,故没有蒙版效果
} @keyframes move {
from{ margin-left: 0; }
to{ margin-left: -1200px;
//只需要移除屏幕4个li的宽度就可. 屏幕上就会显示第5.6两个li,这时,原本的动画就会恢复的原来的位置接着动画,实现了无线滚动效果
} } </style> </head> <body> <p> <ul>
<li></li> <li></li>
<li></li> <li></li>
//把前两个li加在后面,起到过度效果;动画不会显得太生硬.
<li></li> <li></li>
</ul> </p> </body> </html>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是HTML與CSS中的動畫模組的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
vue中怎麼用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。
HTML，CSS和JavaScript的角色：核心職責
Apr 08, 2025 pm 07:05 PM
HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。
React在HTML中的作用：增強用戶體驗
Apr 09, 2025 am 12:11 AM
React通過JSX與HTML結合，提升用戶體驗。 1)JSX嵌入HTML，使開發更直觀。 2)虛擬DOM機制優化性能，減少DOM操作。 3)組件化管理UI，提高可維護性。 4)狀態管理和事件處理增強交互性。
了解HTML，CSS和JavaScript：初學者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
bootstrap怎麼寫分割線
Apr 07, 2025 pm 03:12 PM
創建 Bootstrap 分割線有兩種方法：使用 標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。
bootstrap怎麼設置框架
Apr 07, 2025 pm 03:27 PM
要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。
bootstrap怎麼插入圖片
Apr 07, 2025 pm 03:30 PM
在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。
bootstrap按鈕怎麼用
Apr 07, 2025 pm 03:09 PM
如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本
