css动画animation实验

最新推荐文章于 2024-05-23 22:54:35 发布
最新推荐文章于 2024-05-23 22:54:35 发布
阅读量84 收藏
点赞数 1
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47233751/article/details/129174691
版权

这里写自定义目录标题

行星动画

代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        } 
        html{
            height: 100%;
        }
        body{
            display: flex;
            height: 100%;
            background-color: black;
        }
        .box{
            width: 1000px;
            height: 1000px;
            margin: auto;
            border: 1px solid white;
            box-shadow: 6px 6px 20px 6px white;
            position: relative;
            perspective: 120000px;
            border-radius: 500px;
            transform-style: preserve-3d;
            animation: my 4s linear infinite;

            
        }
        .box div{
            width: 200px;
            height: 200px;
            background-color: transparent;
            border-radius: 300px;
            border: 1px solid orange;
            box-shadow: 6px 6px 20px 6px orange;
            margin: auto;
            top:0;
            bottom:0;
            left:0;
            right:0;
            position: absolute;
        }
        .box div:nth-child(1){
            transform: rotateY(20deg) translateY(500px);
        }
        .box div:nth-child(2){
            transform: rotateY(40deg) translateY(500px);
        }
        .box div:nth-child(3){
            transform: rotateY(60deg) translateY(500px);
        }
        .box div:nth-child(4){
            transform: rotateY(80deg) translateY(500px);
        }
        .box div:nth-child(5){
            transform: rotateY(100deg) translateY(500px);
        }
        .box div:nth-child(6){
            transform: rotateY(120deg) translateY(500px);
        }
        .box div:nth-child(7){
            transform: rotateY(140deg) translateY(500px);
        }
        .box div:nth-child(8){
            transform: rotateY(160deg) translateY(500px);
        }
        .box div:nth-child(9){
            transform: rotateY(180deg) translateY(500px);
        }
        .box div:nth-child(10){
            transform: rotateY(200deg) translateY(500px);
        }
        .box div:nth-child(11){
            transform: rotateY(220deg) translateY(500px);
        }
        .box div:nth-child(12){
            transform: rotateY(240deg) translateY(500px);
        }
        .box div:nth-child(13){
            transform: rotateY(260deg) translateY(500px);
        }
        .box div:nth-child(14){
            transform: rotateY(280deg) translateY(500px);
        }
        .box div:nth-child(15){
            transform: rotateY(300deg) translateY(500px);
        }
        .box div:nth-child(16){
            transform: rotateY(320deg) translateY(500px);
        }
        .box div:nth-child(17){
            transform: rotateY(340deg) translateY(500px);
        }
        .box div:nth-child(18){
            transform: rotateY(360deg) translateY(500px);
        }
         .box div:nth-child(19){
            transform:rotateZ(90deg) rotateX(0deg) rotateY(20deg) translateY(500px);
        }
       .box div:nth-child(20){
            transform: rotateZ(90deg) rotateX(0deg) rotateY(40deg) translateY(500px);
        }
        .box div:nth-child(21){
            transform:  rotateZ(90deg) rotateX(0deg) rotateY(60deg) translateY(500px);
        }
        .box div:nth-child(22){
            transform:  rotateZ(90deg) rotateX(0deg) rotateY(80deg) translateY(500px);
        }
        .box div:nth-child(23){
            transform:  rotateZ(90deg) rotateX(0deg) rotateY(100deg) translateY(500px);
        }
        .box div:nth-child(24){
            transform:  rotateZ(90deg) rotateX(0deg) rotateY(120deg) translateY(500px);
        }
        .box div:nth-child(25){
            transform: rotateZ(90deg) rotateX(0deg) rotateY(140deg) translateY(500px);
        }
        .box div:nth-child(26){
            transform: rotateZ(90deg) rotateX(0deg) rotateY(160deg) translateY(500px);
        }
        .box div:nth-child(27){
            transform: rotateZ(90deg) rotateX(0deg) rotateY(180deg) translateY(500px);
        }
        .box div:nth-child(28){
            transform: rotateZ(90deg) rotateX(0deg) rotateY(200deg) translateY(500px);
        }
        .box div:nth-child(29){
            transform: rotateZ(90deg) rotateX(0deg) rotateY(220deg) translateY(500px);
        }
        .box div:nth-child(30){
            transform: rotateZ(90deg) rotateX(0deg) rotateY(240deg) translateY(500px);
        }
        .box div:nth-child(31){
            transform: rotateZ(90deg) rotateX(0deg) rotateY(260deg) translateY(500px);
        }
        .box div:nth-child(32){
            transform: rotateZ(90deg) rotateX(0deg) rotateY(280deg) translateY(500px);
        }
        .box div:nth-child(33){
            transform: rotateZ(90deg) rotateX(0deg) rotateY(300deg) translateY(500px);
        }
        .box div:nth-child(34){
            transform: rotateZ(90deg) rotateX(0deg) rotateY(320deg) translateY(500px);
        }
        .box div:nth-child(35){
            transform: rotateZ(90deg) rotateX(0deg) rotateY(340deg) translateY(500px);
        }
        .box div:nth-child(36){
            transform: rotateZ(90deg) rotateX(0deg) rotateY(360deg) translateY(500px);
        }
        .box div:nth-child(37){
            transform: rotateZ(90deg) rotateX(180deg)  rotateY(20deg) translateY(500px);
        }
        .box div:nth-child(38){
            transform: rotateZ(90deg) rotateX(180deg)  rotateY(40deg) translateY(500px);
        }
        .box div:nth-child(39){
            transform: rotateZ(90deg) rotateX(180deg)  rotateY(60deg) translateY(500px);
        }
        .box div:nth-child(40){
            transform: rotateZ(90deg) rotateX(180deg)  rotateY(80deg) translateY(500px);
        }
        .box div:nth-child(41){
            transform: rotateZ(90deg) rotateX(180deg)  rotateY(100deg) translateY(500px);
        }
        .box div:nth-child(42){
            transform: rotateZ(90deg) rotateX(180deg)  rotateY(120deg) translateY(500px);
        }
        .box div:nth-child(43){
            transform: rotateZ(90deg) rotateX(180deg)  rotateY(140deg) translateY(500px);
        }
        .box div:nth-child(44){
            transform: rotateZ(90deg) rotateX(180deg)  rotateY(1600deg) translateY(500px);
        }
        .box div:nth-child(45){
            transform: rotateZ(90deg) rotateX(180deg)  rotateY(180deg) translateY(500px);
        }
        .box div:nth-child(46){
            transform: rotateZ(90deg) rotateX(180deg)  rotateY(200deg) translateY(500px);
        }
        .box div:nth-child(47){
            transform: rotateZ(90deg) rotateX(180deg)  rotateY(220deg) translateY(500px);
        }
        .box div:nth-child(48){
            transform: rotateZ(90deg) rotateX(180deg)  rotateY(240deg) translateY(500px);
        }
        .box div:nth-child(49){
            transform: rotateZ(90deg) rotateX(180deg)  rotateY(260deg) translateY(500px);
        }
        .box div:nth-child(50){
            transform: rotateZ(90deg) rotateX(180deg)  rotateY(280deg) translateY(500px);
        }
        .box div:nth-child(51){
            transform: rotateZ(90deg) rotateX(180deg)  rotateY(300deg) translateY(500px);
        }
        .box div:nth-child(52){
            transform: rotateZ(90deg) rotateX(180deg)  rotateY(320deg) translateY(500px);
        }
        .box div:nth-child(53){
            transform: rotateZ(90deg) rotateX(180deg)  rotateY(340deg) translateY(500px);
        }
        .box div:nth-child(54){
            transform: rotateZ(90deg) rotateX(180deg)  rotateY(3600deg) translateY(500px);
        } 
        .box div:nth-child(55){
            width: 300px;
            height: 300px;
            background: radial-gradient(red 30%,orange);
        } 
        @keyframes my{
            100%{
                transform: rotate3d(1,0,1,360deg);
            }
        }
        /* @keyframes you{
            0%{
                transform: ;
            }
        } */
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

