视频8 CSS动画运用

最新推荐文章于 2024-10-02 22:46:43 发布
最新推荐文章于 2024-10-02 22:46:43 发布
阅读量738 收藏 20
点赞数 21
文章标签： 音视频 css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80107377/article/details/135318398
版权

<!DOCTYPE html>

<html>

<head>

<meat charset="utf-8">

<title>视频8</title>  

<link href="style07.css" type="text/css" rel="stylesheet">

<meta http-equiv="content-type" content="text/html;charset=utf-8">

</head>

<body>

    <div id="head">

        <div class="con">

            <ul class="left">

                <li>首页</li>

                <li>电影音乐</li>

                <li>独家栏目</li>

                <li>VIP影院</li>

                <li>电影百科</li>

            </ul>

            <ul class="right">

                <li>APP下载</li>

                <li>播放记录</li>

                <li>登录|注册</li>

            </ul>

        </div>

    </div>

    <div id="nav">

        <div class="nav_in">

            <ul>

                <li><a href="#"></a></li>

                <li><a href="#">个人中心</a></li>

                <li><a href="#">视频播放</a></li>

            </ul>

            <ol>

                <li>&#xe65e;</li>

                <li>&#xe608;</li>

                <li>&#xf012a;</li>

                <li>&#xe68e;</li>

            </ol>

        </div>

    </div>

    <div class="banner">

        <div class="banner_pic">

            <div class="current"><img class="ban" src="images/banner01.jpg"></div>

        </div>

        <p>迅速发现最新影视快讯|尽享国内外优秀视频资源|分享观影心得结识新朋友</p>

        <p class="ty2">观看最新视频</p>

        <ol id="button">

            <li class="current"></li>

            <li class="but"></li>

            <li class="but"></li>

        </ol>

        <a href="#con" class="sanjiao">

            <img src="images/jiantou.png" alt="">

        </a>

    </div>

    <div class="hot">

        <h2>最热视频</h2>

        <video src="video/pian.mp4" controls></video>

        <a href="#"><img src="images/pic02.jpg"></a>

        <a href="#"><img src="images/pic03.jpg"></a>

        <a href="#"><img src="images/pic04.jpg"></a>

        <a href="#"><img src="images/pic05.jpg"></a>

        <a href="#"><img src="images/pic06.jpg"></a>

    </div>

    <div class="share">

        <h2>观影达人</h2>

        <a href="#">

            <img src="images/pic07.jpg">

            <div class="cur">

                <img src="images/pic01.png">

                <h3>nosay</h3>

                <p>视频: 34 订阅粉丝: 30112</p>

                <span>订阅</span>

            </div>

        </a>

        <a href="#">

            <img src="images/pic07.jpg">

            <div class="cur">

                <img src="images/pic02.png">

                <h3>nosay</h3>

                <p>视频: 34 订阅粉丝: 30112</p>

                <span>订阅</span>

            </div>

        </a>

        <a href="#">

            <img src="images/pic07.jpg">

            <div class="cur">

                <img src="images/pic03.png">

                <h3>nosay</h3>

                <p>视频: 34 订阅粉丝: 30112</p>

                <span>订阅</span>

            </div>

        </a>

        <a href="#">

            <img src="images/pic07.jpg">

            <div class="cur">

                <img src="images/pic04.png">

                <h3>nosay</h3>

                <p>视频: 34 订阅粉丝: 30112</p>

                <span>订阅</span>

            </div>

            </a>

    </div>

    <div id="footer">

        <div class="foot">

            <a href="#head"><span>TOP</span></a>

            <p>Copyright©2020 视频8 shipin8.com 版权所有</p>

        </div>

    </div>

</body>

素材：

