国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

首頁 JS特效 CSS3特效 CSS3做的日食動(dòng)畫特效

CSS3做的日食動(dòng)畫特效

CSS3做的日食動(dòng)畫特效

CSS3做的日食動(dòng)畫特效

<頭>
<元字符集=“utf-8”>
新穎的CSS3日食動(dòng)畫效果

<風(fēng)格>
html, 正文 {
? 寬度:100%;
? 溢出-x:隱藏;
}

*, *:之前, *:之后 {
? 框大?。哼吙蚩?;
? 邊距:0;
? 填充:0;
}

。宇宙 {### ? 寬度:100vw;
? 高度:100vh;
? 背景:#030613;
? 顯示:塊;
? 位置:相對(duì);
? -webkit-animation:skyDim 4s 8s 線性向前;
? ? ? ? ? 動(dòng)畫:skyDim 4s 8s 線性向前;
}

.universe:在{
之前 ? 內(nèi)容: ””;### ? 框陰影:10vw 1vh #fff、14vw 29vh 2px #FFF、23vw 34vh 1px #FFF、1vw 99vh 1px #FFF、20vw 80vh #FFF、90vw 10vh 2px #fff、55vw 9vh #FFF、24vw 4vh 1px #FFF,50vw 99vh 1px #FFF, 74vw 40vh 1px #FFF, 80vw 9vh 1px #FFF, 20vw 80vh #FFF, 85vw 78vh #fff;
? 寬度:4px;
? 高度:4px;
? 位置:絕對(duì);
? 邊界半徑:50%;
? -webkit-animation: starsFloating 100s -200s 線性既無限;
? ? ? ? ? 動(dòng)畫:星星浮動(dòng)100s -200s 線性既無限;
}

.universe:{
之后 ? 內(nèi)容: ””;### ? 框陰影:37vw 78vh #fff、17vw 69vh #FFF、68vw 4vh 1px #FFF、98vw 9vh 1px #FFF、45vw 67vh #FFF、95vw 1vh 2px #fff、35vw 75vh 2px #FFF、44vw 47vh 1像素#FFF,54vw 5vh 1px #FFF, 22vw 29vh 1px #FFF, 39vw 71vh 1px #FFF, 11vw 11vh #FFF, 88vw 82vh #fff;
? 寬度:2px;
? 高度:2px;
? 位置:絕對(duì);
? 邊界半徑:50%;
? -webkit-animation: starsFloating 100s 3s 線性向后無限;
? ? ? ? ? 動(dòng)畫:starsFloating 100s 3s 線性向后無限;
}

。太陽 {### ? 高度:200px;
? 寬度:200px;
? 邊界半徑:50%;
? 背景:#cfcfd4;
? 框陰影:0 0 60px 金色,0 0 100px #b9a018,插圖 0 5px 35px 53px #dbdbdb,插圖 48px 8px 34px 25px #c4c4c4;
? 左:計(jì)算(50% - 100px);
? 頂部:計(jì)算(50% - 100px);
? 位置:絕對(duì);
? -webkit-animation:sunFreakOut 5s 7.1s 線性前進(jìn);
? ? ? ? ? 動(dòng)畫:sunFreakOut 5s 7.1s 線性前進(jìn);
}

。月亮 {### ? 高度:50px;
? 寬度:50px;
? 邊界半徑:50%;
? 背景:rgba(0,0,0,0.99);
? 框陰影:插圖 5px 1px 10px -8px #d4d4d6;
? -webkit-transition: 1s;
? 轉(zhuǎn)換:1s;
? 頂部:計(jì)算(40% - 100px);
? 位置:絕對(duì);
? z 索引:5;
? -webkit-animation:向前移動(dòng) 20 秒的緩入緩出;
? ? ? ? ? 動(dòng)畫:向前移動(dòng) 20 秒緩入緩出;
}

@-webkit-keyframes 移動(dòng) {
? 0% {
# ? ? -webkit-transform:translateX(100vw);
? ? ? ? ? ? 變換:translateX(100vw);
? }
? 40%, 60% {
? ? 頂部:計(jì)算(50% - 100px);
? }
? 50%, 50.5% {
? ? 寬度:200px;
? ? 高度:200px;
? ? -webkit-transform:translateX(calc(50vw - 100px));
? ? ? ? ? ? 變換:translateX(calc(50vw - 100px));
? ? 框陰影:插圖 20px 1px 35px -15px #d4d4d6;
? ? 頂部:計(jì)算(50% - 100px);
? }
? 60% {
# ? ? 框陰影:插圖 -20px 1px 35px -15px #d4d4d6;
? }
? 100% {
# ? ? 寬度:50px;
? ? 高度:50px;
? ? -webkit-transform:translateX(calc(-1vw - 60px));
? ? ? ? ? ? 變換:translateX(calc(-1vw - 60px));
? ? 頂部:計(jì)算(40% - 100px);
? ? 框陰影:插入 -5px 1px 10px -8px #d4d4d6;
? }
}

