css3-漸變，動畫過度，2d基礎
1.CSS3 漸變的語法及應用
##線性漸變，從左到右，或者從上倒下，線性變化
linear-gradient:值1,值2 [值3],值4
值1: top,to bottom,180deg 表示從上到下 bottom,to top,0deg 表示從下到上 left,to right,90deg 表示從左到右 right,to left,270deg 表示從右到左 45deg,to top right 從左上到右上 135deg,to top right 從左上到右上 等等 值2： 起始顏色 值3： 可以設定設定顏色的過度的距離，如50%，就是0到50% 值4： 終止顏色 注：起始位置和終止位置可設定多個顏色； ##徑向漸變，從內而外擴散（圓） radial-gradient:值1,值2 [值3],值4 值1: ellipse:橢圓效果，當元素寬高一致時為正圓 circle:正圓 值2： 起始顏色 值3： 可以設定設定顏色的過度的距離，如50%，就是0到50% 值4： 終止顏色 注：起始位置和終止位置可設定多個顏色； ##重複漸變，按照規律一層一層迴圈 repeating-radial-gradient值1,值2 [值3],值4 值1: ellipse:橢圓效果，當元素寬高一致時為正圓 circle:正圓 值2： 起始顏色 值3： 可以設定設定顏色的過度的距離，如50%，就是0到50% 值4： 終止顏色 注：起始位置和終止位置可設定多個顏色； repeating-linear-gradient值1,值2 [值3],值4 值1: ellipse:橢圓效果，當元素寬高一致時為正圓 circle:正圓 值2： 起始顏色 值3： 可以設定設定顏色的過度的距離，如50%，就是0到50% 值4： 終止顏色 注：起始位置和終止位置可設定多個顏色；
2.CSS3 過渡的用法
transition:值1,值2,值3,值4 值1: transition-property:all 或者其他屬性值 值2： transition-duration:設定時間 如：2s 值3： transition-timing-function:設定速度 linear 勻速 ease 慢快慢 ease-in 慢開始 ease-out 慢結束 ease-in-out 慢開始慢結束 cubic-bezier 自定義貝茲爾曲線 值4： transition-delay:設定延時 如2s
3.CSS3 2D 轉換的應用
transform屬性的屬性值的運用 translate(x,y):設定位移量 x:橫向位移 y:縱向位移 scale(倍數):設定放大和縮小 rotate(角度):設定順時針旋轉的角度 skew(x角度,y角度):設定傾斜角度 當角度為90deg時，消失 matrix()合體寫法 matrix() 方法把所有 2D 轉換方法組合在一起。 matrix() 方法需要六個引數，包含數學函式，允許您：旋轉、縮放、移動以及傾斜元素。 縮放X, tan(X度), tan(Y度),縮放Y,位置X,位置Y
例項
##漸變<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3元素學習</title>
<style type="text/css">
/*線性漸變*/
div{width: 200px;height: 100px;margin-bottom: 50px;}
div:nth-child(1){background: linear-gradient(to right,red,blue);}
div:nth-child(2){background: radial-gradient(circle,red,blue);}
div:nth-child(3){background: radial-gradient(ellipse,red,blue);}
div:nth-child(4){background: repeating-radial-gradient(circle,red,blue);height: 200px;}
div:nth-child(5){background: repeating-linear-gradient(to right,red,blue);}
div:nth-child(6){background: repeating-radial-gradient(circle,red 20%,blue 40%,green 40%);}
</style>
</head>
<body>
<div>線性漸變</div>
<div>映象漸變--circle</div>
<div>映象漸變--ellipse</div>
<div>重複漸變--repeating-radial-gradient</div>
<div>重複漸變--repeating-linear-gradient</div>
<div>重複漸變,多個顏色以及設定範圍--repeating-radial-gradient</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>動畫過度</title>
</head>
<body>
<style type="text/css">
div{width: 600px;height: 600px;background: #99f;position: relative;}
div p{
width: 20px;height: 20px;border-radius: 10px;background: #f99;position: absolute;left: 0;top:0;
/*transition:2s ease all 2s;*/ opacity: 1;
transition-property:all;
transition-duration:2s;
transition-delay:2s;
transition-timing-function:ease-in-out;
}
div:hover p{left: 200px;top:500px;opacity: 0.2;}
</style>
</body>
<div>
<p></p>
</div>
</html>2d元素轉換
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>動畫過度</title>
</head>
<body>
<style type="text/css">
div{width: 600px;height: 600px;background: #99f;position: relative;}
div p{
width: 100px;height: 100px;background: #00f;
/*transform: translate(100px,200px) scale(2) rotate(60deg) skew(20deg) ;*/
transform:matrix(1,2,2,1,100,200);
}
</style>
</body>
<div>
<p></p>
</div>
</html>相關推薦
css3-漸變，動畫過度，2d基礎
1.CSS3 漸變的語法及應用 ##線性漸變，從左到右，或者從上倒下，線性變化 linear-gradient:值1,值2 [值3],值4 值1: top,to
jQuery事件機制，動畫效果，工具和其他操作（三）
不同 匹配 fad namespace event 返回 animate sin 繼續 jQuery事件機制 1 事件操作 1.1 頁面載入事件 $(document).ready(function(){ // 在這裏寫你的代碼... }); 或者 $(function
QQListview左滑刪除，經典案例,高仿QQ左滑，動畫效果，自定義！！
雖然有很多開放寫得已經很完美的listview開源框架, 用起來也很方便， 只需修改下佈局， 大致套路都一樣， 幾乎沒什麼bug。 今天我們來看看自己定義的QQListview； 在這篇文章你能學到什麼？ 1.事件衝突---listview 上下滑動
css3實現顏色漸變、元素的2D轉換(元素的旋轉，縮放，移動，傾斜等)、元素轉換過渡效果
一、顏色漸變：background: linear-gradient(direction, color-stop1, color-stop2, ...); 引數：direction: 方向或者角度； color-stop1, color-stop2, ... ：指定漸變的
jQuery基礎（動畫篇 animate，顯示隱藏，淡入淡出，下拉切換）
app 必須 條件 工作 函數 我們 淡入淡出 延時 button 1.jQuery中隱藏元素的hide方法 讓頁面上的元素不可見，一般可以通過設置css的display為none屬性。但是通過css直接修改是靜態的布局，如果在代碼執行的時候，一般是通過js控制元素的
Three.js基礎：建立Cube並實現鼠標交互，動畫旋轉
src style icm document charset char itl () wid index.html文件： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <
使用CSS3和JavaScript創建一個光滑，動畫的全屏搜索表單
網站 navigator 搜索功能 ppr 16px border ... 增加 屏幕 設計良好且易於訪問的搜索UI可以鼓勵用戶更頻繁地與您網站的搜索功能進行互動，從而提高用戶滿意度並增加頁面瀏覽量。為此，隨著小屏幕設備的主導地位，搜索盒的趨勢是使它們變得非常大和大膽。在本
效果使用css3動畫製作，但是動畫會導致頁面抖動閃屏
2、問題原因 效果使用css3動畫製作，但是動畫會導致頁面抖動閃屏 3、解決方案 使用到動畫的樣式設定如下樣式，可解決 -webkit-backface-visibility: hidden;（設定進行轉換的元素的背面在面對使用者時是否可見：隱藏） // 如果有3d加上下面句 ，沒有可省略 -webk
從零開始學 Web 之 CSS3（六）動畫animation，Web字型
大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 部落格園：http://www.cnblogs.com/lvonve/ CSDN：https://blog.csdn.net/lvonve/
css3 實現動畫效果，怎樣使他無限迴圈動下去？
<pre name="code" class="css">主要需要使用 -webkit-animation 如： -webkit-animation:gogogo 2s infinite linear ; 其中gogogo是自己定義的動畫幀，2s是整個動畫的
css3背景，蒙版，漸變
一、CSS3背景1、背景原點控制（background-origin ：padding-box; (預設)） border-box | padding-box | content-box b
jq div 滾動到指定位置，jq不支援animate實現css3的transform動畫效果
//第一個花括號裡面是動畫內容，可以為空，但不能省去中括號$("#div").animate({},function(){ $("#div").css({ 'transform'
CSS3動畫效果，滑鼠滑入時，文字放大縮小
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS3動畫效果</title> <styl
CSS3基礎第三篇（佈局相關，媒體查詢，使用者介面）
1.多列布局 1.1 多列布局——Columns 為了能在Web頁面中方便實現類似報紙、雜誌那種多列排版的佈局，W3C特意給CSS3增加了一個多列布局模組（CSS Multi C
在React中寫一個Animation元件，為元件進入和離開加上動畫/過度
問題 在單頁面應用中，我們經常需要給路由的切換或者元素的掛載和解除安裝加上過渡效果，為這麼一個小功能引入第三方框架，實在有點小糾結。不如自己封裝。 思路 原理 以進入時opacity: 0 --> opacity: 1 ，退出時opacity: 0 --> opacity: 1為例 元素掛載時
第七天-css基礎（行高，盒子模型，邊距）
昨天 固定 整理 .com add 多行 png 居中 lin 摘要: 基礎知識-css第七天，昨天因為同學的婚禮，所以沒有整理，今天繼續，今天是css基礎的最後一天，知識點不多也不難，主要是後期多練習，鞏固前面學習的知識。還有2個案例的時候視頻，下周學習。下周也要開啟js
jQuery基礎（鼠標事件，表單事件，鍵盤事件，自定義事件 篇）
1.7 傳遞 ret 文本 leave 右鍵 page content gree 1.jQuery鼠標事件之click與dbclick事件 方法一：$ele.click()（不帶參數） <div id="test">點擊觸發<div> $(
jQuery基礎（常用插件 表單驗證，圖片放大鏡，自定義對象級，jQuery UI，面板折疊）
此外 cookie值 添加圖標 tor 列表 需要 droppable 使用 ddn 1.表單驗證插件——validate 該插件自帶包含必填、數字、URL在內容的驗證規則，即時顯示異常信息，此外，還允許自定義驗證規則，插件調用方法如下： $(form).vali
JQuery選擇器，動畫，事件和DOM操作
out 標簽 空格 jquery選擇器 ges 引用 上拉 定義 alt JQuery是由JS封裝的一些方法，供我們調用，可以快速的實現某些JS功能，實際是JS編寫的方法包 將JQuery文件放到JS文件夾下，然後引用到<head></head>中
Python基礎day-6[函數，命名空間，作用域]
必須 數據類型 一個 none locals 函數 嵌套 補充 元組 函數的返回值 通常有參函數是需要返回值的。 返回值的幾種形式: 1.如果函數內沒有return就返回None 2.return 返回的數據類型沒有限制,也可以返回多個值,