2301_80107377
关注
css的animation动画
yuan0209的博客
11-25 1万+
顾名思义，它可以控制动画的状态 – 运行或者暂停,类似于视频播放器的开始和暂停,是 CSS 动画中有限的控制动画状态的手段之一。在 1-2 秒范围内随机，这样，我们就可以得到非常自然且不同的上升动画效果，基本不会出现重复的画面，很好的模拟了随机效果。属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由。中定义的第一帧这种说法，因为动画运行的第一帧和最后一帧的实际状态还会受到动画运行方向。，可以有效的构建更为随机的动画效果，让动画更加的自然。
css3动画用什么规则,运用css3动画需要运用什么规则
weixin_33438788的博客
08-04 608
CSS3 @keyframes 规则标签定义及使用说明使用@keyframes规则，你可以创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中，您可以更改CSS样式的设定多次。指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。0％是开头动画，100％是当动画完成。(推荐学习：CSS3视频教程。)为了获得最佳的浏览器支持，您应该始终定义为0％和...
深入浅出 CSS 动画
热门推荐
前端开发博客
05-21 2万+
关注公众号前端开发博客，领27本电子书回复加群，自助秒进前端群本文将比较全面细致的梳理一下 CSS 动画的方方面面，针对每个属性用法的讲解及进阶用法的示意，希望能成为一个比较好的从入门到进阶的教程。CSS 动画介绍及语法首先，我们来简单介绍一下 CSS 动画。最新版本的 CSS 动画由规范 -- CSS Animations Level 1[1] 定义。CSS 动画用于...
写一个简单的 CSS 动画
weixin_62399390的博客
06-26 805
首先，我们来简单介绍一下 CSS 动画。最新版本的 CSS 动画由规范 -- CSS Animations Level 1[1] 定义。CSS 动画用于实现元素从一个 CSS 样式配置转换到另一个 CSS 样式配置。动画包括两个部分: 描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。简单来说，看下面的例子：div {0% {100% {部分就是动画的第一部分，用于描述动画的各个规则;部分就是动画的第二部分，用于指定动画开始、结束以及中间点样式的关键帧;
前端css中animation(动画)的使用
小蜗牛764号的博客
05-06 5501
animation常伴随着动画帧`@keyframes`一起使用。本文主要说明animation都有啥属性，然后简单的进行使用。 animation动画有多个属性，每个属性也有相应相关的值。另外我们使用过程中也可以使用简便方法，如`“animation:”+后面各属性的值，用空格隔开+“；”`的形式设置动画效果。举例如：`animation: box1 3s linear 2s infinite;`
css3动画用什么规则,使用css3中的什么规则来定义动画
weixin_39913105的博客
08-04 1173
使用css3中的“@keyframes”规则来定义动画。“@keyframes”规则用于指定动画规则，定义一个CSS动画的一个周期的行为，可以创建简单的动画；可通过沿动画序列建立关键帧来指定动画序列循环期间的中间步骤。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。@keyframes是CSS3的一种规则，可以用来定义CSS动画的一个周期的行为，...
5分钟实现漂亮的CSS加载动画，纯CSS实现加载动画
AlbertYang的博客
12-27 1万+
1 视频 视频地址： 2 知识点 2.1CSS calc() 函数 CSS calc() 函数用于动态计算长度值。 语法 calc(expression) 值 描述 expression 必须，一个数学表达式，结果将采用运算后的返回值。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100%- 10px)； 任何长度值都可以使用calc()函数进行计算； calc...
CSS动画简介
山鸡的春天
06-20 326
现在，我很少写介绍CSS的文章，因为感觉网站开发的关键还是在服务器端。 但是，CSS动画除外，它实在太有用了。本文介绍CSS动画的两大组成部分：transition和animation。我不打算给出每一条属性的详尽介绍，那样可以写一本书。这篇文章只是一个简介，帮助初学者了解全貌，同时又是一个快速指南，当你想不起某一个用法的时候，能够快速地找到提示。我的主要参考资料是，2013年10月，Lea Ve
CSS 奇思妙想边框动画
m0_70273331的博客
04-30 2339
} 由于 border 和 background 在盒子模型上位置的差异，视觉上会有一个很明显的错位的感觉： 要想解决这个问题，我们可以把 border 替换成 outline，因为 outline 可以设置 outline-offset。便能完美解决这个问题： div { outline: 1px solid #333; outline-offset: -1px; &:hover { outline: none; } } 最后看看运用到实际按钮上的效果 《大厂前端面试题解析+Web核心总结学习笔
纯CSS3实现图标加载动画特效
06-24
这些动画可以应用于网页的各个部分，如页面内容加载、API调用期间或者视频缓冲时，以告知用户系统正在进行后台操作并提示他们耐心等待。 使用纯CSS3实现图标加载动画的优势在于： - **轻量化**：相比于JavaScript...
30种CSS3加载动画
03-03
在网页设计领域，CSS3（层叠样式表第三版）的出现极大地丰富了网页的视觉效果，特别是其...而“30种CSS3加载动画”的资源包，无疑为开发者和设计师提供了丰富的灵感和实例，帮助他们在实践中更好地掌握和运用这些技巧。
30 个 jQuery & CSS3 加载动画和进度栏插件
03-02
"30个jQuery & CSS3加载动画和进度栏插件"集合了多种创新且高效的工具，旨在帮助开发者创建吸引人的、反馈及时的网页交互。下面我们将深入探讨这些技术及其应用。 首先，jQuery是一个强大的JavaScript库，它简化了...
CSS3遮罩banner动画.zip
07-04
总结，"CSS3遮罩Banner动画"是一个结合了CSS3遮罩技术和动画效果的设计手法，通过巧妙地运用遮罩和动画，可以为网站的Banner添加丰富的视觉动态效果，提高用户的交互体验。压缩包中的4129文件可能包含了实现这些效果...
农业集团CSS3动画企业网站模板5793.zip
04-07
《农业集团CSS3动画企业网站模板5793详解》 在互联网技术日新月异的今天，前端设计已经成为企业展示形象、吸引用户的重要手段。本文将深入解析“农业集团CSS3动画企业网站模板5793”，为前端新人提供一个快速搭建高...
浅谈汽车智能座舱如何实现多通道音频
wpgddt的博客
09-30 1071
随着汽车智能座舱的功能迭代发展，传统的 4 通道、6 通道、8 通道等音响系统难以在满足驾驶场景的需求，未来对于智能座舱音频质量和通道数会越来越高。接下来本文将浅析目前智能座舱如何实现音频功放，以及如何实现多路音频功放方案。
视频美颜SDK与直播美颜工具API的架构设计与实现
q1031691172的博客
09-29 590
视频美颜的实现依赖于大量的图像处理和计算，因此选择高效的算法至关重要。通常，采用深度学习和卷积神经网络（CNN）等技术能够显著提升人脸识别和美颜处理的准确性与效率。
计算机毕业设计 服装生产信息管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解
m0_74181697的博客
09-30 1800
服装生产信息管理系统是一个为服装制造业设计的全面管理解决方案。系统包括生产计件、工资核算、库存管理、产品出入库管理等功能，旨在提高生产效率，减少错误，优化资源配置，并提供决策支持。该系统有助于企业实现生产流程的自动化和信息化，提升客户满意度，增强市场竞争力。
SolveigMM Video Splitter方便快捷视频分割合并软件 V3.6.1309.3-供大家学习研究参考
最新发布
惠惠软件
10-02 239
I(DivX、DV、MJPEG、XVID、MPEG-4)、WMV、ASF(DivX、MJPEG、XVID、MPEG-4、WM Video 7/9)F、MPEG(*.mpg、*.mpeg、*.mpv、*.m2v、*.vob)文件、也支持受损的WMV、ASF格式的分割。I、WMV/ASF、WMA、MP3、MPEG-2 PS/TS/VES、MPEG-1 SS/VES、MPG、MPV、DAT等格式。视频预览的话需要相应的解 码器，但不影响分割。视频分割功能(Splitter)支持各种编码格式的。
打造简约YouTube视频侧边菜单动画教程
"本篇文章主要介绍了如何实现YouTube视频播放时左侧面板上看到的简约菜单效果，这种效果包括一个小小...通过学习这篇文章，读者不仅能掌握如何模仿YouTube的菜单效果，还能了解如何运用CSS3的动画功能增强网页交互性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值