@關(guān)鍵幀移動(dòng){
? 0% {
# ? ? -webkit-transform:translateX(100vw);
? ? ? ? ? ? 變換:translateX(100vw);
? }
? 40%, 60% {
? ? 頂部:計(jì)算(50% - 100px);
? }
? 50%, 50.5% {
? ? 寬度:200px;
? ? 高度:200px;
? ? -webkit-transform:translateX(calc(50vw - 100px));
? ? ? ? ? ? 變換:translateX(calc(50vw - 100px));
? ? 框陰影:插圖 20px 1px 35px -15px #d4d4d6;
? ? 頂部:計(jì)算(50% - 100px);
? }
? 60% {
# ? ? 框陰影:插圖 -20px 1px 35px -15px #d4d4d6;
? }
? 100% {
# ? ? 寬度:50px;
? ? 高度:50px;
? ? -webkit-transform:translateX(calc(-1vw - 60px));
? ? ? ? ? ? 變換:translateX(calc(-1vw - 60px));
? ? 頂部:計(jì)算(40% - 100px);
? ? 框陰影:插入 -5px 1px 10px -8px #d4d4d6;
? }
}
@-webkit-keyframes skyDim {
? 0%, 100% {
? ? 背景:#030613;
? }
? 50%, 70% {
? ? 背景:黑色;
? }
}
@keyframes skyDim {
? 0%, 100% {
? ? 背景:#030613;
? }
? 50%, 70% {
? ? 背景:黑色;
? }
}
@-webkit-keyframes sunFreakOut {
? 0%, 100% {
? ? 框陰影:0 0 60px 金色,0 0 100px #b9a018,插圖 0 5px 35px 53px #dbdbdb,插圖 48px 8px 34px 25px #c4c4c4;
? }
? 50%, 70% {
? ? 框陰影:0 0 50px #e30000,0 0 0px #b91818,插圖 0 5px 35px 53px #dbdbdb,插圖 48px 8px 34px 25px #c4c4c4;
? }
}
@keyframes sunFreakOut {
? 0%, 100% {
? ? 框陰影:0 0 60px 金色,0 0 100px #b9a018,插圖 0 5px 35px 53px #dbdbdb,插圖 48px 8px 34px 25px #c4c4c4;
? }
? 50%, 70% {
? ? 框陰影:0 0 50px #e30000,0 0 0px #b91818,插圖 0 5px 35px 53px #dbdbdb,插圖 48px 8px 34px 25px #c4c4c4;
? }
}
@-webkit-keyframes starFloating {
? 0% {
# ? ? 不透明度:0;
? }
? 10% {
# ? ? 不透明度:1;
? }
? 100% {
# ? ? -webkit-transform: 翻譯Y(-100vh);
? ? ? ? ? ? 變換:translateY(-100vh);
? }
}
@keyframes starFloating {
? 0% {
# ? ? 不透明度:0;
? }
? 10% {
# ? ? 不透明度:1;
? }
? 100% {
# ? ? -webkit-transform: 翻譯Y(-100vh);
? ? ? ? ? ? 變換:translateY(-100vh);
? }
}
</風(fēng)格>
</頭>

這是一款非常新穎的使用純CSS3實(shí)現(xiàn)的一個(gè)天狗食月日食動(dòng)畫效果,當(dāng)日全食時(shí),還有背景星星閃爍動(dòng)畫效果,效果很漂亮

免責(zé)聲明

本站所有資源均由網(wǎng)友貢獻(xiàn)或各大下載網(wǎng)站轉(zhuǎn)載。請(qǐng)自行檢查軟件的完整性!本站所有資源僅供學(xué)習(xí)參考。請(qǐng)不要將它們用于商業(yè)目的。否則,一切后果由您負(fù)責(zé)!如有侵權(quán),請(qǐng)聯(lián)系我們刪除。聯(lián)系方式:admin@php.cn

相關(guān)文章

CSS3 `transition: all` 是否比針對(duì)特定屬性的效率低? CSS3 `transition: all` 是否比針對(duì)特定屬性的效率低?

07 Dec 2024

