国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端 CSS : 4# CSS 實(shí)現(xiàn)暖暖的小火堆

malakashi / 931人閱讀

摘要:介紹原文鏈接感謝大佬的前端每日實(shí)戰(zhàn)效果預(yù)覽瀏覽源代碼地址代碼解讀首先是完成結(jié)構(gòu)常規(guī)樣式初始化天上的星星原文中星星是固定位置并且不會(huì)閃爍的而這里我們將會(huì)改變這一狀態(tài)而且為了避免重復(fù)手動(dòng)給星星固定位置及大小所以采用了庫來減少麻煩首先將改

介紹
原文鏈接

感謝 comehope 大佬的 [前端每日實(shí)戰(zhàn)]

效果預(yù)覽

github.io 瀏覽
源代碼地址

https://github.com/shanyuhai1...

代碼解讀 1. 首先是完成 html 結(jié)構(gòu)

常規(guī)樣式初始化

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0 0.5vw;
  height: 100vh;
  background-color: #333;
  overflow: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
2. 天上的星星

原文中星星是固定位置并且不會(huì)閃爍的

而這里我們將會(huì)改變這一狀態(tài), 而且為了避免重復(fù)手動(dòng)給星星固定位置及大小, 所以采用了 d3 庫來減少麻煩

首先將 .stars 改為 grid 布局

使用 span 標(biāo)簽 作為星星

因?yàn)樾切且謺r(shí)間閃爍所以隨機(jī)一個(gè) --delay 參數(shù)

// index.js
const COLUMNS = 15;

d3.select(".stars")
  .style("--columns", COLUMNS)
  .selectAll("span")
  .data(d3.range(COLUMNS * COLUMNS))
  .enter()
  .append("span")
  .style("--delay", () => Math.random() * 20);

先給出大概的范圍, 查看下邊界

.stars {
  width: 99vw;
  height: 70vh;
  position: absolute;
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  border: 1px solid;
}

.stars span {
  width: 0.6vw;
  height: 0.6vw;
  color: whitesmoke;
  background-color: currentColor;
}

星星現(xiàn)在只是一個(gè)個(gè)正方形, 再給正方形添加上旋轉(zhuǎn)閃現(xiàn)的動(dòng)畫即可

.stars span {
  transform: scale(0);
  animation: spin 20s linear infinite;
  animation-delay: calc(var(--delay) * 1s);
}

@keyframes spin {
  0% {
    transform: rotate(0deg) scale(1);
  }

  5%,
  15% {
    transform: rotate(90deg) scale(0);
    background: goldenrod;
  }

  17.5% {
    transform: rotate(180deg) scale(1);
    background-color: currentColor;
  }

  20%,
  100% {
    transform: rotate(90deg) scale(0);
  }
}
3. 添加火堆

首先是修改 DOM

使火堆居中, 利用媒體查詢改變一下在手機(jī)端偏小的問題

.fires {
  position: relative;
  border: 1px solid;
}

@media screen and (min-width: 451px) {
  .fires {
    width: 15vw;
    height: 15vw;
    margin-top: -7vw;
  }
}
@media screen and (max-width: 450px) {
  .fires {
    width: 18vh;
    height: 18vh;
    margin-top: -5vw;
  }
}

接著完成火焰效果, 在父級(jí)添加可用的 color , border-radius 變量

.fires {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  --color-one: #D92B29;
  --color-two: #F5732A;
  --color-three: #F2B338;
  --color-four: #F5D549;
  --shape-one: 79% 21% 64% 36% / 43% 61% 39% 57%;
  --shape-two: 23% 77% 66% 34% / 57% 72% 28% 43%;
  --shape-three: 78% 22% 63% 37% / 39% 27% 73% 61%;
  --shape-four: 35% 65% 78% 22% / 54% 50% 50% 46%;
}

@media screen and (min-width: 451px) {
  .fires__flame {
    width: 6vw;
  }
  .fires__flame:nth-of-type(1) {
    height: 15vw;
  }
  .fires__flame:nth-of-type(2) {
    height: 12vw;
    transform: translate(2.25vw, 1.2vw) rotate(30deg);
  }
  .fires__flame:nth-of-type(3) {
    height: 13.5vw;
    transform: translate(-2.25vw, 1.2vw) rotate(-30deg);
  }
  .fires__flame:nth-of-type(4) {
    height: 10.5vw;
  }
}
@media screen and (max-width: 450px) {
  .fires__flame {
    width: 7.2vh;
  }
  .fires__flame:nth-of-type(1) {
    height: 18vh;
  }
  .fires__flame:nth-of-type(2) {
    height: 14.4vh;
    transform: translate(2.7vh, 1.44vh) rotate(30deg);
  }
  .fires__flame:nth-of-type(3) {
    height: 16.2vh;
    transform: translate(-2.7vh, 1.44vh) rotate(-30deg);
  }
  .fires__flame:nth-of-type(4) {
    height: 12.6vh;
  }
}

