好玩兒的css

時間  2020-02-11
標籤 好玩兒 css 欄目 CSS 简体版
原文   原文鏈接

引言

其實很早就想寫一篇關於 css 的文章了。（拖延症，一直沒寫。。。）css

css 發展到今天已經愈來愈強大了。其語法的突飛猛進，讓不少之前完成不了的事情，如今能夠很是輕鬆的作到。html

今天帶你們看幾個用css（部分會用到canvas和js）實現的好玩兒的效果（很差好琢磨下，還真寫不出來）前端

本篇文章有參考一些css大佬的傑做，具體參考連接在文末有說起git

超能陸戰隊-大白

超能陸戰隊中的大白，相信你必定不陌生吧。影片中的大白又萌又可愛，十分惹人喜歡。github

下面讓咱們打造屬於本身的大白吧！web

效果

思路

大白主要是由大大小小的圓和橢圓組成，主要會用到border-radius屬性。算法

總體bigwhite由頭部head（包含 eye、eye2 和 mouth）、軀幹torso（heart）、軀幹鏈接處belly（cover）、左臂left-arm（包含 l-bigfinger、l-smallfinger）、右臂right-arm（包含 r-bigfinger、r-smallfinger）、左腿left-leg和右腿right-leg組成。canvas

相對仍是比較簡單的，具體實現以下:api

代碼實現

html

<body>
  <div id="bigwhite">
    <!--頭部-->
    <div id="head">
      <div id="eye"></div>
      <div id="eye2"></div>
      <div id="mouth"></div>
    </div>

    <!--軀幹-->
    <div id="torso">
      <div id="heart"></div>
    </div>
    <div id="belly">
      <div id="cover"></div>
      <!--和軀幹鏈接處-->
    </div>

    <!--左臂-->
    <div id="left-arm">
      <div id="l-bigfinger"></div>
      <div id="l-smallfinger"></div>
    </div>

    <!--右臂-->
    <div id="right-arm">
      <div id="r-bigfinger"></div>
      <div id="r-smallfinger"></div>
    </div>

    <!--左腿-->
    <div id="left-leg"></div>

    <!--右腿-->
    <div id="right-leg"></div>
</body>
複製代碼

css

body {
  background: #ff3300;
}
#bigwhite {
  margin: 0 auto;
  height: 600px;
  /*隱藏溢出*/
  overflow: hidden;
}
#head {
  height: 64px;
  width: 100px;
  /*畫圓*/
  border-radius: 50%;
  background: #fff;
  margin: 0 auto;
  margin-bottom: -20px;

  border-bottom: 5px solid #e0e0e0;

  /*元素的堆疊順序*/
  z-index: 100;

  position: relative;
}

#eye,
#eye2 {
  width: 11px;
  height: 13px;
  background: #282828;
  border-radius: 50%;
  position: relative;
  top: 30px;
  left: 27px;

  /*旋轉元素*/
  transform: rotate(8deg);
}
#eye2 {
  /*對稱旋轉*/
  transform: rotate(-8deg);
  left: 69px;
  top: 17px;
}
#mouth {
  width: 38px;
  height: 1.7px;
  background: #282828;
  position: relative;
  top: 10px;
  left: 34px;
}

#torso,
#belly {
  margin: 0 auto;
  height: 200px;
  width: 180px;
  background: #fff;
  border-radius: 47%;

  border: 5px solid #e0e0e0;
  border-top: none;
  z-index: 1;
}
#belly {
  height: 300px;
  width: 245px;
  margin-top: -140px;
  z-index: 5;
}
#heart {
  width: 25px;
  height: 25px;
  border-radius: 50px;
  position: relative;
  /*添加陰影*/
  box-shadow: 2px 5px 2px #ccc inset;

  right: -115px;
  top: 40px;
  z-index: 111;
  border: 1px solid #ccc;
}

#left-arm,
#right-arm {
  height: 270px;
  width: 120px;
  border-radius: 50%;
  background: #fff;
  margin: 0 auto;
  position: relative;
  top: -350px;
  left: -100px;
  transform: rotate(200deg);
  z-index: -1;
}
#right-arm {
  transform: rotate(-200deg);
  left: 100px;
  top: -620px;
}

