2. 程式人生 > >CSS過渡、動畫、變換，綜合例項

CSS過渡、動畫、變換，綜合例項

阿新 • • 發佈：2019-02-05

過渡是出去後不會回來，動畫是可以回來的，當然也可以不回來，動畫功能比較多

一、過渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>過渡練習2</title>
    <style type="text/css">
        .class1{
            width:100px;
            height: 100px;
            background-color
 
: aqua;
        }
        .class1:hover{/*代表滑鼠觸發後的變換*/
            width:200px;
            height:200px;
            background-color: brown;
            transition-delay: 200ms;
            transition-duration: 1000ms;
            transition-timing-function: ease;
        }

    </style>
</head>
<body
 
>
<p class="class1"></p>
</body>
</html>

這裡寫圖片描述

二、動畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阿水的阿里</title>
   <style type="text/css">
    .class1{
        width:100px;
        height: 100px;
        background-color
 
: bisque;
    }
    .class1:hover{
        animation-delay: 200ms;/*延遲時間*/
        animation-duration: 1000ms;/*動畫總時間*/
        animation-iteration-count: 4;/*動畫來回次數*/
        animation-direction: alternate;/*有去有回*/
        animation-name: ashui;
    }
    @keyframes ashui {/*這裡to是必須的，代表最後的狀態，其他都是中間過程*/
        from{
            width:100px;
            height: 100px;
            background-color: bisque;
        }
        50%{
            width:150px;
            height: 150px;
            background-color: aquamarine;
        }
        75%{
            width: 240px;
            height: 240px;
            background-color: aliceblue;
        }

        to{
            width:300px;
            height:300px;
            background-color: burlywood;
        }
    }   
   </style>
</head>
<body>
<div align="center">
<p class="class1"></p>
</div>
</body>
</html>

這裡寫圖片描述

這裡動畫注意：@keyframs 自定義名字{}裡面還有要to{}，自定義名字在hover中animation-name：自定義名字，裡面定義

三、變換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>變換練習</title>
    <style type="text/css">
        .class1{
            width: 100px;
            height: 100px;
            background-color: brown;
        }
        .class1:hover{
            width:100px;
            height: 100px;
            background-color: brown;
            transform: rotate(45deg);/*轉動的角度*/
            transform-origin: top right;/*繞哪點轉，若要繞重心轉，這句就不用寫了*/
        }
    </style>
</head>
<body>
<p class="class1"></p>
</body>
</html>

這裡寫圖片描述

注意：變換使用transform, transform-rotate(45deg);代表轉的角度，順逆時針，用數的正負即可，transform-origin:top right;代表繞哪點轉，若繞重心轉，則這句不用寫了

綜合例項

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阿水的阿里</title>
    <style type="text/css">
        div{
            text-align: center;
        }

        .class1{
            width: 300px;
            height: 300px;
            border-style: solid;
            border-radius: 20px/20px;
            margin-top:130px ;/*與div上邊距相差畫素*/
        }
        html:hover .class1{
            animation-delay: 200ms;
            animation-duration: 1s;
            animation-fill-mode: forwards;
            animation-name: ashui;
        }
        @keyframes ashui {
            to{
                width: 40px;
                height: 40px;
                margin-top: 0px;
            }
        }

        p{
            font-family: 微軟雅黑;
            font-size: 40px;
            text-shadow: 1px 1px 2px #b0b0b0;
            opacity:1;
        }
        html:hover p{
            transition-delay: 200ms;
            transition-duration: 1s;
            font-family: 微軟雅黑;
            font-size: 10px;
            text-shadow: 1px 1px 2px #b0b0b0;
            opacity: 0;
        }

    </style>
</head>
<body>
<div>
    <img src="github1.jpg" class="class1">
    <p>阿水的阿里</p>
</div>
</body>
</html>

這裡寫圖片描述

例項使用了前面的很多內容，有一點注意：html:hover .class{}和html:hover p{},代表滑鼠指標觸及網頁頁面就會變化，因為我這裡用p標籤和img很難同時實現，所以這樣省時省力。

相關推薦

CSS過渡、動畫、變換，綜合例項

過渡是出去後不會回來，動畫是可以回來的，當然也可以不回來，動畫功能比較多 一、過渡 <!DOCTYPE html> <html lang="en"> <he

CSS3中的過渡、動畫和變換

過程 效果 head document tip 隨著 http ext 屬性。 一、過渡 　　過渡效果一般由瀏覽器直接改變元素的CSS屬性實現。 　　a、transition屬性 　　transition 屬性是一個簡寫屬性，用於設置四個過渡屬性： transition-

CSS3CORE_2.轉換、過渡、動畫、CSS優化

轉換、過渡、動畫、CSS優化 1 轉換 1.1 轉換簡介 1.2 2D轉換 1.3 3D轉換 2 過渡 2.1 過渡概述 2.2 過渡屬性

前端基礎學習筆記 過渡、動畫和變換

過渡 transition 讓屬性變化成為一個持續一段時間的過程，而不是立即生效的 可能的屬性： 執行變換的屬性： transition-property,   變換延續的時間： transition-duration,  過渡延遲的時間：transition-del

H5之13__CSS過渡、動畫和變換

