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. npm 依赖下载报错：主机名/IP与证书的altname不匹配

    npm 依赖下载报错:主机名/IP与证书的altname不匹配: //取消ssl验证 npm set strict-ssl false npm config set registry http://r ...

  2. PostgreSQL常用操作合辑：时间日期、系统函数、正则表达式、库表导入导出、元数据查询、自定义函数、常用案例

    〇.参考地址 1.pg官方文档 http://www.postgres.cn/docs/9.6/index.html 2.腾讯云仓pg文档 https://cloud.tencent.com/docu ...

  3. 当我们的执行 java -jar xxx.jar 的时候底层到底做了什么？

    大家都知道我们常用的 SpringBoot 项目最终在线上运行的时候都是通过启动 java -jar xxx.jar 命令来运行的. 那你有没有想过一个问题,那就是当我们执行 java -jar 命令 ...

  4. nuxt.js中引入lib-flexible 和 postcss-px2rem 实现pc自适应

    最近一个需要用nuxt框架实现的pc自适应项目,从网上找了很多资料,最终完美实现 一.下载相关插件 npm i lib-flexible -Snpm i px2rem-loader -Dnpm ins ...

  5. 洛谷P1434例题分析

    [SHOI2002] 滑雪 题目描述 Michael 喜欢滑雪.这并不奇怪,因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你.Mic ...

  6. hashlib 模块 subprocess 模块 logging日志模块

    今日内容 hashlib加密模块 1.何为加密 将明文数据处理成密文数据 让人看不懂 2.为什么加密 保证数据的安全 3.如何判断数据是否加密的 一串没有规律的字符串(数字.字母.符号) 4.密文的长 ...

  7. Loj 507 接竹竿 题解

    Loj链接:接竹竿 $ {\scr \color {SkyBlue}{\text{Solution}}} $ 题目大意: 给定一个数组,每次加入一种颜色的数,可以取走与它颜色相同的两个数之间的所有数, ...

  8. LeetCode-343. 整数拆分 - 题解分析

    题目来源 343. 整数拆分 题目详情 给定一个正整数 n ,将其拆分为 k 个 正整数 的和( k >= 2 ),并使这些整数的乘积最大化. 返回 你可以获得的最大乘积 . 示例 1: 输入: ...

  9. SQLSERVER 的 nolock 到底是怎样的无锁？

    一:背景 1. 讲故事 相信绝大部分用 SQLSERVER 作为底层存储的程序员都知道 nolock 关键词,即使当时不知道也会在踩过若干阻塞坑之后果断的加上 nolock,但这玩意有什么注意事项呢? ...

  10. 重写Object类的equals方法-Objects类的equals方法

    重写Object类的equals方法 Object类的equals方法默认比较的是两个对象的地址值,没有意义所以我们学要重写equals方法,比较两个对象的属性值(name,age) 对象的属性值一样 ...