效果展示

请添加图片描述
后期持续更新，敬请期待！小安在此拜上！！

Anvette
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
svg-animation-css:使用CSS动画的简单SVG实验
05-24
在这个实验中，`svg-animation-css-gh-pages`可能是一个GitHub Pages项目，展示了如何将这样的CSS动画应用到实际的SVG图形中。GitHub Pages是一个免费的服务，允许开发者将静态网站托管在GitHub仓库上。项目中的代码...
CSS3-animation
03-08
CSS3（Cascading Style Sheets 第三代）是网页样式表语言的最新版本，它引入了许多强大的新特性，其中之一就是动画（Animation）。CSS3动画允许开发者通过平滑、连续的过渡效果来增强网页的用户体验，这些效果包括...
12个令人惊叹的CSS实验项目
weixin_34021089的博客
01-29 293
翻译：疯狂的技术宅原文：https://1stwebdesigner.com/12... 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章 你可能认为 CSS 只是一种简单地为网页设计样式的语言，但它的功能比你想象的要多得多。 从逼真的图像到甚至是视频游戏，你会惊讶地看到一个优秀的开发者可...
css动画 实验,CSS3 渐变动效实验（可动态调整）
weixin_35686326的博客
08-03 298
CSS语言：CSSSCSS确定body {background: #222;}div {position: absolute;width: 40%;height: 60%;box-shadow: 0px 0px 4px #111;background-color: #111;top: 50%;left: 50%;transform: translate(-50%, -50%);border-rad...
实用的 CSS — 动画性能对比
weixin_34151004的博客
07-19 161
欢迎移步我的博客阅读：《实用的 CSS — 动画性能对比》 前言 在现代浏览器中，渲染页面所要负责的线程主要有两个：主线程和排版线程。 主线程 运行 JS 计算 HTML 元素的 CSS 样式 布局页面 把页面元素绘制成一个或多个位图 把这些位图移交给排版线程 在浏览器开始渲染页面，或者长时间执行某个 JS 时，主线程会一直在忙碌状态...
css3 动画的实现
青蛙king的博客
12-15 2530
js 的方法实现动画（这是一个实验功能，此功能某些浏览器尚在开发中。详见这里）。@keyframes+animation：这是一个实现动画的组合，必须一起使用。transition：表示过渡。transition 可以单独使用，transform：表示变形。使用 transform 实现动画时有两种选择：transform+transition：一次性动画。transform 定义行为，transition 驱动，但一次仅能驱动一次。
【css】css动画实现的3种方式
热门推荐
t13965688123的博客
05-25 1万+
css实现动画主要有3种方式，①、transition实现过渡动画，②、transform转变动画，③、animation实现自定义动画。
CSS动画技术（css-animation）
最新发布
Zarathusa的博客
05-23 1311
CSS Transition是一种用于实现元素状态变化平滑过渡的CSS技术。它允许你在元素从一种状态到另一种状态的过渡中添加动画效果，例如改变颜色、大小、位置等属性。过渡属性：在transition属性中指定需要过渡的属性（如颜色、宽度、高度等）。持续时间：使用时间单位（秒或毫秒）定义过渡的持续时间，控制动画的速度。缓动函数：指定过渡效果的缓动函数，它定义了动画过程中属性值的变化速度。过渡属性是你希望在元素状态变化时产生动画效果的CSS属性。这些属性定义了在过渡期间发生变化的元素属性。
css动画 实验,CSS动画-旋转球
weixin_35688303的博客
08-03 358
style="width: 100%; height: 100%; position: fixed; background-color: rgb(255, 255, 255); z-index: 807; top: 0px; opacity: 0.9; display: block;">/*!Loading CSS*/#contain {width: 300px;height: 100px;...
CSS 之 帧动画（Keyframe Animation）
weixin_45092437的博客
05-13 1714
帧动画允许你通过指定 CSS 属性在不同时间点上的行为来创建动画效果，这些时间点被称为关键帧，所以又被称为关键帧动画。帧动画需要通过@keyframes来创建。@keyframes`仅仅是定义了在所在作用域内全局都可以使用的关键帧动画，定义好了动画的过程，但是其并不能自动应用。还需要通过CSS的animation属性来显式的指定关键帧动画应用的元素，以及一系列相关的动画属性。
css动画animation:@keyframes关键帧，infinite循环
白白的博客
10-14 1万+
css动画的实验 oeasy007，制作简单的css动画 在这里插入代码片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> ...
css鼠标动画
10-18
2. CSS动画（Animation）：相比于过渡，动画提供了更多的控制。你可以定义多个关键帧，元素将在这些关键帧之间平滑过渡。例如，创建一个旋转动画： ```css @keyframes rotate { 0% { transform: rotate(0deg); } ...
CSS3的动画 Transitions和Transforms和Animation 示例与快速学习
10-19
在CSS3中，动画是网页设计的一个重要组成...通过实践和实验，你可以掌握CSS3的Transitions、Transforms和Animations，创造出引人入胜的用户体验。不断探索和理解这些技术的潜力，将有助于你在网页设计领域脱颖而出。
纯css3蓝色loading加载动画特效
09-08
【纯CSS3蓝色加载动画特效】是一种利用现代浏览器支持的CSS3特性来实现的动态加载效果，无需依赖JavaScript或其他外部...通过不断探索和实验，开发者可以创造出各种富有创意的加载动画，为网页增添更多互动性和趣味性。
CSS3水波动画.zip
07-04
在本文中，我们将深入探讨如何使用CSS3来创建生动的水波动画效果。CSS3是层叠样式表的最新版本，它引入了许多新的特性和功能，使得网页设计和动画制作更加丰富和动态。"CSS3水波动画"是一个示例项目，展示了如何利用...
CssAnimationLaboratory:我的css3动画实验室
06-12
在"CssAnimationLaboratory-master"文件夹中，很可能包含了JavaScript代码，用于与CSS动画配合，提供更丰富的交互体验。 此外，项目可能还涉及了一些高级主题，如CSS3的变换（transform）和过渡（transition）。...
css3 svg线条花纹动画特效
07-24
在现代网页设计中，CSS3和SVG（Scalable Vector Graphics）已经成为创建动态、美观且响应式的图形元素的重要工具。本教程将深入探讨如何利用CSS3和...在不断探索和实验中，你会发现CSS3和SVG结合的潜力是无穷无尽的。
CSS3按钮动画
07-02
**CSS3按钮动画详解** CSS3（Cascading Style Sheets Level 3）是现代网页设计中不可或缺的一部分，它为开发者提供了丰富的样式控制和...不断探索和实验，你会发现更多创新和独特的按钮动画效果，让你的网站与众不同。
css动画animation
07-28
animation属性是用于定义动画效果的主要CSS属性。它允许您指定动画的持续时间、延迟、重复次数、播放状态等。 下面是一个简单的示例，展示了如何使用CSS动画创建一个元素的渐变颜色效果： ```css /* 定义动画 */ @...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值