一.  簡介 在觸控裝置上， 動畫是使用者手勢的反饋. 在所有瀏覽器中，JS  是單執行緒執行的.    如果有非同步任務， 比如 setTimeOut() ，會加入到執行佇列，然後線上程變得空閒時執行。 當 定時器裡面的程式碼執行時， 其他的

【精】iOS知識樹，知識點（包括物件、Block、訊息轉發、GCD、執行時、runloop、動畫、Push、KVO、tableview，UIViewController、提交AppStore）

        本文旨在總結iOS知識網路，知識點，該知識網路羅列出常見UIKit、Foundation的物件特點和一些使用經驗，可以看成是一本書；文字編輯採用樹的形式，對知識點進行羅列，並標註一些使用經驗（★）希望對初學者有用或給一些解決疑難雜症者提供思路；某些知識點會深入

一個輔助開發的UI佈局，包括拖拽、滾動、動畫、背景模糊功能

這是一個輔助開發的UI庫，適用於某些特殊場景，如固定範圍拖拽、動畫、背景模糊效果等。直接看下效果圖會直觀點。 Screenshot Drag模式，能夠拖拽指定的 View，並能和 ViewPager 進行聯動，實現拖拽和 ScrollView 的平滑滾動，帶有墜落回彈效果：

CSS過渡和動畫

css過渡與動畫一.過渡1.定義：將CSS的屬性值在一段時間內平緩變化的過程給體現出來；2.指定過渡屬性 2.1作用：指定哪個或者哪幾個屬性值，在變化時需要使用過渡效果來體現；2.2屬性：transition-property取值：屬性名 例子：transition-property:background;

Vue——關於css過渡和動畫那些事

leave vuejs show -- css ive 一個 title active 1. 單元素/組件的過渡 　　Vue 提供了 transition 的封裝組件，在下列情形中，可以給任何元素和組件添加進入/離開過渡 條件渲染 (使用 v-if) 條件展示 (使用 v

修改Android開機圖片、動畫、聲音

二、修改第二張圖片  方法一：  在window下的操作：  1 在 Widows 環境中建立資料夾：bootanimation  2 在bootanimation資料夾中建立子資料夾：   part0   part1   然後將一批.png檔案拷貝到資料夾part0裡面，part1中暫時不放圖片檔案  3

過渡與動畫（animate.css庫、動畫原理）

## 一、使用animate.css庫 ## Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。 在 CSS 過渡和動畫中自動應用 class 可以配合使用第三方 CSS 動畫庫，如 Animate.css 在過渡鉤子函式中使用 J

CSS 小結筆記之變形、過渡與動畫

transition-delay 延遲時間，單位為s或ms <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

前端-CSS（x、y、z）座標的含義，以及變換的使用

css裡的3d理念 使用css3的3d transform，就可以在平面的網頁裡新增炫酷的三維視覺效果，這很令人愉悅。 需要注意的是，3d transform只是css的一部分，它並不是一個三維引擎（3d engine）。三維引擎一般是這樣的（遊戲引擎

餓了麼專案---10、（1）css3過渡、變換及3d變換、動畫

本部落格參考書籍《HTML5權威指南》，為個人原創，轉載請註明出處 一、過渡 過渡屬性 transition-property ：應用過渡的屬性，值為屬性，值為all時，所有有變化的屬性會有過渡效果 transition-dura

css 的包含塊 、負外邊距，字體，文本行高

區別 網站 默認 lin 文檔 cal 一行 splay inline 一、包含塊 目的：確定元素的位置和相對大小（%） 1.正常文檔流元素和浮動元素 ---- 父元素的 content-box 2.絕對定位元素 ---- 父元素的

IE8、7、6動態添加樣式時，CSS hack的BUG

node.app 更新 什麽 -i ext .com span css樣式 結果 問題描述 下面這段CSS代碼通過JS動態添加，結果會怎樣呢？ .box { background: red; /* normal browsers */ *backgroun

從零開始學習前端開發 — 15、CSS3變形基礎過渡、動畫

steps 方式 css3動畫 rec step round 保持 start radius 一、css3過渡 語法： transition: 過渡屬性 過渡時間 延遲時間 過渡方式; 1.過渡屬性(transition-property) 取值：all 所有發生變化的cs

android仿微信紅包動畫、Kotlin綜合應用、Xposed模塊、炫酷下拉視覺、UC瀏覽器滑動動畫等源碼

架構分析 body oot googl short html 博文 urn 管理 Android精選源碼 仿微信打開紅包旋轉動畫 使用Kotlin編寫的Android應用，內容你想象不到 Android手機上的免Root Android系統日誌Viewer 一個能讓微

網頁性能優化，緩存優化、加載時優化、動畫優化--摘抄

其他 one padding 頁面滾動 chrome 屬性 服務 sync style 本文提供一個優化網頁性能的大概思路，具體操作網上資料很多。 緩存優化 性能優化第一步，便是管理好頁面的緩存，避免重復下載資源。否則，即增加服務器壓力，又折磨用戶的錢包。 瀏覽器緩存機制

050602課堂css3旋轉、過渡、動畫

from == width ansi charset html idt ani nim <!DOCTYPE html> <html> <head> <meta charset="UTF-8">