#l-bigfinger,
#r-bigfinger {
  height: 50px;
  width: 20px;
  border-radius: 50%;
  background: #fff;
  position: relative;
  top: -35px;
  left: 39px;
  transform: rotate(-50deg);
}
#r-bigfinger {
  left: 63px;
  transform: rotate(50deg);
}
#l-smallfinger,
#r-smallfinger {
  height: 35px;
  width: 15px;
  border-radius: 50%;
  background: #fff;
  position: relative;
  top: -70px;
  left: 25px;
  transform: rotate(-40deg);
}
#r-smallfinger {
  background: #fff;
  transform: rotate(40deg);
  top: -70px;
  left: 80px;
}

#left-leg,
#right-leg {
  height: 170px;
  width: 90px;
  border-radius: 40% 30% 10px 45%;
  background: #fff;
  position: relative;
  top: -640px;
  left: -45px;
  transform: rotate(-1deg);
  margin: 0 auto;
  z-index: -2;
}
#right-leg {
  border-radius: 40% 30% 45% 10px;
  position: relative;
  margin: 0 auto;
  top: -810px;
  left: 50px;
  transform: rotate(1deg);
}

複製代碼

具體可查看https://codepen.io/jack-cool-the-lessful/pen/vYOYoPpapp

飄逸靈動的綵帶（借鑑尤雨溪博客首頁）

很早以前見過這種效果（當時還不知道這是尤大大的做品）。

第一次看到這個主頁的時候，就以爲很驚豔。主頁圖案的組成元素只有一種：富有魅力的三角網格。整個頁面簡單卻不單調，華麗而不喧鬧。（簡單來講就是有逼格）。

效果

思路

這裏最關鍵的兩個點，繪製三角形的算法和顏色的取值算法。具體參考https://zhuanlan.zhihu.com/p/28257724，這裏面介紹的比較詳細。

下面看一下代碼實現（有註釋）：

代碼

html

<body>
  <div id="wrapper">
    <h1>之晨</h1>
    <h2>公衆號-「前端森林」</h2>
    <p>
      <a href="https://github.com/Jack-cool" target="_blank">Github</a>
    </p>
    <p>
      <a href="https://juejin.im/user/5a767928f265da4e78327344/activities" target="_blank">掘金</a>
    </p>
    <p>
  </div>
  <canvas width="1920" height="917"></canvas>
</body>
複製代碼

css

html,
body {
  overflow: hidden;
  margin: 0;
}

body {
  font-family: "Open Sans", "Helvetica Neue", "Hiragino Sans GB", "LiHei Pro",
    Arial, sans-serif;
  color: #333;
}

#wrapper {
  position: absolute;
  left: 0;
  width: 320px;
  text-align: center;
  top: 50%;
  left: 50%;
  margin-left: -160px;
  margin-top: -160px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

h1 {
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 9px;
  text-transform: uppercase;
  margin: 12px 0;
  left: 4px;
}

h2 {
  color: #999;
  font-weight: normal;
  font-size: 15px;
  letter-spacing: 0.12em;
  margin-bottom: 30px;
  left: 3px;
}

h1,
h2 {
  position: relative;
}

