css 透明度_如何使用CSS实现精美视频片头制作
借助CSS所提供的动画效果,旋转效果除了能够制作动画及网页页面元素,如按钮之外,还可以使用CSS实现精美的动态片头的制作。本文主要介绍CSS与HTML实现精美的动画片头制作实例。
如何使用CSS实现精美片头制作
CSS动态片头设计实例
本例设计使用烟雾粒子效果与动态文本结合,实现动态片头效果,文字内容随着烟雾而动态生成、展示,案例最终效果要求描述如下:
动态片头实现效果描述
本例设置实现动态效果描述如上图所示,主要内容包括三部分,实现效果要求如下:
1、动态烟雾效果
动态烟雾部分主要借助视频资源MP4实现,通过在页面指定位置定义video视频标签,设置src资源属性,自动播放烟雾部分视频即可。
2、主标题部分
主标题部分主要通过使用animation属性进行动画设置,使用opacity属性设置其透明度,分别从完全透明到100%不透明,使用单独HTML元素表示每一个字符,在每个字符进行展示时,设置动画延迟时间animation-delay属性,最终展现与烟雾一致的显示效果。
3、副标题部分
副标题部分主要设计效果为随时间字体的透明度与模糊程度发生变化,并且使用元素投影效果,随着时间投影角度发生动态变化。
知识点、技能点说明
1、基本页面布局
本例页面元素主要包括video视频标记、section章节标记、h标题标记、span标记与i标记。按照最终展示效果进行页面的基本布局,页面布局实现代码描述如下:
基本页面布局HTML代码
2、主标题CSS及动画设置
在完成基本页面布局之后可以进一步编写主标题部分,并对主标题部分CSS与动画进行设置。主要涉及到属性包括:
- opacity:透明度
- rotateY():y轴旋转
- filter:blur():模糊程度设置
- animation-delay:动画延迟时间设置
- letter-spacing:字符间距
- nth-child():CSS选择器,用于选择子元素
借助以上基本CSS属性设置,我们可以对主标题部分动画效果进行编码与实现,部分实现代码如下所示:
h span css定义
使用span表示主标题字符延时设置
3、子标题CSS及动画实现
按照设计要求,子标题主要效果包括透明度、模糊度改变、投影及投影角度变化等。主要涉及CSS属性包括以下:
- opacity属性
- filter:blur()属性
- filter: drop-shadow()属性
借助以上CSS效果属性与animation动画属性设置,最终可以实现子标题设计提出的效果要求部分核心代码说明如下:
子标题实现效果代码
子标题部分实现代码如上图所示,其中drop-shadow用于实现投影功能,其中第一个参数与第二个参数可用于实现角度设置,第三个参数用于设置模糊程度,最后一个参数用于描述阴影颜色。以上给出了CSS动态片头效果实现的基本思路与部分核心实现代码。不足之处欢迎大家留言探讨。
本头条号长期关注编程资讯分享;编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见,可在评论区回复。更多程序设计相关教程及实例分享,期待大家关注与阅读!
css 透明度_如何使用CSS实现精美视频片头制作相关推荐
- css 透明度_如何在网页控制透明度
文字描边 透明度在网页是一个很重要的属性,非常多的特效都需要控制透明度来完成. 01 语法 通过修改元素透明度 opacity:数值; opacity属性取值范围为0.0~1.0,0.0表示完全透明, ...
- bootstrap起步 全局css样式概览 全局css样式_栅格 全局css样式_排版
http://www.bootcss.com/基本模板 https://v3.bootcss.com/getting-started/#template bootstrap起步 <!DOCTYP ...
- html中的透明度怎么设置,css透明度怎么设置?css中各种透明度的设置方法总结...
本篇文章给大家介绍一下css中透明度的设置方法,下面我们就来看看具体的内容. 不透明度和透明度 根据定义,CSS中的不透明度和透明度定义了元素的可见性,无论是图像,表格还是RGBA(红绿蓝alpha) ...
- xml不显示css样式_如何使用CSS显示XML?
xml不显示css样式 Introduction: 介绍: You must be aware of the term XML and must have dealt with these vario ...
- css 变量_如何将CSS变量用于动画
css 变量 当我们在讨论中提到CSS时,我们通常将其称为愚蠢的语言. 一种声明性语言,缺乏逻辑和洞察力: 但这不是真实的现实. 多年来,开发人员一直渴望标准CSS中的变量,长期以来一直被诸如LESS ...
- css 毛玻璃_我写CSS的常用套路(附demo的效果实现与源码)
作者:alphardex 出自:掘金 原文:https://juejin.im/post/5e070cd9f265da33f8653f00 前言 本文是笔者写CSS时常用的套路.不论效果再怎么华丽,万 ...
- css模糊_如何使用CSS模糊图像?
css模糊 Introduction: 介绍: Sometimes even the professional developers tend to forget the various basic ...
- css反转_如何使用CSS反转颜色
css反转 I had this problem. I added a "black on white" image on a page, only to realize that ...
- css 编辑器_十大CSS编辑器[评论]
CSS是一种简单的语言,不需要特殊的编辑器即可编写. 但是,使用合适的代码编辑器将有助于您在编写CSS代码时最大程度地减少错误,并总体上提高生产率. 我知道对于某些开发人员来说,代码编辑器是个人喜好: ...
最新文章
- 金融数据分析(二)-------基本资本,金融衍生品,资本收益率
- Serverless 对研发效能的变革和创新
- php mysql购物车实现原理_PHP实现购物车的思路和源码分析
- java 可变参数_90.Java可变参数
- orderquery.php,multiOrderQuery.php
- html页面在f5刷新后把所有值清零,页面刷新列表内容不丢失
- Thrift的安装和简单示例
- 25.软件磁盘阵列(Software RAID)
- 苹果+beta+软件测试计划,自讨苦吃:加入苹果Apple Beta版软件计划之后
- 十分钟快速Maven下载和安装说明
- Python调用海康威视网络相机_调用海康SDK
- CloudFlare:免费CDN加速-自定义节点IP教程
- 计算机用几个字节储存,GB2312编码的字符在计算机中存储时使用几个字节
- Ternary Tree
- 声声不息,新“声”报到
- TextView文字下划线的添加
- 传奇登录器修改服务器列表,传奇登录器TCP服务器远程列表「防劫持」设置教程...
- mybatis不区分大小写问题
- JSON是什么 JSON怎么用
- [ARM+Linux] 基于全志h616外设开发笔记
热门文章
- 程序员面试金典 - 面试题 01.08. 零矩阵
- LeetCode 629. K个逆序对数组(DP)
- LeetCode 136. 只出现一次的数字(异或^)
- 导Excel数据到Oracle的脚本,Oracle使用TOAD实现导入导出Excel数据
- 安卓apk签名提取工具_Android测试工具入门介绍(二)
- 机器学习简介及学习思维导图
- html-css练习题 (注册表单)
- educoderpython答案顺序结构程序设计_答案汇总:土木机械类+计算机类
- 论文浅尝 | ICLR 2020 - 一文全览知识图谱研究
- 关系抽取、时间抽取,实践项目推荐