CSS3 過渡:“transition: all”比針對(duì)特定屬性的效率低嗎?使用 CSS3 過渡時(shí),...

如何在沒有硬編碼值的情況下創(chuàng)建響應(yīng)式 CSS3 選取框效果? 如何在沒有硬編碼值的情況下創(chuàng)建響應(yīng)式 CSS3 選取框效果?

06 Dec 2024

CSS3 中的選取框效果:避免文本適應(yīng)的特定值在 CSS3 動(dòng)畫中,通常需要?jiǎng)?chuàng)建選取框效果,其中文本...

為什么我的 CSS3 動(dòng)畫在 Safari 中不起作用? 為什么我的 CSS3 動(dòng)畫在 Safari 中不起作用?

14 Dec 2024

Safari 中 CSS3 動(dòng)畫失效您遇到了 CSS3 動(dòng)畫在 Safari 中無效的問題。盡管該動(dòng)畫在支持 CSS3...

如何創(chuàng)建具有自適應(yīng)文本長(zhǎng)度的動(dòng)態(tài) CSS 選取框? 如何創(chuàng)建具有自適應(yīng)文本長(zhǎng)度的動(dòng)態(tài) CSS 選取框?

07 Dec 2024

如何創(chuàng)建具有自適應(yīng)文本長(zhǎng)度的動(dòng)態(tài)選取框效果在 CSS3 中,實(shí)現(xiàn)選取框效果需要?jiǎng)赢嫞褂锰囟ǖ?..

如何僅使用 CSS3 變換創(chuàng)建懸停圖像縮放效果? 如何僅使用 CSS3 變換創(chuàng)建懸停圖像縮放效果?

28 Nov 2024

使用 CSS3 Transform 對(duì)懸停的 CSS 圖像縮放效果使用 CSS3 的...

如何在 CSS3 中實(shí)現(xiàn)淡出效果:關(guān)鍵幀動(dòng)畫與過渡? 如何在 CSS3 中實(shí)現(xiàn)淡出效果:關(guān)鍵幀動(dòng)畫與過渡?

27 Oct 2024

CSS3 過渡 - 淡出效果在 CSS3 中,可以通過使用關(guān)鍵幀動(dòng)畫來實(shí)現(xiàn)淡出效果。然而,這是...

如何在 CSS3 中選擇類名以特定字符串開頭的元素? 如何在 CSS3 中選擇類名以特定字符串開頭的元素?

13 Nov 2024

使用 CSS3 將元素與以特定字符串開頭的類名匹配是否可以基于...有效地選擇多個(gè)元素

為什么我使用 CSS3 @keyframes 的上滑動(dòng)畫不起作用? 為什么我使用 CSS3 @keyframes 的上滑動(dòng)畫不起作用?

28 Oct 2024

CSS3 過渡 - 淡出效果使用 CSS3,您可以輕松實(shí)現(xiàn)淡出效果以增強(qiáng)用戶體驗(yàn)。然而,如果你遇到...

如何使用 CSS3 創(chuàng)建 SVG 投影? 如何使用 CSS3 創(chuàng)建 SVG 投影?

18 Dec 2024

使用 CSS3 的 SVG 投影使用 CSS3 實(shí)現(xiàn)投影可以使用 CSS3 向 SVG 元素添加投影效果。與...相反

See all articles See all articles

熱工具

CSS文字組合成心形動(dòng)畫特效

CSS文字組合成心形動(dòng)畫特效

CSS文字組合成心形動(dòng)畫特效

CSS3 SVG表白鮮花動(dòng)畫特效

CSS3 SVG表白鮮花動(dòng)畫特效

SS3 SVG表白鮮花動(dòng)畫特效是一款情人節(jié)動(dòng)畫特效。

CSS的商城網(wǎng)站常用左側(cè)分類下拉導(dǎo)航菜單代碼

CSS的商城網(wǎng)站常用左側(cè)分類下拉導(dǎo)航菜單代碼

CSS的商城網(wǎng)站常用左側(cè)分類下拉導(dǎo)航菜單代碼

jQuery+CSS3情人節(jié)愛心特效

jQuery+CSS3情人節(jié)愛心特效

jQuery+CSS3情人節(jié)愛心特效是一款情人節(jié)懸掛擺動(dòng)愛心動(dòng)畫特效。

css3湯勺撈起湯圓動(dòng)畫特效

css3湯勺撈起湯圓動(dòng)畫特效

一碗可愛的湯圓表情,湯勺撈起一個(gè)湯圓動(dòng)畫特效