言
“字節跳動”現今也是如日中天,旗下產品,除頭條外,還有短視頻平臺“抖音”,人氣也是非常高,據說擁有7億用戶。
今天我們就來研究研究抖音的logo,蹭蹭熱度。
效果預覽:
CSS3動畫解析抖音 LOGO制作
家好,今天給大家帶來一款旋轉字云html源碼,送給大家,獲取方式在文章末尾。
鼠標沒有經過的時候,所有的文字都是環形飄動狀態(圖1)
圖1
鼠標經過的時候,所有飄動的文字就會排列整齊(圖2)
圖2
動畫預覽(圖3)
本模板編碼:10104,需要的朋友,點擊下面的鏈接后,搜索10104,即可獲取。
就愛UI - 分享UI設計的點點滴滴
者:幻靈爾依 (授權原創)
https://juejin.im/post/5e0fef935188253a624a6a72
《css揭秘》中講了47個css技巧,其中有很多日常編碼中并不會用到,本文除了將書中部分實用技巧羅列出來之外,還嘗試用幫助讀者搞明白background、animation 等常用但是卻掌握不牢固的知識點。所以閱讀本文不僅可以學習一些實用技巧,也可以鞏固自己的 css 基礎知識。
全名Don't Repeat Yourself,該原則適用于所有編程語言而不限于css。
.expand-range {
position: relative;
}
.expand-range:after {
content: '';
position: absolute;
top: -10px; right: -10px; bottom: -10px; left: -10px;
}
推薦使用scss:
@mixin expand-range($top: -10px, $right: $top, $bottom: $top, $left: $right, $position: relative) {
position: $position;
&:after {
content: '';
position: absolute;
top: $top;
right: $right;
bottom: $bottom;
left: $left;
}
}
//使用:.test { @include expand-range($top: -5px, $position: absolute) }
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
層疊上下文
邊框內圓角
clip-path
border-radius: 5em 1em; /*相當于border-radius: 5em 1em 5em 1em / 5em 1em 5em 1em;*/
自適應的橢圓
width: min-content;
自適應寬度
height: 200px;
background: cyan;
box-shadow: 0 0 0 5px #000 inset,
0 0 0 10px #555 inset,
0 0 0 15px #999 inset;
投影模擬多重邊框
box-shadow: 0 5px 4px -4px black;
第二個參數使陰影整體下移 5px ,第三個參數使陰影四周多了 4px 的高斯模糊(注意由于整體下移了 5px,所以此時上方還是沒有陰影露出的),第四個參數又把陰影整體縮小了 4px,,所以左右兩邊才沒有出現模糊半徑導致的高斯模糊陰影色,從而實現單側投影。
單側投影
還可以逗號分隔設置多個陰影色,比如下面的兩側投影效果:地址
box-shadow: 5px 0 5px -5px black,
-5px 0 5px -5px black;
單側投影
filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));
不規則投影
前端開發大都了解糊濾的高斯模鏡效果是filter: blur()實現的,但是卻很少使用濾鏡的其他幾個調色效果。filter 的值有blur()、drop-shadow()、url()、brightness()、contrast()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()~~可以使用復合形式如:filter: sepia(1) saturate(4)等。下面是filter屬性值大集合:地址
濾鏡的染色和褪色效果
餅圖的 css 實現方案非常奇怪,所以我忽略之。推薦使用 svg 的實現方案,非常簡單,先來個基本教學吧~
先畫個圓:
<svg width="100" height="100">
<circle r="25" cx="50" cy="50" />
</svg>
這里 r="25" 是半徑25, cx cy 分別表示圓心的 x y 坐標。
circle {
fill: yellowgreen;
stroke: #666;
stroke-width: 50;
}
這里給圓形定義了一個寬度 40 的描邊:
餅圖 svg
再把描邊設為線段長度 20 間隔 10 的虛線:
circle {
...
stroke-dasharray: 20 10;
}
當把虛線的間隔設定為大于等于圓周時,虛線的線段長度就是一個扇形區域(當線段長度等于圓周時扇區達到100%):
給 svg 設置圓角和背景色,并旋轉 -90deg ,就可以實現一個餅圖:地址(使用currentColor關鍵字和color: inherit 是為了實現DRY原則。)
但是這樣的餅圖其扇區大小是不易計算的,為了方便計算,可以讓虛線的線段長度同時也是圓周無限接近100,這樣就可以更方便的設置扇區的百分比。圓周是 2πr ,所以 100 = 2πr ,計算得出半徑 r 近似值 16。再利用 svg 的 viewBox 屬性,實現自適應容器大小的餅圖:地址
這種方法有個弊端,就是當設置 stroke-dasharray: 100 100 時會有一條縫,這是取近似值無法避免的。
background 是我們最常用的屬性之一,但作為一個老前端,我也只能羞恥的說我目前并沒有完全掌握這個屬性。
background 是一個簡寫屬性,可以包括多個屬性:background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size、background-attachment。接下來我們一個個來看看這些屬性的作用:
簡寫時 background-size 只能緊接著 background-position 出現,以 / 分割,如: "center / 80%"。
border: 10px solid rgba(255, 255, 255, .5);
background: white;
background-clip: padding-box;
半透明邊框
height: 200px;
padding: 10px;
border: 5px solid cyan;
background: lightblue;
background: radial-gradient(#00a4fd, cyan) no-repeat right 100px bottom / 100px 100px;
background-origin: content-box;
背景定位
background-position 設為百分比值較為復雜。百分比值實際上執行了以下的計算公式:
(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)
由計算公式可知:當值為0%時,實際偏移值為0px,此時圖片的左邊界(或上邊界)和容器的左邊界(或上邊界)重合;當值為50%時,實際偏移值為容器減圖片剩余空間的一半,圖片左右邊界(或上下邊界)距離容器左右邊界(或上下邊界)相等,此時圖片的中點和容器的中點重合。當值100%時,實際偏移值為容器減圖片的剩余空間,所以此時圖片的右邊界(或下邊界)和容器的右邊界(或下邊界)重合。二者之差為負值時同樣有效。地址
背景定位
background: linear-gradient(#fb3 50%, #58a 0);
background-size: 100% 30px;
條紋背景
也可以設置為垂直條紋背景:
background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 100% 30px;
還可以設置為斜向條紋:
background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;
垂直條紋背景
斜向條紋需要設置四條條紋才能在平鋪到時候做到無縫拼接。
更好的斜向條紋:(這里必須設置起始值#fb3 0)
background: repeating-linear-gradient(60deg, #fb3 0, #fb3 15px, #58a 0, #58a 30px);
更好的斜向條紋
background: #58a;
background-image: linear-gradient(white 1px, transparent 0),
linear-gradient(to right, white 1px, transparent 0);
background-size: 30px 30px;
網格
更好的網格:
background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
linear-gradient(to right, white 2px, transparent 0),
linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 0),
linear-gradient(to right, rgba(255, 255, 255, .5) 1px, transparent 0);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
更好的網格
background: #eee;
background-image:
linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0),
linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
棋盤
折角
到這里 background 屬性基本講完了,光看無用,多動手實踐吧。
background:
radial-gradient(tan 30%, transparent 0),
radial-gradient(tan 30%, transparent 0);
background-color: #666;
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
波點
background:
radial-gradient(circle at top left, transparent 15px, blue 0) top left,
radial-gradient(circle at top right, transparent 15px, cyan 0) top right,
radial-gradient(circle at bottom right, transparent 15px, cyan 0) bottom right,
radial-gradient(circle at bottom left, transparent 15px, cyan 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
切角
background: conic-gradient(lightblue 30%, yellowgreen 0, yellowgreen 50%, cyan 0);
餅圖
animation 屬性是 animation-name、animation-duration、 animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state屬性的一個簡寫屬性形式。
如何給動畫加上回彈效果呢?這里介紹一種最便利的方法:
回彈效果
上圖圖橫軸為時間,縱軸為動畫進度。圖中貝塞爾曲線有兩個控制手柄,x1, y1 控制第一個錨點,x2, y2控制第二個錨點。其中 x1 、x2 不能大于/小于 1,但是y1, y2 可以。當 y2 大于 1 時,就會產生提前到達終點,然后超過終點,然后再返回終點的效果,像回彈一樣。地址
animation: bounce 3s both cubic-bezier(.7, .1, .3, 2);
transition 屬性是 transition-property、transition-duration、transition-timing-function、transition-delay的一個簡寫屬性。使用 transition 同樣可以實現回彈效果:地址
p {
transform-origin: 1.4em -.4em;
transition: transform .5s cubic-bezier(.25, .1, .3, 1.5);
}
input:not(:focus) + p {
transform: scale(0);
transition: transform 300ms; /*此處是為了縮小時重置transition-timing-function,不觸發回彈*/
}
div {
width: 150px; height: 150px;
background: url('http://c3.staticflickr.com/3/2671/3904743709_74bc76d5ac_b.jpg');
background-size: auto 100%;
animation: panoramic 10s linear infinite alternate;
}
div:hover {
animation-play-state: paused;
}
@keyframes panoramic {
to { background-position: 100% 0; }
}
@keyframes spin {
to { transform: rotate(1turn); }
}
.avatar {
animation: spin 3s linear 2s infinite;
transform-origin: 110px 110px;
}
.avatar > img {
animation: inherit;
animation-direction: reverse;
}
環形路徑移動的動畫
其實現在社區已經不乏介紹 css 技巧的好文,這里推薦幾篇我覺得寫的極好的css技巧文章(當然可能大家也看過,很慚愧我其實現在也沒看完):
總體來說,《css揭秘》這本書并沒有給我帶來太大驚喜,個人感覺不如閱讀《css世界》帶來的收獲多。當然了,這本書屬于純技巧型的,并沒有講述很多原理知識,所以也不能苛責吧。有興趣的同學可以跟著我學習一波 css世界,相信肯定會有更大的收獲~
*請認真填寫需求信息,我們會在24小時內與您取得聯系。