p {
  font-size: 14px;
  line-height: 2em;
  margin: 0;
  letter-spacing: 2px;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

a {
  color: #999;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #f33;
}

複製代碼

js

document.addEventListener("touchmove", function(e) {
  e.preventDefault();
});
var canvasRibbon = document.getElementsByTagName("canvas")[0],
  ctx = canvasRibbon.getContext("2d"), // 獲取canvas 2d上下文
  dpr = window.devicePixelRatio || 1, // the size of one CSS pixel to the size of one physical pixel.
  width = window.innerWidth, // 返回窗口的文檔顯示區的寬高
  height = window.innerHeight,
  RIBBON_WIDE = 90,
  path,
  math = Math,
  r = 0,
  PI_2 = math.PI * 2, // 圓周率*2
  cos = math.cos, // cos函數返回一個數值的餘弦值（-1~1）
  random = math.random; // 返回0-1隨機數
canvasRibbon.width = width * dpr; // 返回實際寬高
canvasRibbon.height = height * dpr;
ctx.scale(dpr, dpr); // 水平、豎直方向縮放
ctx.globalAlpha = 0.6; // 圖形透明度
function init() {
  ctx.clearRect(0, 0, width, height); // 擦除以前繪製內容
  path = [
    { x: 0, y: height * 0.7 + RIBBON_WIDE },
    { x: 0, y: height * 0.7 - RIBBON_WIDE }
  ];
  // 路徑沒有填滿屏幕寬度時，繪製路徑
  while (path[1].x < width + RIBBON_WIDE) {
    draw(path[0], path[1]); // 調用繪製方法
  }
}
// 繪製綵帶每一段路徑
function draw(start, end) {
  ctx.beginPath(); // 建立一個新的路徑
  ctx.moveTo(start.x, start.y); // path起點
  ctx.lineTo(end.x, end.y); // path終點
  var nextX = end.x + (random() * 2 - 0.25) * RIBBON_WIDE,
    nextY = geneY(end.y);
  ctx.lineTo(nextX, nextY);
  ctx.closePath();
  r -= PI_2 / -50;
  // 隨機生成並設置canvas路徑16進制顏色
  ctx.fillStyle =
    "#" +
    (
      ((cos(r) * 127 + 128) << 16) |
      ((cos(r + PI_2 / 3) * 127 + 128) << 8) |
      (cos(r + (PI_2 / 3) * 2) * 127 + 128)
    ).toString(16);
  ctx.fill(); // 根據當前樣式填充路徑
  path[0] = path[1]; // 起點更新爲當前終點
  path[1] = { x: nextX, y: nextY }; // 更新終點
}
// 獲取下一路徑終點的y座標值
function geneY(y) {
  var temp = y + (random() * 2 - 1.1) * RIBBON_WIDE;
  return temp > height || temp < 0 ? geneY(y) : temp;
}
document.onclick = init;
document.ontouchstart = init;
init();

複製代碼

具體可查看https://codepen.io/jack-cool-the-lessful/pen/rNVaBVL

知乎（老版本）首頁動態粒子效果背景

效果

思路

涉及到的知識點主要是：canvas、ES6、requestAnimationFrame

大體思路就是：

  • 定義一個類，建立圓和線的實例
  • 設置單個粒子的隨機 x，y 座標和圓圈的半徑。使用window.innerWidth和window.innerHeight獲取屏幕寬高，圓的大小設置在必定範圍內隨機
  • 使用 canvas 的 api 進行繪製粒子（圓圈）和粒子之間連線，設置一個範圍，在此範圍內的粒子圓心到圓心經過直線鏈接
  • 讓粒子在屏幕範圍內移動
  • 置鼠標的交互事件，至關於以鼠標位置的 x,y 座標爲圓心，固定或隨機值爲半徑從新建立了一個粒子，而且也在必定範圍內也設置和其餘粒子的連線（同第二步）
  • 定義一個變量用來存儲生成的圓，遍歷它，建立實例；
  • 使用requestAnimationFrame讓全部圓動起來

代碼實現

html

<canvas id="canvas"></canvas>
複製代碼

css

html {
  height: 100%;
}
body {
  margin: 0;
  height: 100%;
  background: #fff;
}
canvas {
  display: block;
  width: 100%;
  height: 100%;
}

複製代碼

js

class Circle {
  //建立對象
  //以一個圓爲對象
  //設置隨機的 x，y座標，r半徑，_mx，_my移動的距離
  //this.r是建立圓的半徑，參數越大半徑越大
  //this._mx,this._my是移動的距離，參數越大移動
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.r = Math.random() * 10;
    this._mx = Math.random();
    this._my = Math.random();
  }

  //canvas 畫圓和畫直線
  //畫圓就是正常的用canvas畫一個圓
  //畫直線是兩個圓連線，爲了不直線過多，給圓圈距離設置了一個值，距離很遠的圓圈，就不作連線處理
  drawCircle(ctx) {
    ctx.beginPath();
    //arc() 方法使用一箇中心點和半徑，爲一個畫布的當前子路徑添加一條弧。
    ctx.arc(this.x, this.y, this.r, 0, 360);
    ctx.closePath();
    ctx.fillStyle = "rgba(204, 204, 204, 0.3)";
    ctx.fill();
  }

  drawLine(ctx, _circle) {
    let dx = this.x - _circle.x;
    let dy = this.y - _circle.y;
    let d = Math.sqrt(dx * dx + dy * dy);
    if (d < 150) {
      ctx.beginPath();
      //開始一條路徑，移動到位置 this.x,this.y。建立到達位置 _circle.x,_circle.y 的一條線：
      ctx.moveTo(this.x, this.y); //起始點
      ctx.lineTo(_circle.x, _circle.y); //終點
      ctx.closePath();
      ctx.strokeStyle = "rgba(204, 204, 204, 0.3)";
      ctx.stroke();
    }
  }

  // 圓圈移動
  // 圓圈移動的距離必須在屏幕範圍內
  move(w, h) {
    this._mx = this.x < w && this.x > 0 ? this._mx : -this._mx;
    this._my = this.y < h && this.y > 0 ? this._my : -this._my;
    this.x += this._mx / 2;
    this.y += this._my / 2;
  }
}
//鼠標點畫圓閃爍變更
class currentCirle extends Circle {
  constructor(x, y) {
    super(x, y);
  }

