html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <div class="box">
        <div class="cube"></div>
    </div>
</div>
</body>
</html>
 
 
 
css:
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /*1.vw：1vw等于视口宽度的1%。*/
    /*2.vh：1vh等于视口高度的1%。*/
    background: #000;
    overflow: hidden;
}
.container {
    position: relative;
    width: 100%;
    transform: rotate(-35deg);
}
.container .box {
    position: relative;
    left: -200px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% + 400px);
    -webkit-box-reflect: below 1px linear-gradient(transparent, #0004);
    animation: animateSurface 1.5s ease-in-out infinite;
}
@keyframes animateSurface {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-200px);
    }
}
.container .box .cube {
    position: relative;
    width: 200px;
    height: 200px;
    background: #03e9f4;
    box-shadow: 0 0 5px rgba(3, 233, 244, 1),
    0 0 25px rgba(3, 233, 244, 1),
    0 0 50px rgba(3, 233, 244, 0.5);
    transform-origin: bottom right;
    animation: animate 1.5s ease-in-out infinite;
}
@keyframes animate {
    0% {
        transform: rotate(0deg);
    }
    60% {
        transform: rotate(90deg);
    }
    65% {
        transform: rotate(85deg);
    }
    70% {
        transform: rotate(90deg);
    }
    75% {
        transform: rotate(87.5deg);
    }
    80%, 100% {
        transform: rotate(90deg);
    }
}
 
样式如下：

CSS动画，盒子爬坡源码的更多相关文章

  1. 8个纯CSS3制作的动画应用及源码

    对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...

  2. 超酷震撼 HTML5/CSS3动画应用及源码

    HTML5可以制作非常华丽的动画效果,这点通过之前的分享学习我们已经有深刻的了解了,今天我们主要来分享一些HTML5结合CSS3形成的超炫震撼的动画应用以及它们的源代码,真的非常不错. 1.纯CSS3 ...

  3. 使用 SVG 制作单选和多选框动画【附源码】

    通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...

  4. 16款最佳HTML5超酷动画演示及源码

    1.HTML5/CSS3图片选择动画 可选择多张图片 之前我们已经分享过几款很酷的HTML5图片特效,像HTML5 3D图片折叠特效.HTML5 3D旋转图片相册等应用.今天我们来分享一款既炫酷又实用 ...

  5. 惊艳的HTML5动画特效及源码

    今天我们要来分享一些很酷的HTML5动画演示,HTML5的强大之处在于它可以利用canvas的特性来绘制很多普通网页无法完成的图形和动画,canvas就像一块超级画板,在上面不仅可以实现平面图形,而且 ...

  6. Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析

    这是关于RecyclerView的第二篇,说的是如何自定义Item动画,但是请注意,本文不包含动画的具体实现方法,只是告诉大家如何去自定义动画,如何去参考源代码. 我们知道,RecyclerView默 ...

  7. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  8. 精妙无比 8款HTML5动画实例及源码

    1.jQuery垂直带小图标菜单导航插件 今天我们要来分享一款jQuery菜单插件,这款jQuery菜单是垂直的样式,鼠标滑过菜单项时会出现一个背景,菜单项的右侧也会出现一个小箭头.另外值得注意的是, ...

  9. 8款HTML5动画特效推荐源码

    1.HTML5 Canvas发光Loading动画 之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢.今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动 ...

  10. 绝对震撼 7款HTML5动画应用及源码

    1.HTML5 Canvas模拟衣服撕扯动画 超级逼真 今天又要来推荐一款HTML5 Canvas动画,是一个模拟衣服撕扯动画,效果非常逼真.刚开始衣服挂在绳子上,用鼠标拖拽衣服即可让衣服摆动起来,当 ...

随机推荐

  1. 数电第二周总结_by_yc

    数电第二周总结_CC 重点: 模块实例化.仿真测试.数值表示.参数.表达式. 模块实例化端口连接方法: A.顺序端口连接:需严格按照模块定义时的顺序 B.明明端口连接:对端口信号顺序不做要求 Ex-1 ...

  2. Forest + IDEA = 双倍快乐！ForestX 隆重登场

    Forest + IDEA = 双倍快乐!ForestX 隆重登场 Forest 是一款声明式的 Java 开源 HTTP 框架,相比它的前辈 Httpclient 和 OkHttp 更简明易懂.也更 ...

  3. 【每日一题】【奇偶分别中心扩展/动态规划】2022年2月5日-NC最长回文子串的长度

    描述对于长度为n的一个字符串A(仅包含数字,大小写英文字母),请设计一个高效算法,计算其中最长回文子串的长度. 方法1:奇数偶数分别从中心扩展 import java.util.*; public c ...

  4. MySQL数据结构(索引)

    目录 一:MySQL索引与慢查询优化 1.什么是索引? 2.索引类型分类介绍 3.不同的存储引擎支持的索引类型也不一样 二:索引的数据结构 1.二叉树(每个节点只能分两个叉) 2.数据结构(B树) 3 ...

  5. 现代 CSS 高阶技巧，完美的波浪进度条效果！

    本文是 CSS Houdini 之 CSS Painting API 系列第三篇. 现代 CSS 之高阶图片渐隐消失术 现代 CSS 高阶技巧,像 Canvas 一样自由绘图构建样式! 在上两篇中,我 ...

  6. 常用内置模块之collections模块、时间模块、随机数random模块

    今日内容回顾 目录 今日内容回顾 包的具体使用 编程思想的转变 软件开发目录规范 常用内置模块之collections模块 常用内置模块之时间模块 常用内置模块之随机数random模块 报的具体使用 ...

  7. Nmap常用方法

    1.扫描单个目标地址  在Nmap后面直接添加目标地址即可扫描  nmap 目标地址  2.扫描多个目标地址  如果目标不在同一网段,或在同一网段但不连续且数量不多,可以使用该方法进行扫描  nmap ...

  8. WPF 自定义附加事件

    我们都知道路由事件,而附加事件用的比较少. 但如果是通用的场景,类似附加属性,附加事件就很有必要的. 举个例子,输入设备有很多种,WPF中输入事件主要分为鼠标.触摸.触笔:WPF 屏幕点击的设备类型 ...

  9. C#应用程序配置文件（XML序列化） - 开源研究系列文章

    上次写了一个C#线程池及管理器的博文( C#开发的线程池和管理器 - 开源研究系列文章 ),收到了不小的浏览量,在此感谢各位网友的支持.这次将另一个功能放出来单独讲解:C#应用程序的配置文件,使用的是 ...

  10. 琐碎的想法（五）for 的前世今生

    for 起因 记得大学上C语言的课,第一次遇到的问题就是循环结构里面的 for. 选择结构的 if 非常易懂,和日常生活的判断没有区别. 循环结构的 while 同样比较好理解. 本质上是一个判断 如 ...