您的位置：首页 > 百科管理 > 详情

css动画效果素材-如何使用CSS实现眼冒金星的动画效果（附源码）

原创：找图网 2023-07-30 09:59:04

CSS3实现预载动画效果的几种方法

本篇文章主要介绍了CSS3动画:5种预载动画效果实例,内容挺不错的,现在分享给大家,也给大家做个参考。

实现如图所示的动画效果:

预载动画一:双旋圈

在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个CSS代码,即内圈比外圈的速率快2倍。

实现如图所示:

html代码:

</p>

</body>css代码:

#preloader-1{

position: relative;

}

#preloader-1 span{

position: absolute;

border:8px solid #fff;

border-top:8px solid transparent;

border-radius: 999px;

}

#preloader-1 span:nth-child(1){

width:80px;

height: 80px;

animation: spin-1 2s infinite linear;

}

#preloader-1 span:nth-child(2){

top:20px;

left:20px;

width:40px;

height: 40px;

animation: spin-2 1s infinite linear;

}

@keyframes spin-1{

0%{transform: rotate(360deg); opacity: 1.0;}

50%{transform: rotate(180deg); opacity: 0.5;}

100%{transform: rotate(0deg);opacity: 0;}

}

@keyframes spin-2{

0%{transform: rotate(0deg); opacity: 0.5;}

50%{transform: rotate(180deg); opacity: 1;}

100%{transform: rotate(360deg);opacity: 0.5;}

}预载动画二:交错圈

两个圆圈进行横向交错来回移动。每个圆圈都设置了单独的反向移动动画参数。

效果:

html代码:

</p>

</body>css代码:

#preloader-2{

position: relative;

}

#preloader-2 span{

position: absolute;

width:30px;

height: 30px;

background: #fff;

border-radius: 999px;

}

#preloader-2 span:nth-child(1){

animation: cross-1 1.5s infinite linear;

}

#preloader-2 span:nth-child(2){

animation: cross-2 1.5s infinite linear;

}

@keyframes cross-1{

0%{transform: translateX(0); opacity: 0.5;}

50%{transform: translateX(80px); opacity: 1;}

100%{transform: translateX(0);opacity: 0.5;}

}

@keyframes cross-2{

0%{transform: translateX(80px); opacity: 0.5;}

50%{transform: translateX(0); opacity: 1;}

100%{transform: translateX(80px);opacity: 0.5;}

}预载动画三:旋转圈

效果:

html代码:

</p>

</body>css代码:

#preloader-3{

position: relative;

width:80px;

height: 80px;

border:4px solid rgba(255,255,255,.25);

border-radius: 999px;

}

#preloader-3 span{

position: absolute;

width:80px;

height:80px;

border:4px solid transparent;

border-top:4px solid #fff;

border-radius: 999px;

top:-4px;

left:-4px;

animation: rotate 1s infinite linear;

}

@keyframes rotate{

0%{transform: rotate(0deg);}

100%{transform: rotate(360deg);}

}预载动画四:跳动圈

这是一种墨西哥波浪纹的动画效果,通过设置不同圆圈之间的延迟参数来实现。

效果:

html代码:

</p>

</body>css代码:

#preloader-4{

position: relative;

}

#preloader-4 span{

position:absolute;

width:16px;

height: 16px;

border-radius: 999px;

background: #fff;

animation: bounce 1s infinite linear;

}

#preloader-4 span:nth-child(1){

left:0;

animation-delay: 0s;

}

#preloader-4 span:nth-child(2){

left:20px;

animation-delay: 0.25s;

}

#preloader-4 span:nth-child(3){

left:40px;

animation-delay: 0.5s;

}

#preloader-4 span:nth-child(4){

left:60px;

animation-delay: 0.75s;

}

#preloader-4 span:nth-child(5){

left:80px;

animation-delay: 1.0s;

}

@keyframes bounce{

0%{transform: translateY(0px);opacity: 0.5;}

50%{transform: translateY(-30px);opacity: 1.0;}

100%{transform: translateY(0px);opacity: 0.5;}

}预载动画五:雷达圈

一种雷达辐射效果,给3个span elements设置相同的淡入淡出效果,再予每个稍微延迟下即可实现。

效果:

html代码:

</p>

</body>css代码:

#preloader-5{

position: relative;

}

#preloader-5 span{

position:absolute;

width:50px;

height: 50px;

border:5px solid #fff;

border-radius: 999px;

opacity: 0;

animation: radar 2s infinite linear;

}

#preloader-5 span:nth-child(1){

animation-delay: 0s;

}

#preloader-5 span:nth-child(2){

animation-delay: 0.66s;

}

#preloader-5 span:nth-child(3){

animation-delay: 1.33s;

}

@keyframes radar{

0%{transform: scale(0);opacity: 0;}

25%{transform: scale(0);opacity: 0.5;}

50%{transform: scale(1);opacity: 1.0;}

75%{transform: scale(1.5);opacity: 0.5;}

100%{transform: scale(2);opacity: 0;}

}

如何使用纯CSS实现一只移动的小白兔动画效果

本篇文章给大家带来的内容是关于如何使用纯CSS实现一只移动的小白兔动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

效果预览

代码解读

定义 dom,页面中包含 2 个元素,分别代表兔子和云朵:

<div class="clouds"></div>居中显示:

body {

margin: 0;

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background: linear-gradient(midnightblue, black);

font-size: 30px;

}画出兔子的身体:

.rabbit {

width: 5em;

height: 3em;

color: whitesmoke;

background: currentColor;

border-radius: 70% 90% 60% 50%;

}用径向渐变画出兔子的眼睛:

.rabbit {

background:

radial-gradient(

circle at 4.2em 1.4em,

#333 0.15em,

transparent 0.15em

), /* eye */

currentColor;

}用伪元素画出兔子的右耳:

.rabbit::before {

content: '';

position: absolute;

width: 0.75em;

height: 2em;

background-color: currentColor;

border-radius: 50% 100% 0 0;

transform: rotate(-30deg);

top: -1em;

right: 1em;

}用阴影画出兔子的左耳:

.rabbit::before {

border: 0.1em solid;

border-color: gainsboro transparent transparent gainsboro;

box-shadow: -0.5em 0 0 -0.1em;

}用伪元素画出兔子的尾巴:

.rabbit::after {

content: '';

position: absolute;

width: 1em;

height: 1em;

background-color: currentColor;

border-radius: 50%;

left: -0.3em;

top: 0.5em;

}用阴影画出兔子的腿:

.rabbit::after {

box-shadow:

0.5em 1em 0,

4em 1em 0 -0.2em,

4em 1em 0 -0.2em;

}画出兔子的影子:

.rabbit {

box-shadow: -0.2em 1em 0 -0.75em #333;

}画出一个云朵:

.clouds {

width: 2em;

height: 2em;

color: whitesmoke;

background: currentColor;

border-radius: 100% 100% 0 0;

transform: translate(0, -5em);

}

.clouds::before,

.clouds::after {

content: '';

position: absolute;

background-color: currentColor;

bottom: 0;

}

.clouds::before {

width: 1.25em;

height: 1.25em;

border-radius: 100% 100% 0 100%;

left: -30%;

}

.clouds::after {

width: 1.5em;

height: 1.5em;

border-radius: 100% 100% 100% 0;

right: -30%;

}用阴影再画 2 个云朵:

.rabbit {

z-index: 1;

}

.clouds,

.clouds::before,

.clouds::after {

box-shadow:

5em 2em 0 -0.3em,

-2em 2em 0 0;

}接下来制作动画效果。

增加兔子跳动的动画:

.rabbit {

animation: hop 3s linear infinite;

}

@keyframes hop {

20% {

transform: rotate(-10deg) translate(1em, -2em);

box-shadow: -0.2em 1em 0 -1em #333;

}

40% {

transform: rotate(10deg) translate(3em, -4em);

box-shadow: -0.2em 3.25em 0 -1.1em #333;

}

60%, 75% {

transform: rotate(0deg) translate(4em, 0);

box-shadow: -0.2em 1em 0 -0.75em #333;

}

}增加兔子的腿的伸缩动画:

.rabbit::after {

animation: kick 3s infinite linear;

}

@keyframes kick {

40% {

box-shadow:

0.5em 2em 0,

4.2em 1.75em 0 -0.2em,

4.4em 1.9em 0 -0.2em;

}

}增加云朵飘动的动画:

.clouds {

animation: cloudy 3s infinite linear forwards;

filter: opacity(0);

}

@keyframes cloudy {

40% {

transform: translate(-3em, -5em);

filter: opacity(0.75);

}

55% {

transform: translate(-4em, -5em);

filter: opacity(0);

}

}大功告成!

如何使用CSS实现眼冒金星的动画效果（附源码）

本篇文章给大家带来的内容是关于如何使用CSS实现眼冒金星的动画效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

效果预览

源代码下载

代码解读定义 dom,容器中包含 9 个子元素:

</div>居中显示:

body {

margin: 0;

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background-color: black;

}设置容器中子元素的布局方式,形成一个 3 * 3 的网格,其中 --columns 是网格每一边上的子元素数量:

.container {

display: grid;

--columns: 3;

grid-template-columns: repeat(var(--columns), 1fr);

}定义子元素样式:

.container span {

width: 25px;

height: 25px;

color: lime;

background-color: currentColor;

}增加子元素的动画效果,总动画时长是 5 秒,其中第 1 秒(0% ~ 20%)有动画,其余 4 秒(20% ~ 100%)静止:

.container span {

transform: scale(0);

animation: spin 5s linear infinite;

}

@keyframes spin {

0% {

transform: rotate(0deg) scale(1);

}

5%, 15% {

transform: rotate(90deg) scale(0);

background: white;

}

17.5% {

transform: rotate(180deg) scale(1);

background-color: currentColor;

}

20%, 100% {

transform: rotate(90deg) scale(0);

}

}设置动画延时,使各子元素的动画随机延时 4 秒之内的任意时间:

.container span {

animation-delay: calc(var(--delay) * 1s);

}

.container span:nth-child(1) { --delay: 0.8 }

.container span:nth-child(2) { --delay: 0.2 }

.container span:nth-child(3) { --delay: 1.9 }

.container span:nth-child(4) { --delay: 3.9 }

.container span:nth-child(5) { --delay: 2.8 }

.container span:nth-child(6) { --delay: 3.5 }

.container span:nth-child(7) { --delay: 1.5 }

.container span:nth-child(8) { --delay: 2.3 }

.container span:nth-child(9) { --delay: 1.7 }至此,静态效果完成,接下来批量处理 dom 元素。

引入 d3 库:

const COLUMNS = 3;

('.container')

.style('--columns', COLUMNS);删除掉 html 文件中的 <span> 子元素,用 d3 生成:

('.container')

.style('--columns', COLUMNS)

.selectAll('span')

.data((COLUMNS * COLUMNS))

.enter()

.append('span');删除掉 css 文件中的 --delay 变量声明,用 d3 为变量生成随机数:

('.container')

.style('--columns', COLUMNS)

.selectAll('span')

.data((COLUMNS * COLUMNS))

.enter()

.append('span')

.style('--delay', () => () * 4);最后,把边长改为 15,生成更多的子元素,加强视觉效果:

const COLUMNS = 15;