[TOC]
#### transition過渡效果
過渡效果:
? 過渡效果允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、
獲得焦點或對元素任何改變中觸發,并圓滑地以動畫效果改變CSS的屬性值
transition簡寫形式: ? transition: transition-property transition-duration transition-timing-function
transition-delay
transition-property: ? 指定應用過渡的屬性,值為:none(沒有屬性改變);all(所有屬性改變)這
個也是其默認值;indent(元素屬性名)。
transition-duration: ? 指定元素 轉換過程的持續時間,單位為s(秒)或者ms(毫秒)
transition-delay:
? 指定動畫開始執行前的延遲時間,單位為s(秒)或者ms(毫秒)
#### transition過渡動畫
transition-timing-function: ? transition-timing-function的值允許你根據時間的推進去改變屬性值的變換速率,
transition-timing-function有6個可能值:
? ease:(逐漸變慢)默認值,等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0) ? linear:(勻速)
? ease-in:(加速) ? ease-out:(減速)
? ease-in-out:(加速然后減速)
#### transform過渡效果配置
transform:變形效果
語法:transform: rotate | scale | skew | translate
說明:
rotate(<angle>) :指定一個2D旋轉,正數順時針,負數逆時針旋轉
translate(x,y):設置移動效果
scale(number,number):縮放效果
skew(angle,angle) 扭曲效果 skew(30deg,60deg)
transform-origin:設置旋轉元素的基點位置
語法:transform-origin: 20% 40%;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 300px;
height: 200px;
background: dodgerblue;
/*transition用來監控屬性的變化,如果被監控的屬性發生變化,那么就是通過運動,運動過去*/
/*transition: width 2s;*/
transition: all 2s;
}
</style>
</head>
<body>
<input type="button" value="寬度變化" id="btn" />
<br /><br />
<div id="box"></div>
<script type="text/javascript">
var btn = document.getElementById("btn");
var box = document.getElementById("box");
btn.onclick = function(){
box.style.width = '1000px';
box.style.height = '600px';
box.style.background = 'orangered';
}
</script>
</body>
</html>
#### 旋轉基準點設置
transform-origin:設置旋轉元素的基點位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background: #666;
}
#hd{
width: 550px;
height: 550px;
position: relative;
background: url(biaopan.png) no-repeat;
background-size: 100% 100%;
margin: 50px auto;
}
#hd img{
position: absolute;
left: 266px;
top: 233px;
width: 16px;
animation: z 60s linear infinite;
transform-origin: 8px 41px;
}
@keyframes z{
from{
transform: rotate(0);
}
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="hd">
<img src="zhizhen.png" alt="" />
</div>
</body>
</html>
- html&jquery網頁特效
- 標簽分類及特點
- 關于文字標簽
- 網頁定時跳轉
- css透明度和插件
- 0.前端常用工具
- 1.tab切換效果
- 2.tab切換效果多個代碼復用
- 3.百度新聞導航條效果
- 4.解決鼠標移入過快的問題
- 5.滾動條位置
- 6.元素尺寸
- 7.全選反選操作
- 8.固定定位
- 9.開關效果
- 10.節點操作
- 11.仿小米商品展示效果
- 12.仿小米商品展示效果復用
- 13.固定導航欄效果
- 14.凡客輪播圖效果
- 15.頂部下滑廣告效果
- 16.京東左右滑動輪播圖
- 17.京東左右滑動無縫輪播圖
- 18.選擇器
- 19.篩選
- 20.開關效果
- 21.滑動效果
- 22.小米商品效果css實現
- 23.元素水平垂直居中
- laravel5.6
- LARAVEL 介紹&安裝
- javascript & css 腳手架
- php常用工具類
- 安裝laravel-ide-helper增強代碼提示
- 使用migration創建表和數據填充
- 解決mysql5.7以下laravel不能執行數據遷移的問題
- 路由
- 登陸操作自定義模型
- 使用中間件middleware進行登錄權限驗證
- 進行表單驗證處理
- 使用laracasts-flash定制消息提示
- 資源路由
- 寶塔面板安裝fileinfo擴展
- laravel上傳處理與使用hdjs快速實現前端上傳組件
- thinkphp
- phpstorm
- phpstorm安裝插件
- 定義快捷鍵
- 關閉提示
- 將代碼實時同步到遠程服務器
- sublime
- composer
- git使用
- git安裝和配置作者信息
- git新建項目和維護項目
- git日志操作
- git別名操作
- git分支操作
- git生成發布壓縮包
- git系統別名
- gitrebase操作
- 使用SSH與GITHUB遠程服務器進行無密碼連接
- 本地版本庫主動使用remote與遠程GITHUB進行關聯
- 本地分支與GITHUB遠程分支同步
- 項目實戰-新入職員工參與項目開發時分支使用
- 自動部署
- ios開發
- linux
- 1.centos6.5 mysql忘記登入密碼
- html5
- 標簽
- 表單
- 音頻與視頻
- webstorage儲存
- canvas
- css3
- 01.CSS3布局
- 02.transition動畫
- 03.animation動畫
- 04.flex彈性盒模型
- Less
- gulpjs
- es6
- ES6模塊化
- let和const命令
- ES6函數擴展&解構賦值
- JavaScript之數據遍歷
- class類
- Set和Map數據結構
- Vue
- 1.創建第一個應用
- 2.屬性動態綁定
- 3.表達式
- 4.解決phpstorm不識別ECMASCRIPT6語法的問題
- 5.watch監聽屬性
- 6.使用object與array控制class
- 7.條件渲染
- 8.循環
- 9.變異方法
- 10.事件
- 11.表單
- 12.組件
- 13.css過渡動
- 14.js庫控制vue過渡動作
- 15.自定義指令directive
- 16.使用vue-cli初始化單頁面應用
- 17.Vue-router路由
- 18.vuex
- 19.vue-cli
- webpack
- zanui
- nodejs