css教程

CSS3旋转动画效果分享

我的站长站 2023-08-15 人阅读

定义 dom,容器中包含 9 个元素:

<div class="container">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

居中显示:

body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}

定义容器尺寸:

.container {
width: 30em;
height: 30em;
font-size: 12px;
}

设置容器中线条的样式:

.container {
color: lime;
}
.container span {
position: absolute;
width: 5em;
height: 5em;
border-style: solid;
border-width: 1em 1em 0 0;
border-color: currentColor transparent;
border-radius: 50%;
}

让线条在容器中居中显示:

.container {
display: flex;
align-items: center;
justify-content: center;
}

定义变量,使线条从中心向外侧逐渐延伸:

.container span {
--diameter: calc(5em + (var(--n) - 1) * 3em);
width: var(--diameter);
height: var(--diameter);
}
.container span:nth-child(1) {
--n: 1;
}
.container span:nth-child(2) {
--n: 2;
}
.container span:nth-child(3) {
--n: 3;
}
.container span:nth-child(4) {
--n: 4;
}
.container span:nth-child(5) {
--n: 5;
}
.container span:nth-child(6) {
--n: 6;
}
.container span:nth-child(7) {
--n: 7;
}
.container span:nth-child(8) {
--n: 8;
}
.container span:nth-child(9) {
--n: 9;
}

设置让线条旋转的动画效果:

.container span {
animation: rotating linear infinite;
animation-duration: calc(5s / (9 - var(--n) + 1));
}
@keyframes rotating {
to {
transform: rotate(1turn);
}
}

定义改变颜色的动画效果,以色相环一周 360 度为 100%,--percent 变量是指位于这个 100% 的哪个位置:

@keyframes change-color {
0%, 100% {
--percent: 0;
}
10% {
--percent: 10;
}
20% {
--percent: 20;
}
30% {
--percent: 30;
}
40% {
--percent: 40;
}
50% {
--percent: 50;
}
60% {
--percent: 60;
}
70% {
--percent: 70;
}
80% {
--percent: 80;
}
90% {
--percent: 90;
}
}

最后,把改变颜色的动画效果应用到容器上:

.container {
--deg: calc(var(--percent) / 100 * 360deg);
color: hsl(var(--deg), 100%, 50%);
animation: change-color 5s linear infinite;
}


相关推荐
  • CSS3动画
  • CSS3教程
  • React.js新拟态CSS3动画生成网站源码
    React.js新拟态CSS3动画生成网站源码

    源码介绍一款国外搬运的CSS3动画生成网站源码,基于React.js框架开发,中文叫新拟态,英文原名叫Neumorphism/Soft UI。是一款助于设计人员和开发人员对其进行试验并可能对其进行调整的源码。源码截图...

    html模板 49 1年前
  • @keyframes实现CSS动画帧效果

    本教程教大家如何使用@keyframes,制作一个类似幻灯片的CSS动画效果。首先我们准备一张连贯的动作图片,这里以这张熊跑路为例。新建一个DIV容器,放这里一帧图片<div></div>DIV的盒子属性div { position: absolute; width: 200px; ...

    css教程 68 2年前
  • 五彩loading动画效果html页面模板
    五彩loading动画效果html页面模板

    一款五彩的loading动画效果html页面模板,loading文字从右到左一顺弧形滚动,非常漂亮。<meta http-equiv="refresh" content="3;url=http://www.wdzzz.com">content为跳转延迟时间,url为跳转后的地址...

    html模板 153 3年前
  • CSS3实现苹果灵动岛效果

    主要利用了CSS3-animation + JS实现效果,只是提供思路,具体细节可以参考<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>灵动岛</title>...

    css教程 56 1年前
  • CSS3背景图片固定滑动效果

    CSS3背景图片固定住,滚动条滚动浮动在固定位置,这种效果网上看到很多。有一种视觉差的酷炫效果,一般大气的企业网站会非常常见,这种CSS效果运用的好会让网站非常大气上档次。今天我的站长站分享给大家,其实非常简单。background-attachment: fixed;CSS3的...

    css教程 95 4年前
  • CSS3做一个手机端左右滑动菜单

    手机端因为布局很窄,如果刚好菜单很多的情况下,我们就可以把菜单左侧左右滑动的效果,来节省空间,大致效果如下图具体效果可以参考今日头条,菜单可以左右滑动。有些花里胡哨的代码会用上JS,其实这种只需要CSS就能搞定,下面看代码。HTML代码<div><a href="htt...

    css教程 126 4年前
最新更新