`

CSS实现多屏动态变化展示

阅读更多

CSS实现多屏动态变化展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        /**
 * Document defaults
 */
        body {
            text-align: center;
            background-color: #eee;
        }

        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }


        /* The loader container */
        .loader {
            position: absolute;
            top: 50%;
            left: 50%;

            width: 200px;
            height: 200px;

            margin-top: -100px;
            margin-left: -100px;
        }


        /* The dot */
        .dot {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 10;

            width: 160px;
            height: 100px;

            margin-top: -50px;
            margin-left: -80px;

            border-radius: 5px;

            background-color: #1e3f57;

            transform-type: preserve-3d;

            animation: dot1 3s cubic-bezier(.55,.3,.24,.99) infinite;
        }

        .dot:nth-child(2) {
            z-index: 11;

            width: 150px;
            height: 90px;

            margin-top: -45px;
            margin-left: -75px;

            border-radius: 3px;

            background-color: #3c617d;

            animation-name: dot2;
        }

        .dot:nth-child(3) {
            z-index: 12;

            width: 40px;
            height: 20px;

            margin-top: 50px;
            margin-left: -20px;

            border-radius: 0 0 5px 5px;

            background-color: #6bb2cd;

            animation-name: dot3;
        }

        @keyframes dot1 {
            3%, 97% {
                width: 160px;
                height: 100px;

                margin-top: -50px;
                margin-left: -80px;
            }
            30%, 36% {
                width: 80px;
                height: 120px;

                margin-top: -60px;
                margin-left: -40px;
            }
            63%, 69% {
                width: 40px;
                height: 80px;

                margin-top: -40px;
                margin-left: -20px;
            }
        }

        @keyframes dot2 {
            3%, 97% {
                width: 150px;
                height: 90px;

                margin-top: -45px;
                margin-left: -75px;
            }
            30%, 36% {
                width: 70px;
                height: 96px;

                margin-top: -48px;
                margin-left: -35px;
            }
            63%, 69% {
                width: 32px;
                height: 60px;

                margin-top: -30px;
                margin-left: -16px;
            }
        }

        @keyframes dot3 {
            3%, 97% {
                width: 40px;
                height: 20px;

                margin-top: 50px;
                margin-left: -20px;
            }
            30%, 36% {
                width: 8px;
                height: 8px;

                margin-top: 49px;
                margin-left: -5px;

                border-radius: 8px;
            }
            63%, 69% {
                width: 16px;
                height: 4px;

                margin-top: -37px;
                margin-left: -8px;

                border-radius: 10px;
            }
        }
    </style>
</head>
<body>
<div class="loader">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>
</body>
</html>

 

 

 

 

 

 

 

 

 

.

分享到:
评论

相关推荐

    基于Echarts和CSS的大数据分析展示大屏.rar

    3. **动画效果**:使用CSS动画和过渡,为数据动态变化提供平滑的视觉体验。 4. **响应式设计**:根据设备屏幕大小调整布局和样式,确保大屏在不同设备上的适配性。 【Js】JavaScript是网页开发中必不可少的脚本语言...

    数据可视化大屏的css背景+边框+demo.rar

    在实际应用中,这样的大屏通常包括多个图表组件,通过组合和联动,使用户能全面了解数据的状态和变化。 总之,这个压缩包提供了关于数据可视化大屏设计和实现的实用素材,结合CSS的背景和边框技巧,可以创建出专业...

    大屏可视化,html+CSS+JS+echarts

    大屏可视化是现代数据分析和信息展示的重要手段,它利用大屏幕的高分辨率和宽广视野,将复杂的数据转化为直观、动态的图形展示。在“大屏可视化,html+CSS+JS+echarts”这个主题中,我们将深入探讨如何利用这四种...

    CSS3雷达扫描动态图.zip

    【CSS3雷达扫描动态图】是一个使用纯CSS3技术实现的网页特效,它展示了如何通过CSS3的关键帧动画(@keyframes)来创建一个模仿雷达扫描的动态效果。这个效果通常用于增强网页的互动性和视觉吸引力,比如在游戏界面、...

    中国省份地图CSS实现

    总的来说,中国省份地图CSS实现是一个结合HTML、CSS和可能的JavaScript技术的示例,展示了前端开发中的创新和实用性。通过巧妙地运用CSS,我们不仅可以创建美观的图形,还能实现丰富的交互体验,让网页更加生动和...

    flex 多屏切换特效

    下面我们将深入探讨Flex布局以及如何实现多屏切换特效。 1. **Flex布局基础** - Flex布局,也称为Flexible Box布局,是CSS3的一种布局模式,旨在解决传统块级布局在处理弹性内容和自适应设计上的困难。 - 容器...

    纯CSS实现的鼠标触及显示边框和描述的图片特效

    本文将深入探讨如何使用纯CSS实现一个功能:当鼠标触及图片时,图片会显示边框并展示相关的描述。这种效果可以增强用户交互体验,使网站更加生动有趣。 首先,我们需要一个HTML结构来存放图片和描述。通常,我们...

    2019情人节纯CSS实现动态精灵示爱浪漫动画特效代码.zip

    这个压缩包"2019情人节纯CSS实现动态精灵示爱浪漫动画特效代码.zip"包含了一个利用纯CSS技术制作的浪漫示爱动画特效,特别适合在情人节或其他浪漫场合使用。这个特效不仅在桌面端表现出色,还支持自适应手机移动端,...

    CSS3区域全屏放大动画特效.zip

    这个特效的核心在于利用CSS3的选择器、变换(transform)以及过渡(transition)属性,配合JavaScript进行事件监听和处理,从而实现动态的效果。 1. **CSS3选择器**:CSS3引入了更强大的选择器,如类选择器、ID选择...

    纯CSS实现的星空粒子动态特效源码.zip

    总之,这个纯CSS实现的星空粒子动态特效是一个展示CSS3强大能力的实例,它利用了现代CSS的许多高级特性,如动画、转换、过滤器和伪元素,创造出一种视觉上引人入胜的交互体验。对于前端开发者来说,深入研究这个源码...

    CSS3宽屏滑动下拉菜单导航特效

    2. **过渡(Transition)**:通过指定两个状态之间的变化速度,可以平滑地改变一个或多个CSS属性。在滑动下拉菜单中,过渡效果可以应用于高度、透明度等属性,使菜单展开和收起过程更加流畅。 3. **变换(Transform...

    CSS + jQuery 实现的键盘特效

    本文将详细探讨如何利用CSS和jQuery来实现一个键盘特效,以适应那些没有物理键盘的BS(Browser-Server)应用程序。 首先,CSS(Cascading Style Sheets)在其中扮演的角色是定义键盘的样式和布局。通过CSS,我们...

    css3实现旋转风车动画特效.zip

    在本项目中,“css3实现旋转风车动画特效.zip”是一个包含使用CSS3技术创建的动态风车动画的资源包。这个特效适用于网页设计和开发,可以为网站增添互动性和趣味性,尤其适合儿童或者游戏类网站。接下来,我们将详细...

    css实现天猫商品,

    以上是实现“css实现天猫商品”这一主题的关键技术点。通过熟练掌握这些CSS技巧,开发者能够构建出与天猫平台类似的商品展示效果,提供美观且易用的用户体验。在实际应用中,应结合HTML结构和JavaScript交互,进一步...

    jQuery和CSS3全屏响应式缩放切换幻灯片特效

    在这里,当slide切换时,CSS3的过渡效果使得slide的大小和位置变化显得自然流畅,而不是瞬间改变。而变换(Transform)则提供了旋转、缩放、移动等二维和三维效果,使得幻灯片在缩小和放大时具有立体感和动态效果。 ...

    纯css3炫酷粒子动画特效

    【CSS3炫酷粒子动画特效】是一种利用现代浏览器对CSS3特性的支持,通过编程方式创建出视觉上引人入胜的动态效果。这个特效主要依赖于CSS3的动画(Animations)和转换(Transforms)特性,以及可能的伪元素(Pseudo-...

    js css3全屏手风琴特效.zip

    【标题】"js css3全屏手风琴特效"是一个基于JavaScript和CSS3技术实现的交互式网页元素,主要用于创建动态且吸引人的全屏手风琴面板切换效果。这种特效通常用于网站的内容导航,帮助用户以简洁的方式查看和访问大量...

    html5+css3实现字体飘落

    CSS3则扩展了CSS的样式和布局能力,其中的动画模块(CSS Transitions和Animations)是实现动态效果的关键。通过定义关键帧(@keyframes)和过渡效果,我们可以控制字体在整个飘落过程中的样式变化,如颜色、大小、...

    CSS3实现动态黑色火车行驶特效源码.zip

    "CSS3实现动态黑色火车行驶特效源码.zip" 这个标题指出,这个压缩包包含了一个使用CSS3技术制作的、展示动态黑色火车行驶效果的代码示例。CSS3是层叠样式表(Cascading Style Sheets)的第三个版本,它引入了许多新...

    jquery+css3实现的全屏背景轮播切换特效.zip

    4. **多列布局(Multi-column Layout)**:如果轮播内容较多,CSS3的多列布局可以使其更美观地展示。 5. **变换(Transforms)**:允许元素在空间中进行旋转、缩放、移动和倾斜,常用于创建3D效果和动画。 6. **...

Global site tag (gtag.js) - Google Analytics