  drawCircle(ctx) {
    ctx.beginPath();
    //註釋內容爲鼠標焦點的地方圓圈半徑變化
    //this.r = (this.r < 14 && this.r > 1) ? this.r + (Math.random() * 2 - 1) : 2;
    this.r = 8;
    ctx.arc(this.x, this.y, this.r, 0, 360);
    ctx.closePath();
    //ctx.fillStyle = 'rgba(0,0,0,' + (parseInt(Math.random() * 100) / 100) + ')'
    ctx.fillStyle = "rgba(255, 77, 54, 0.6)";
    ctx.fill();
  }
}
//更新頁面用requestAnimationFrame替代setTimeout
window.requestAnimationFrame =
  window.requestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.msRequestAnimationFrame;

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let w = (canvas.width = canvas.offsetWidth);
let h = (canvas.height = canvas.offsetHeight);
let circles = [];
let current_circle = new currentCirle(0, 0);

let draw = function() {
  ctx.clearRect(0, 0, w, h);
  for (let i = 0; i < circles.length; i++) {
    circles[i].move(w, h);
    circles[i].drawCircle(ctx);
    for (j = i + 1; j < circles.length; j++) {
      circles[i].drawLine(ctx, circles[j]);
    }
  }
  if (current_circle.x) {
    current_circle.drawCircle(ctx);
    for (var k = 1; k < circles.length; k++) {
      current_circle.drawLine(ctx, circles[k]);
    }
  }
  requestAnimationFrame(draw);
};

let init = function(num) {
  for (var i = 0; i < num; i++) {
    circles.push(new Circle(Math.random() * w, Math.random() * h));
  }
  draw();
};
window.addEventListener("load", init(60));
window.onmousemove = function(e) {
  e = e || window.event;
  current_circle.x = e.clientX;
  current_circle.y = e.clientY;
};
window.onmouseout = function() {
  current_circle.x = null;
  current_circle.y = null;
};

複製代碼

具體可查看https://codepen.io/jack-cool-the-lessful/pen/YzXPzRy

canvas 生成驗證碼

咱們在作一些後臺系統登陸功能的時候，通常都會用到驗證碼，如今用的比較多的一種是前端直接使用canvas生成驗證碼。

效果

因爲該功能相對比較簡單，這裏就不過多作解釋了。（代碼中有對應相關注解）

代碼實現

html

<canvas width="120" height="40" id="c1"></canvas>
複製代碼

css

body {
  text-align: center;
}
canvas {
  border: 1px solid skyBlue;
}

複製代碼

js

