整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
前已經說過，本人是即將畢業的學生。前幾天的HTML5實訓學到了很多有趣的東西，其中CSS3做的東西很棒。由于時間關系，老師并沒有講解多少，只是做了幾個簡單的案例。其中有利用transform實現文字或圖像的旋轉，縮放，傾斜，移動這四種類型的變形處理；有使用transition功能通過將元素的某個屬性從一個屬性在指定的時間內平滑過渡到另一個屬性值來實現動畫；還有animations通過定義多個關鍵幀以及定義每個關鍵幀中元素的屬性值來實現更為復雜的動畫效果。
我自己還沒有系統的學習CSS3，只是稍有了解。CSS3新增了很多美觀的樣式，不斷豐富頁面內容。我選擇主攻前端正是因為喜歡將用戶體驗盡可能做到最佳，當然也少不了CSS3。今天先來分享一下兩個使用CSS3做出的炫酷小動畫吧，都是從老師那里學到的。
第一個先來大風車吧，說到大風車我第一時間想到了“大風車吱呀吱扭扭地轉”這句詞，嘿嘿。進入正題，首先將靜態頁面搭建起來，這個就比較簡單啦。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>大風車</title>
<style type="text/css">
.wrap{
width: 400px;
height: 400px;
position: relative;
}
.wrap div{
width: 200px;
height: 200px;
position: absolute;
}
.box1{
background: linear-gradient(to top,#dc143c 50%,rgba(0,0,0,0) 50%);
top:100px;
border-radius: 0 0 100px 100px;
}
.box2{
background: linear-gradient(to bottom,#ff4500 50%,rgba(0,0,0,0) 50%);
top:100px;
right: 0;
border-radius: 100px 100px 0 0;
}
.box3{
background: linear-gradient(to right,#00ced1 50%,rgba(0,0,0,0) 50%);
left:100px;
border-radius:100px 0 0 100px;
}
.box4{
background: linear-gradient(to left,pink 50%,rgba(0,0,0,0) 50%);
left:100px;
bottom: 0;
border-radius:0 100px 100px 0;
}
.gunzi{
width: 10px;
height: 300px;
position: absolute;
top:208px;
left:204px;
background:black;
z-index: -1;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
<div class="gunzi"></div>
</body>
</html>
先來看下效果，如下：
接下來在<style></style>標簽中加入：
@keyframes rotate{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
.wrap{
animation:rotate 2s linear infinite;
}
使用@keyframes規則定義關鍵幀創建動畫。效果如下：
大風車到這里就結束啦，最后再來一個3D立方體。
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{-webkit-perspective:1500px;
}
.div{
-webkit-transform-style:preserve-3d;
width:200px;height:200px;
margin:100px auto;
position:relative;
-webkit-transition:-webkit-transform 2s ease 0s;
}
p{margin:0;
padding:0;width:200px;
height:200px;position:absolute;
opacity:0.5;}
p:nth-of-type(1){background-color:#00b38b;
-webkit-transform:translateZ(100px); opacity:1;
}
p:nth-of-type(2){background-color:#ff4500;
-webkit-transform:rotateX(90deg) translateZ(100px);
}
p:nth-of-type(3){background-color:honeydew;-webkit-transform:rotateX(90deg) translateZ(-100px)}
p:nth-of-type(4){background-color:red;-webkit-transform:rotateY(90deg) translateZ(100px)}
p:nth-of-type(5){background-color:#00bfff;-webkit-transform:rotateY(90deg) translateZ(-100px)}
p:nth-of-type(6){background-color:#ff1493;-webkit-transform:rotateY(90deg) translateZ(-100px)}
.div:hover{
-webkit-transform:rotateX(45deg) rotateY(45deg);
}
</style>
</head>
<body>
<div class="div">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
上面使用了perspective 屬性定義 3D元素距視圖的距離。完成之后的效果如下：
以上就是今天的CSS3小動畫全部源代碼以及效果，剛剛接觸，純屬娛樂，不喜勿噴，歡迎大家提出意見~
言：
這次項目用到了一些自定義的數據可視化組件，我把我做的部分抽出來幾個典型做個匯總。
分為如下：
星球環繞旋轉圖
效果展示：
有些圖片（例如上面這個 jpg 動圖）太大，進行了一定程度的壓縮，有點模糊（＾_＾）。
我的碎碎念（*＾3＾）： 之所以出現兩個版本的原因：本來用 svg 實現了一版，結果后來我這個星球的 svg 和同事的其他動畫 svg 沖突了(?????????)，發生了巨大改變，本身 svg 又臭又長，改的太累，干脆用 css3d 重新畫一個了( ′▽｀)。
步驟：
／／舉例一個星球的動畫 <animateMotion dur="6s" begin="0" repeatCount="indefinite"> <mpath xlinkHref="#Path-12" /> //軌跡動畫 </animateMotion> <animateTransform ／／自身動畫，靠近我的時候星球變大，遠離我時變小 id="first" attributeType="XML" attributeName="transform" type="scale" begin="0;second.end " from="1" to="0.512" dur="3s" fill="freeze" /> <animateTransform id="second" attributeType="XML" attributeName="transform" type="scale" begin="first.end" from="0.512" to="1" dur="3s" fill="freeze" /> 作者：溯朝 鏈接：https://juejin.im/post/5b690a66f265da0f820254bd 來源：掘金 著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
參考鏈接：https://www.jianshu.com/p/2b85973ad1ed
<!-- 軌道 --> <div class="orbit"> <!-- 行星 --> <div class="planet planet1"> <!-- <span class="name"></span> --> </div> <div class="planet planet2"> <!-- <span class="name"></span> --> </div> </div>
.orbit { //軌道旋轉，公轉
border: 5px solid red;
transform-style: preserve-3d;
padding: 65px;
width: 500px;
height: 500px;
border-radius: 50%;
animation: orbit-rotate 10s linear infinite;
}
.planet { ／／星球自轉
width: 50px;
height: 50px;
background: url('../../img/ball1.png') no-repeat;
background-size: 100% 100%;
border-radius: 50%;
animation: self-rotate 10s linear infinite;
}
// （1）rotateX 是為了讓整個面傾斜，translateZ是為了防止橢圓（border）因為傾斜發生鋸齒，
// （2）停頓效果的產生，其實我是走了野路子的。五個球，根據360/5=72,寫了五個不同的關于orbit的class，
// 0 + 72，....360依次增加72，直到360，利用setimeout每隔4秒，按順序切換一個class
@keyframes orbit-rotate {
0% {
transform: rotateX(70deg) rotateZ(0deg) translateZ(0);
}
100% {
transform: rotateX(70deg) rotateZ(-360deg) translateZ(0);
}
}
@keyframes self-rotate {
0% {
transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg);
}
100% {
transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}
}
.planet1 { ／／確定星球開始位置
position: absolute;
top: 65px;
right: 65px;
}
.planet2 { ／／確定星球開始位置
position: absolute;
bottom: 65px;
right: 65px;
}
?───Ｏ（≧?≦）Ｏ────?可愛的分割線?───Ｏ（≧?≦）Ｏ────?
地圖
我的碎碎念（*＾3＾）： 奇葩的需求(?o?;;, 因為甲方認為百度地圖等位置不準確，不準使用百度地圖和高德地圖的api，又不滿意天地圖的樣式，所以我們采用的方案是ui畫地圖，導出svg，再讓前端根據svg做各種效果展示。
步驟：
地圖文件如下：index.js主文件包含懸浮事件，index.less樣式文件，mapStyle.js存放背景地圖，pathStyle.js數組格式存放代表地圖上小塊的路徑
代碼如下：
根據接口給的數據，按照五個色系分別給不同的path填充（fill）不同的顏色
const colorMap=[ 'rgba(89, 126, 247, 0.8)', 'rgba(0, 121, 254, 0.8)', 'rgba(0, 121, 254, 0.8)', 'rgba(38, 168, 254, 0.8)', 'rgba(192, 228, 253, 0.8)', ];
render 代碼如下：
?───Ｏ（≧?≦）Ｏ────?可愛的分割線?───Ｏ（≧?≦）Ｏ────?
二維餅圖（風車圖）
效果展示：
我的碎碎念（*＾3＾）：因為 echarts 的餅圖都是一個參數緯度的餅圖，而這次ui要求兩個參數緯度的餅圖，只能自己畫了(′；ω；｀)。因為之前用 canvas 畫過餅圖，本來以為還是簡單的，結果甲方爸爸看了成果，說要加自定義懸浮事件（剛開始 prd 沒有的），廢了3天畫了一個夠用版的。
步驟：
option.push=[{
color: color[i], //餅圖塊顏色
radius: item.revenueTaxAvg, //餅圖塊半徑
name: item.domainName, // 餅圖塊名稱
angle: item.companyCnt, //餅圖塊角度
}];
進行碰撞檢測，判斷鼠標懸浮是落在哪個弧度的餅圖塊之間，如果不再餅圖塊里面懸浮樣式消失。
數學里主要判斷邏輯如下：
//使用勾股定理計算這個點與圓心之間的距離 distanceFromCenter=Math.sqrt(Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2)) //α（弧度）=L （弧長）/ r(半徑)，但是弧長，我求不出來。 （點到圓心的直線的角度）的范圍我主要使用sin（x），如下方法。 判斷不同區間的sin（x）值大小，推斷出懸浮區域所在的值是什么。
?───Ｏ（≧?≦）Ｏ────?可愛的分割線?───Ｏ（≧?≦）Ｏ────?
三棱錐
效果展示：
步驟：
主要原理：兩個三角形 + 一個園=三棱錐
canvas.width=canvas.offsetWidth; //防止圖片變形
canvas.height=canvas.offsetHeight;
ctx.clearRect(0, 0, canvas.width, canvas.height); 清除畫布
const { height }=canvas; // 計算等邊三角形的高
//如下圖，第一個三角形 A-B-C
ctx.moveTo(100, 0); // 從A（100,0）開始
ctx.lineTo(0, height); // 從A(100,0)開始，畫到B (0,height)結束
ctx.lineTo(144, height); // B(0,height)-C(144, height)
//第二個三角形 A-C-D
ctx.moveTo(100, 0); // 從A（100,0）開始
ctx.lineTo(143, height); // A-C
ctx.lineTo(210, height); // C-D
//第三個畫圓
ctx.arc(100, 23 , 23, 0, Math.PI * 2, false); // 畫圓
<canvas id={`pyramid${id}`} height={itemHeight} /> //計算itemHeight
對數增長--三棱錐高度（itemHeight）計算：
假設輸入
data=[0, 1, 2, 3, 4, 5]，x為其中任意值;
maxHeight 為最大高度；
輸出
itemHeight(0 <=itemHeight< maxHeight)，成對數增長
//求最大值
const max=MAX(data)
//排除 x===0 的情況
因為logmax（max）=1,且x > 0
由上圖可得 0 < logmax（x）< 1
所以 0 < logmax(x) * maxHeight < maxHeight
可知 logmax(x) * maxHeight 成對數變化
又因為logmax(x)=loge(x) / loge(max)
//寫成代碼為
const max=data.reduce((a, b)=> {
return a > b ? a : b;
}, 0);
itemHeight=x===0 ? 0 : Math.log(x) / Math.log(max) * maxHeight
==／* 注意 *／==
y 軸計算采用指數增長，因為任意 max 的 0 次方=1， 所以單獨判斷 i <=0的情況
i > 0 ? Math.round(max ** (i * 0.25)) : 0
長方體
效果展示：
步驟：
html
<div id="cube"> <figure class="front">1</figure> <figure class="back">2</figure> <figure class="right">3</figure> <figure class="left">4</figure> <figure class="top">5</figure> <figure class="bottom">6</figure> </div>
css
#box.show-front { transform: translateZ( -50px ) rotateY( 0deg ); }
#box.show-back { transform: translateZ( -50px ) rotateX( -180deg ); }
#box.show-right { transform: translateZ( -150px ) rotateY( -90deg ); }
#box.show-left { transform: translateZ( -150px ) rotateY( 90deg ); }
#box.show-top { transform: translateZ( -100px ) rotateX( -90deg ); }
#box.show-bottom { transform: translateZ( -100px ) rotateX( 90deg ); }
增量增長--長方形高度（itemHeight）計算：
//求數據的和
const sum=data.reduce((a, b)=> {
return a + b;
}, 0);
itemHeight=x <=min ? min : min + (max-min) * x /sum;
?───Ｏ（≧?≦）Ｏ────?可愛的分割線?───Ｏ（≧?≦）Ｏ────?
總結
我第一次寫這么多字的總結技術的文章，排版有點亂，(╯°□°）╯︵ ┻━┻。大部分的內容其實很簡單，用到的基本上是初中、高中里面最基礎的數學（其實難了，我也不會了φ(??）。
厚著臉皮說，我可能文字功底不咋地，但是每個例子的中心思想應該都表達了。
最后的最后，看在我第一次寫了這么多字的份上，給個贊唄(///▽///)。
者：lulu_up
轉發鏈接：https://segmentfault.com/u/lulu_up
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
