|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 本篇文章給大家帶來的內容是關于如何使用純CSS實現寶路薄荷糖的動畫(附源碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。效果預覽
源代碼下載https://github.com/comehope/front-end-daily-challenges 代碼解讀定義 dom,只有 1 個元素: <div class="spinner"></div> 居中顯示: body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: silver;
}定義容器尺寸: .spinner {
width: 50vmin;
height: 50vmin;
position: relative;
}用 .spinner::before {
content: '';
position: absolute;
box-sizing: border-box;
width: inherit;
height: inherit;
border: 12.5vmin solid;
border-radius: 50%;
}接下來制作動畫效果。 body {
perspective: 400px;
}讓圓環在 z 軸上運動: .spinner::before {
animation: spin 1.5s ease-in-out infinite both reverse;
}
@keyframes spin {
0%, 100% {
transform: translateZ(10vmin);
}
60% {
transform: translateZ(-10vmin);
}
}讓圓環在 z 軸距離較大時稍稍傾斜: @keyframes spin {
0%, 100% {
transform: translateZ(10vmin) rotateX(25deg);
}
60% {
transform: translateZ(-10vmin);
}
}增加縮放效果: @keyframes spin {
0%, 100% {
transform: translateZ(10vmin) rotateX(25deg);
}
33% {
transform: translateZ(-10vmin) scale(0.4);
}
60% {
transform: translateZ(-10vmin);
}
}用 .spinner::before,
.spinner::after {
/*略*/
animation: spin 1.5s ease-in-out infinite both reverse;
}
.spinner::after {
border-color: white;
animation-delay: -0.75s;
}接下來制作容器的動畫效果,為了不受子元素動畫的影響,先暫時屏蔽偽元素的動畫效果。 .spinner::before,
.spinner::after {
/* animation: spin 1.5s ease-in-out infinite both reverse; */
}增加容器沿 x 軸旋轉的動畫效果,動畫時間為子元素動畫時間的2倍: .spinner {
animation: wobble 3s ease-in-out infinite;
}
@keyframes wobble {
0%, 100% {
transform: rotateX(15deg);
}
50% {
transform: rotateX(60deg);
}
}增加容器沿 y 軸旋轉的動畫效果: @keyframes wobble {
0%, 100% {
transform: rotateX(15deg) rotateY(60deg);
}
50% {
transform: rotateX(60deg) rotateY(-60deg);
}
}增加容器整體旋轉的動畫效果: @keyframes wobble {
0%, 100% {
transform: rotateX(15deg) rotateY(60deg);
}
50% {
transform: rotateX(60deg) rotateY(-60deg) rotate(180deg);
}
}打開子元素的動畫效果,使子元素的動畫效果和容器的動畫效果疊加: .spinner::before,
.spinner::after {
animation: spin 1.5s ease-in-out infinite both reverse;
}最后,使子元素在 3d 空間上運動: .spinner {
transform-style: preserve-3d;
}大功告成! 以上就是如何使用純CSS實現寶路薄荷糖的動畫(附源碼)的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!