// 隨機數
function rn(min, max) {
  return parseInt(Math.random() * (max - min) + min);
}
// 隨機顏色
function rc(min, max) {
  var r = rn(min, max);
  var g = rn(min, max);
  var b = rn(min, max);
  return `rgb(${r},${g},${b})`;
}
// 背景顏色,顏色要淺一點
var w = 120;
var h = 40;
var ctx = c1.getContext("2d");
ctx.fillStyle = rc(180, 230);
ctx.fillRect(0, 0, w, h);
// 隨機字符串
var pool = "ABCDEFGHIJKLIMNOPQRSTUVWSYZ1234567890";
for (var i = 0; i < 4; i++) {
  var c = pool[rn(0, pool.length)]; //隨機的字
  var fs = rn(18, 40); //字體的大小
  var deg = rn(-30, 30); //字體的旋轉角度
  ctx.font = fs + "px Simhei";
  ctx.textBaseline = "top";
  ctx.fillStyle = rc(80, 150);
  ctx.save();
  ctx.translate(30 * i + 15, 15);
  ctx.rotate((deg * Math.PI) / 180);
  ctx.fillText(c, -15 + 5, -15);
  ctx.restore();
}
// 隨機5條幹擾線,干擾線的顏色要淺一點
for (var i = 0; i < 5; i++) {
  ctx.beginPath();
  ctx.moveTo(rn(0, w), rn(0, h));
  ctx.lineTo(rn(0, w), rn(0, h));
  ctx.strokeStyle = rc(180, 230);
  ctx.closePath();
  ctx.stroke();
}
// 隨機產生40個干擾的小點
for (var i = 0; i < 40; i++) {
  ctx.beginPath();
  ctx.arc(rn(0, w), rn(0, h), 1, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.fillStyle = rc(150, 200);
  ctx.fill();
}

複製代碼

具體可查看https://codepen.io/jack-cool-the-lessful/pen/VwLYYbP

抖音 LOGO

抖音咱們天天都在刷，抖音的 logo 你們也再熟悉不過。

效果

思路

抖音 logo 是兩個音符 ♪ 疊加、混合而成的。這個音符能夠拆分爲三個部分:

咱們能夠看到，它由三部分組成：

一、中間的豎線（矩形）

二、右上角的四分之一圓環（利用 border-radius 和 transform 旋轉來實現）

三、左下角的四分之三圓環（利用 border-radius 和 transform 旋轉來實現）

從上面的 logo，咱們能夠清晰的看到兩個音符 ♪ 之間是有重疊部分的。這一塊是經過mix-blend-mode屬性實現的。

CSS3 新增了一個頗有意思的屬性 -- mix-blend-mode ，其中 mix 和 blend 的中文意譯均爲混合，那麼這個屬性的做用直譯過來就是混合混合模式，固然，咱們咱們一般稱之爲混合模式。

由此能夠知道實現該 logo 的關鍵點在於：

  • 主要藉助僞元素實現了總體 J 結構，藉助了 mix-blend-mode 實現融合效果
  • 利用 mix-blend-mode: lighten 混合模式實現兩個 J 形結構重疊部分爲白色

代碼實現

html

<div class="g-container">
  <div class="j"></div>
  <div class="j"></div>
</div>
複製代碼

css(scss)

body {
  background: #000;
  overflow: hidden;
}

.g-container {
  position: relative;
  width: 200px;
  margin: 100px auto;
  filter: contrast(150%) brightness(110%);
}

.j {
  position: absolute;
  top: 0;
  left: 0;
  width: 47px;
  height: 218px;
  z-index: 1;
  background: #24f6f0;

  &::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    border: 47px solid #24f6f0;
    border-top: 47px solid transparent;
    border-radius: 50%;
    top: 121px;
    left: -147px;
    transform: rotate(45deg);
  }

  &::after {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    border: 40px solid #24f6f0;
    border-right: 40px solid transparent;
    border-top: 40px solid transparent;
    border-left: 40px solid transparent;
    top: -110px;
    right: -183px;
    border-radius: 100%;
    transform: rotate(45deg);
    z-index: -10;
  }
}

