首页 > 编程语言 >直播网站源码,css实现状态平滑的动画

直播网站源码,css实现状态平滑的动画

时间:2022-12-07 14:23:37浏览次数:36  
标签:动画 panoramic 直播 background 源码 css

直播网站源码,css实现状态平滑的动画

 

<!DOCTYPE html>
<html>
<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>
        @keyframes panoramic {
            to { background-position: 100% 0; }
        }
        .panoramic {
            width: 150px; height: 150px;
            background: url('http://c3.staticflickr.com/3/2671/3904743709_74bc76d5ac_b.jpg');
            background-size: auto 100%;
            animation: panoramic 10s linear infinite alternate;
            animation-play-state: paused;
        }
        .panoramic:hover, .panoramic:focus {
            animation-play-state: running;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

以上就是直播网站源码,css实现状态平滑的动画, 更多内容欢迎关注之后的文章

 

标签:动画,panoramic,直播,background,源码,css
From: https://www.cnblogs.com/yunbaomengnan/p/16962912.html

相关文章

  • 直播app系统源码,使用scroll-view实现内容列表的竖向滚动
    直播app系统源码,使用scroll-view实现内容列表的竖向滚动app.json{ "pages":[  "pages/index/index" ], "window":{  "navigationBarBackgroundColor":"......
  • DataX源码分配三:配置加载
    【1】入口ConfigParser::parse   方法参数为命令行中指定的作业配置文件。 【2】配置保存方式datax使用Configuration类保存作业配置,保存方式简单粗暴。Config......
  • 【每天一个java设计模式(完)】 - 四万字实现23种设计模式(附示例源码)
    什么是设计模式:​​【每天一个java设计模式(零)】-设计模式基本概念及七大设计原则​​创建型模式工厂模式:​​【每天一个java设计模式(一)】-工厂模式​​抽象工厂模式:......
  • vue源码中的nextTick是怎样实现的
    一、Vue.nextTick内部逻辑在执行initGlobalAPI(Vue)初始化Vue全局API中,这么定义Vue.nextTick。functioninitGlobalAPI(Vue){//...Vue.nextTick=ne......
  • Vue源码解读之InitState
    前面我们讲到了_init函数的执行流程,简单回顾下:初始化生命周期-initLifecycle初始化事件-initEvents初始化渲染函数-initRender调用钩子函数-beforeCreate初始化依赖......
  • 我用iPad编了个Python贪吃蛇,附源码!
    贪吃蛇可以算是街机游戏中经典中的经典了,实际上即使是手敲代码也不会太难写。最近折腾了一番iPad上新上架的LightlyIDE,可以在iPad上编程开发,也支持GUI可视化界面,遂尝试使用......
  • css - content-visibility
    css-content-visibilitycontent-visibility:实现可见网页只加载可见区域内容介绍content-visibility是一个css属性,它控制一个元素是否呈现其内容,能让用户潜在地控制元......
  • 过渡和动画
    动画效果<scriptsetup>import{ref}from'vue'letname=ref('test')letisShow=ref(true)</script><template><button@click="isShow=!isShow">显......
  • DataX源码分析二:主体流程
    DataX的执行的入口方法是Engine::main方法,该方法中调用了Engine.entry(args)方法。1publicstaticvoidentry(finalString[]args)throwsThrowable{2O......
  • jetson nano调试指南1-源码下载
    1、本文使用jetpack4.3为例,可以使用此网站相应分支​​https://developer.nvidia.com/embedded/jetpack-archive​​2、点击进入下载代码页面​​https://developer.nvidia.......