html阅读封面代码,HTML5/SVG 书本封面设计
CSS
语言：
CSSSCSS
确定
@import url(http://fonts.googleapis.com/css?family=Fjalla+One);
html {
height: 100%;
}
body {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background: #3d505f;
}
.cover {
height: 90%;
}
svg {
height: 100%;
}
svg text {
font-family: Fjalla One;
}
@-webkit-keyframes light {
0% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes light {
0% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes light-b {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes light-b {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes light-c {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes light-c {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes light-d {
0% {
opacity: 0;
}
60% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes light-d {
0% {
opacity: 0;
}
60% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes sky {
0% {
opacity: 1;
}
100% {
opacity: 0.4;
}
}
@keyframes sky {
0% {
opacity: 1;
}
100% {
opacity: 0.4;
}
}
#light0 {
opacity: 0;
-webkit-animation: light 6s 1s infinite forwards alternate;
animation: light 6s 1s infinite forwards alternate;
}
#light-1,
#light1 {
opacity: 0;
-webkit-animation: light-b 6s 1s infinite forwards alternate;
animation: light-b 6s 1s infinite forwards alternate;
}
#light-2,
#light2 {
opacity: 0;
-webkit-animation: light-c 6s 1s infinite forwards alternate;
animation: light-c 6s 1s infinite forwards alternate;
}
#light3 {
opacity: 0;
-webkit-animation: light-d 6s 1s infinite forwards alternate;
animation: light-d 6s 1s infinite forwards alternate;
}
#sky {
opacity: 1;
-webkit-animation: sky 6s 1s infinite forwards alternate;
animation: sky 6s 1s infinite forwards alternate;
}
html阅读封面代码,HTML5/SVG 书本封面设计相关推荐
- 跨平台html5页面代码,HTML5+CSS3跨平台网页设计实例教程
HTML5+CSS3跨平台网页设计实例教程 编辑 锁定 讨论 上传视频 <HTML5+CSS3跨平台网页设计实例教程>是2018年8月清华大学出版社出版的图书,作者是陈承欢.韩耀坤.颜珍平 ...
- html5 svg中国地图map悬停显示省市地区代码
html5 svg中国地图map悬停显示省市地区代码 html5 svg中国地图map悬https://www.51qianduan.com/article/4401.html停显示省市地区代码
- HTML5 SVG卡通水母动画代码
介绍 HTML5 SVG卡通水母动画代码,水母游泳动画. 下载链接 http://www.bytepan.com/wcCJwEsUfnC 图片
- HTML5: SVG （可缩放矢量图形）
ylbtech-HTML5: SVG (可缩放矢量图形) 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 1. ...
- 一篇文章教会你使用HTML5 SVG 标签
[一.项目背景] SVG 表示可伸缩矢量图形,这是一门用于描述 2D 图形的语言,图形应用使用 XML 编写,然后 XML 由 SVG 阅读器程序呈现.支持三种类型的图形对象:矢量图形形状(例如,由直 ...
- html5列表菜单特效,HTML5 SVG汉堡包菜单按钮分段动画特效
这是一款效果非常炫酷的HTML5 SVG汉堡包菜单按钮分段动画特效.该菜单按钮特效在用户点击汉堡包按钮时,按钮会分割为多段,并旋转变形为关闭按钮的状态.当再次点击该按钮时,它会逆向变形为汉堡包图标. ...
- 如何制作HTML5 SVG描边文字
在很多时候,SVG是最容易在网页上做出文字特效的方法.现在SVG已经被所有的现代浏览器支持,包括IE9.要在页面上制作SVG文字,可以直接将SVG代码插入带页面中,SVG文字代码十分简单易懂.如下是一 ...
- 动态打字效果 html,html5 svg酷炫的打字动画特效
特效描述:html5 svg打字动画特效.html5 svg在input文本框里面输入文字,酷炫的动态打字动画特效. 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 const sel ...
- html5圆形提交按钮样式,HTML5 SVG带圆形进度条动画的提交按钮特效
这是一款非常实用的HTML5 SVG带圆形进度条动画的提交按钮特效.该提交按钮在被点击之后,按钮变形为一个圆形的进度条,当进度条运行一周之后,可以设置提交成功和提交失败的两种按钮状态. 制作方法 HT ...
最新文章
- 如何理解和评价机器学习中的表达能力、训练难度和泛化性能
- python 终端打印表格--------pylsy 源码
- 软件获取手机的ime权限_【手机谷歌软件下载】【安卓+iOS】老湿机最爱~免翻，获取各种“特殊”资源！...
- 第三章：Java_面向对象编程（一）
- 玩转oracle 11g（32）：plsql版本低需到配置文件中添加配置
- VMware Workstation Pro 无法在Windows 上运行的 解决办法
- encrypt函数c语言,Crypt加密函数简介（C语言）
- 【Python】Could not find a version that satisfies the requirement cv2 (from versions: ) 的解决方案
- 解决centos下sudo运行tshark，写入文件显示：Permission denied.
- java jpa自身关联_java-如何通过JPA / Hibernate加入获取两个关联
- 前端那些事之日历多选插件篇
- 单片机课设中期报告_基于单片机的火灾自动报警系统 中期报告
- 百度开源的 71 个项目，不了解一下？
- form表单提交，action需要加项目名
- 高中政治教师资格证考试成功通过前辈备考经验谈
- Rdata数据导成txt,csv,spss,stata等格式
- 基于 vue.js 的仿QQ聊天室
- 计蒜客 -- 常用STL题解
- 如何将数据从Excel文件导入SQL Server数据库
- 机器人教育在STEM课程中的设计研究
热门文章
- 交流永磁同步电机控制实验平台
- 数学与计算机科学虎扑,数学发展到今天还有继续研究的必要吗？
- 第六周组会摘要工作计划与分工
- 谷粒商城分布式高级篇总结文档
- linux免采集卡直播ps4,PS4游戏直播采集卡使用教程详解
- 笔记整理4----Java语言高级（四）16 JAVA常用API-高级+17 泛型与常见数据结构+18 Map与Set集合+19 异常处理+20 IO流-高级
- 计算机毕业设计Java诚越园区垃圾分类信息科普系统(源码+系统+mysql数据库+lw文档)
- Python数据结构15：turtle模块制图，画直线，正方形，星星，递归可视化：分形树，谢尔宾斯基三角形
- php 日期相减获得天数,PHP两个日期相减 计算天数、月、年[Stack Overflow]
- 图像处理学习2，边缘检测1（sobel算子，kirsch算子）