.fires__flame {
  position: absolute;
  background-color: var(--color-one);
  border-radius: var(--shape-one);
  z-index: 0;
  animation-name: fire;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  transition: ease 0.4s;
}
.fires__flame:nth-of-type(2) {
  border-radius: var(--shape-two);
  background-color: var(--color-two);
  opacity: 0.9;
  z-index: 2;
  animation-delay: 0.2s;
}
.fires__flame:nth-of-type(3) {
  border-radius: var(--shape-three);
  background-color: var(--color-three);
  opacity: 0.8;
  z-index: 1;
  animation-delay: 0.4s;
}
.fires__flame:nth-of-type(4) {
  border-radius: var(--shape-four);
  background-color: var(--color-four);
  opacity: 0.8;
  z-index: 1;
  animation-delay: 0.6s;
}

當(dāng)然別忘了火焰的動(dòng)畫效果

@keyframes fire {
  0% {
    border-radius: var(--shape-one);
    background-color: var(--color-one);
  }
  25% {
    border-radius: var(--shape-two);
    background-color: var(--color-two);
  }
  50% {
    border-radius: var(--shape-three);
    background-color: var(--color-three);
  }
  75% {
    border-radius: var(--shape-four);
    background-color: var(--color-four);
  }
  100% {
    border-radius: var(--shape-one);
    background-color: var(--color-one);
  }
}

再添加木柴

@media screen and (min-width: 451px) {
  .fires__stick {
    border-radius: 1.5vw;
    width: 3vw;
    height: 13.5vw;
    bottom: -7.5vw;
  }
}
@media screen and (max-width: 450px) {
  .fires__stick {
    border-radius: 1.8vh;
    width: 3.6vh;
    height: 16.2vh;
    bottom: -9vh;
  }
}

.fires__stick {
  background-color: #5a3600;
  position: absolute;
  z-index: 2;
  transform:rotate(-70deg);
}
.fires__stick:last-of-type {
  transform:rotate(70deg);
  background-color: #4e2f01;
}
4. 最后

最后記得把之前確認(rèn)位置及大小的 border 邊框刪除即可

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/117129.html

相關(guān)文章

  • 利用CSS改變圖片顏色的100種方法!

    摘要:前言說到對(duì)圖片進(jìn)行處理,我們經(jīng)常會(huì)想到這類的圖像處理工具。或者是的時(shí)候,對(duì)圖片的對(duì)比度,陰影進(jìn)行處理。過濾器通常被用于調(diào)整圖片,背景和邊界的渲染。最后,安利我們的公眾號(hào)前端指南。 前言 說到對(duì)圖片進(jìn)行處理,我們經(jīng)常會(huì)想到PhotoShop這類的圖像處理工具。作為前端開發(fā)者,我們經(jīng)常會(huì)需要處理一些特效,例如根據(jù)不同的狀態(tài),讓圖標(biāo)顯示不同的顏色。或者是hover的時(shí)候,對(duì)圖片的對(duì)比度,陰影...

    Keven 評(píng)論0 收藏0
  • 利用CSS改變圖片顏色的100種方法!

    摘要:前言說到對(duì)圖片進(jìn)行處理,我們經(jīng)常會(huì)想到這類的圖像處理工具。或者是的時(shí)候,對(duì)圖片的對(duì)比度,陰影進(jìn)行處理。過濾器通常被用于調(diào)整圖片,背景和邊界的渲染。最后,安利我們的公眾號(hào)前端指南。 前言 說到對(duì)圖片進(jìn)行處理,我們經(jīng)常會(huì)想到PhotoShop這類的圖像處理工具。作為前端開發(fā)者,我們經(jīng)常會(huì)需要處理一些特效,例如根據(jù)不同的狀態(tài),讓圖標(biāo)顯示不同的顏色。或者是hover的時(shí)候,對(duì)圖片的對(duì)比度,陰影...

    pinecone 評(píng)論0 收藏0
  • 用Node EJS寫一個(gè)爬蟲腳本每天定時(shí)給心愛的她發(fā)一封暖心郵件

    摘要:本文首發(fā)于個(gè)人博客項(xiàng)目源碼,歡迎,說不定哪天脫單了就能用到了寫在前面自從用郵箱注冊(cè)了很多賬號(hào)后,便會(huì)收到諸如以下類似的郵件剛開始還以為是一張圖片,后來仔細(xì)一看不是圖片呀,好像還是呀,于是好奇寶寶我一下,查閱多篇資料后總結(jié)出怎么用前端知識(shí)和做 本文首發(fā)于個(gè)人博客:VinceBlog 項(xiàng)目源碼:NodeMail,歡迎star,說不定哪天脫單了就能用到了 寫在前面 自從用郵箱注冊(cè)了很多賬號(hào)后...

    zero 評(píng)論0 收藏0
  • 2017文章總結(jié)

    摘要:歡迎來我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動(dòng)及頁面渲染優(yōu)化理論寫法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁面渲染優(yōu)化 理論 | HTML寫法...

    dailybird 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

malakashi

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<