首頁

JS特效

CSS3特效

CSS3的太空人動畫特效

現在下載預覽

<標題> CSS 太空人</title>
<風格>
*{
# 邊距：0；
填充：0;
}
身體{
背景顏色：#102037;
溢出：隱藏；
}
@-webkit-keyframes 雪 {
0% { 不透明度: 0; -webkit-transform: 翻譯Y(0px);變換：translateY(0px); }
20%{ 不透明度: 1;}
100% { 不透明度: 1; -webkit-transform：翻譯Y（650px）；變換：翻譯Y（650px）； }
}
@關鍵影格雪{
0% { 不透明度: 0; -webkit-transform: 翻譯Y(0px);變換：translateY(0px); }
20%{ 不透明度: 1;}
100% { 不透明度: 1; -webkit-transform：翻譯Y（650px）；變換：翻譯Y（650px）； }
}
@-webkit-keyframes 太空人{
0%{
-webkit-transform: 旋轉(0deg);
變換：旋轉(0deg);
}
100%{
# -webkit-transform: 旋轉(360deg);
變換：旋轉(360deg);
}
}
.box-of-star1,
.box-of-star2，
.box-of-star3,
.box-of-star4{
寬度：100%；
位置：絕對；
z 索引：10；
左：0；
-webkit-transform: 翻譯Y(650px);
變換：translateY(650px);
}
.box-of-star1{
-webkit-animation: 雪 5s 線性無限;
}
.box-of-star2{
-webkit-animation: 雪 5s -1.64s 線性無限;
}
.box-of-star3{
-webkit-animation: 雪 5s -2.30s 線性無限;
}
.box-of-star4{
-webkit-animation: 雪 5s -3.30s 線性無限;
}

css3太空人動畫效果是一款純css3實現的太空中太空人的動畫效果。

免責聲明

本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性！本站所有資源僅供學習參考。請不要將它們用於商業目的。否則，一切後果都由您負責！如有侵權，請聯絡我們刪除。聯絡方式：admin@php.cn

純CSS3酷3D星空動畫特效

18 Jan 2017

這是一款使用純CSS3製作的酷炫3D星空動畫特效。在這個特效中，以飛船向前快速移動為視角，所有的星星都快速的變大並向後移動，效果非常逼真。

純CSS3團隊人員介紹動畫特效實例

06 Mar 2017

這篇文章主要介紹純CSS3團隊人員介紹動畫特效實例

CSS3的新特性一覽：如何套用CSS3動畫效果

09 Sep 2023

CSS3的新特性一覽：如何應用CSS3動畫效果引言：隨著網路的發展，CSS3逐漸取代了CSS2成為前端開發中最常用的樣式語言。 CSS3提供了許多新的特性，其中最受歡迎的是動畫效果。透過使用CSS3動畫，可以為網頁添加令人驚豔的互動效果，提升使用者體驗。本文將介紹一些CSS3常用的動畫特性，並提供相關的程式碼範例。一、過渡動畫（TransitionAnimat