.j:last-child {
  left: 10px;
  top: 10px;
  background: #fe2d52;
  z-index: 100;
  mix-blend-mode: lighten;
  animation: moveLeft 10s infinite;

  &::before {
    border: 47px solid #fe2d52;
    border-top: 47px solid transparent;
  }
  &::after {
    border: 40px solid #fe2d52;
    border-right: 40px solid transparent;
    border-top: 40px solid transparent;
    border-left: 40px solid transparent;
  }
}

@keyframes moveLeft {
  0% {
    transform: translate(200px);
  }
  50% {
    transform: translate(0px);
  }
  100% {
    transform: translate(0px);
  }
}

複製代碼

具體可查看https://codepen.io/jack-cool-the-lessful/pen/poJvvVB

掘金登陸特效

效果

思路

這裏用到了平時不大可能會用到的:focus-within。

:focus-within 僞類選擇器，它表示一個元素得到焦點，或，該元素的後代元素得到焦點。

這也就意味着，它或它的後代得到焦點，均可以觸發 :focus-within。

深刻了解可查看https://github.com/chokcoco/iCSS/issues/36

代碼實現

html

<div class="g-container">
  <h2>登陸</h2>
  <div class="g-username">
    <input name="loginPhoneOrEmail" maxlength="64" placeholder="請輸入手機號或郵箱" class="input">
    <img src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png" class="g-username">
  </div>

  <div class="g-password">
    <input name="loginPassword" type="password" maxlength="64" placeholder="請輸入密碼" class="input">
    <img src="https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png" class="g-password">
  </div>

  <img src="https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png" class="g-normal">
</div>
複製代碼

css(scss)

$bg-normal: "https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png";
$bg-username: "https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png";
$bg-password: "https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png";

.g-container {
  position: relative;
  width: 318px;
  margin: 100px auto;
  height: 370px;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  z-index: 10;

  h2 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 30px;
  }

  input {
    outline: none;
    padding: 10px;
    width: 100%;
    border: 1px solid #e9e9e9;
    border-radius: 2px;
    outline: none;
    box-sizing: border-box;
    font-size: 16px;
  }
}

img {
  position: absolute;
  top: -20%;
  left: 50%;
  width: 120px;
  height: 95px;
  transform: translate(-50%, 0);
}

.g-username {
  margin-bottom: 10px;

  img {
    display: none;
    width: 120px;
    height: 113px;
  }
}

.g-username:focus-within ~ img {
  display: none;
}

.g-username:focus-within {
  input {
    border-color: #007fff;
  }
  img {
    display: block;
  }
}

.g-password {
  margin-bottom: 10px;

  img {
    display: none;
    width: 103px;
    height: 84px;
    top: -15%;
  }
}

.g-password:focus-within ~ img {
  display: none;
}

.g-password:focus-within {
  input {
    border-color: #007fff;
  }
  img {
    display: block;
  }
}

複製代碼

具體可查看https://codepen.io/jack-cool-the-lessful/pen/VwLYYqz

波浪百分比

第一次見到這種效果好像仍是在手機營業廳裏面，展現剩餘流量時。

不得不感嘆，css 有時真的很強大。固然感受這也屬於 css 的奇技淫巧了。

效果

思路

這裏我簡單說明一下關鍵點：

  • 利用 border-radius 生成橢圓
  • 讓橢圓旋轉起來
  • 並非利用旋轉的橢圓自己生成波浪效果，而是利用它去切割背景，產生波浪的效果。

具體可參考https://zhuanlan.zhihu.com/p/28508128,裏面分別提到了用svg、canvas和純css來實現波浪效果。

咱們這裏是用純css來實現的。

代碼實現

html

<div class="container">
  <div class="wave"></div>
</div>
複製代碼

css(scss)

.container {
  position: absolute;
  width: 200px;
  height: 200px;
  padding: 5px;
  border: 5px solid rgb(0, 102, 204);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
}
.wave {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: rgb(51, 102, 204);
  border-radius: 50%;

  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    top: 0;
    left: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 45%;
    transform: translate(-50%, -70%) rotate(0);
    animation: rotate 6s linear infinite;
    z-index: 10;
  }

  &::after {
    border-radius: 47%;
    background-color: rgba(255, 255, 255, 0.9);
    transform: translate(-50%, -70%) rotate(0);
    animation: rotate 10s linear -5s infinite;
    z-index: 20;
  }
}

@keyframes rotate {
  50% {
    transform: translate(-50%, -73%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -70%) rotate(360deg);
  }
}

複製代碼

具體可查看https://codepen.io/jack-cool-the-lessful/pen/XWbJJLd

酷炫的充電動畫

看完上面的波浪百分比動畫，在此基礎上咱們來實現一個更爲複雜的動畫效果，也就是常見的充電動畫。

效果

思路

  • 畫一個電池
  • 增長陰影及顏色的變化（使用 filter: hue-rotate() 對漸變色彩進行色彩過渡變換動畫）
  • 添加波浪，這裏用一張動圖說明（結合上個波浪百分比，相信你很快就明白了）

代碼實現

html

<div class="container">
  <div class="header"></div>
  <div class="battery">
  </div>
  <div class="battery-copy">
    <div class="g-wave"></div>
    <div class="g-wave"></div>
    <div class="g-wave"></div>
  </div>
</div>
複製代碼

css(scss)

html,
body {
    width: 100%;
    height: 100%;
    display: flex;
    background: #e4e4e4;
}
.container {
  position: relative;
  width: 140px;
  margin: auto;
}

.header {
  position: absolute;
  width: 26px;
  height: 10px;
  left: 50%;
  top: 0;
  transform: translate(-50%, -10px);
  border-radius: 5px 5px 0 0;
  background: rgba(255, 255, 255, 0.88);
}

.battery-copy {
  position: absolute;
  top: 0;
  left: 0;
  height: 220px;
  width: 140px;
  border-radius: 15px 15px 5px 5px;
  overflow: hidden;
}

.battery {
  position: relative;
  height: 220px;
  box-sizing: border-box;
  border-radius: 15px 15px 5px 5px;
  box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.22);
  background: #fff;
  z-index: 1;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 80%;
    background: linear-gradient(
      to bottom,
      #7abcff 0%,
      #00bcd4 44%,
      #2196f3 100%
    );
    border-radius: 0px 0px 5px 5px;
    box-shadow: 0 14px 28px rgba(33, 150, 243, 0),
      0 10px 10px rgba(9, 188, 215, 0.08);
    animation: charging 10s linear infinite;
    filter: hue-rotate(90deg);
  }
}

.g-wave {
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 45% 47% 44% 42%;
  bottom: 25px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1;
  animation: move 10s linear infinite;
}

.g-wave:nth-child(2) {
  border-radius: 38% 46% 43% 47%;
  transform: translate(-50%, 0) rotate(-135deg);
}

.g-wave:nth-child(3) {
  border-radius: 42% 46% 37% 40%;
  transform: translate(-50%, 0) rotate(135deg);
}

@keyframes charging {
  50% {
    box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83),
      0px 4px 10px rgba(9, 188, 215, 0.4);
  }

  95% {
    top: 5%;
    filter: hue-rotate(0deg);
    border-radius: 0 0 5px 5px;
    box-shadow: 0 14px 28px rgba(4, 188, 213, 0.2),
      0 10px 10px rgba(9, 188, 215, 0.08);
  }
  100% {
    top: 0%;
    filter: hue-rotate(0deg);
    border-radius: 15px 15px 5px 5px;
    box-shadow: 0 14px 28px rgba(4, 188, 213, 0),
      0 10px 10px rgba(9, 188, 215, 0.4);
  }
}

@keyframes move {
  100% {
    transform: translate(-50%, -160px) rotate(720deg);
  }
}

複製代碼

具體可查看https://codepen.io/jack-cool-the-lessful/pen/gOpbpaB

參考連接：

  • https://github.com/chokcoco/iCSS
  • https://github.com/chokcoco/CSS-Inspiration

最後

到這裏本篇文章也就結束了，這裏主要是結合我平時的所見所得對好玩兒的css作的簡單的總結。但願能給你帶來幫助！

同時你能夠關注個人同名公衆號【前端森林】，這裏我會按期發一些大前端相關的前沿文章和平常開發過程當中的實戰總結。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程