css3水墨遮罩,CSS3水墨风格带音乐动画图特效
一款CSS3中国风水墨动画效果，文字陪有声朗读，同步！
使用方法
页面需要用到的CSS3样式*{
padding: 0;
margin: 0;
}
#box{
width: 100%;
height: 100%;
position: relative;
animation: run1 8s;
}
@keyframes run1{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
#box img.bj{
width: 100%;
}
#box img.sc1{
width: 15%;
position: absolute;
top: 60%;
left: 85%;
animation: run2 78s linear infinite 6s;
}
@keyframes run2{
from{
left:85%;
}
to{
left: 25%
}
}
#box img.sc2{
width: 12%;
position: absolute;
top: 30%;
left: 50%;
animation: run3 20s linear infinite 4s;
}
@keyframes run3{
0%{
width: 12%;
}
50%{
width: 15%;
}
100%{
12%
}
}
#box img#lsm{
position: absolute;
top: 0;
left: -900px;
animation: run4 80s linear infinite 4s;
}
@keyframes run4{
from{
left: -900px;
}
to{
left: 0px;
}
}
css3水墨遮罩,CSS3水墨风格带音乐动画图特效相关推荐
- css3彩色放大缩小发光loading文字加载动画js特效
下载地址 css3彩色放大缩小发光loading文字加载动画特效,文字样式有霓虹灯效果,文字也支持中文汉字. dd:
- 如何用手机HTML制作哆啦a梦,CSS3绘制哆啦A梦（带鼠标动画）
body{ margin: 0; background: lightblue; } /*哆啦A梦*/ .doa{ position: relative; top: 100px; } .head{ ma ...
- 二次元带音乐404源码
简介: 自适应二次元可爱音乐404页面模板很多人还是比较喜欢, 这款是一个大气全屏背景图,带音乐和鼠标特效的哦. 界面看着清爽 舒服,慢慢的回忆,非常不错. 网盘下载地址: http://kekewa ...
- 【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果~前端开发网页设计基础入门教程~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码 ...
- css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
- CSS3实现遮罩层效果
CSS3实现遮罩层效果 第一步.创建外层遮罩 先写个大盒子 <div id="box"></div> 再把盒子设置为固定定位,top.right.botto ...
- HTML网页设计制作大作业(div+css) ~中华美德6页面带音乐 ~ 学生网页设计作业源码(中华文化)
HTML网页设计制作大作业(div+css) ~ 中华美德6页面带音乐 ~ 学生网页设计作业源码(中华文化) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
- 【CSS3教程】CSS3基础常用技巧实例集合
为什么80%的码农都做不了架构师?>>> CSS3常用技巧 CSS3下条纹&方格斜纹背景的实现 一.效果抢先:CSS3下的条纹背景demo 这些美丽的纹饰全部都是由CS ...
- css3常用方法以及css3选择器
最重要的 CSS3 模块包括: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CSS3 边框 CSS3 边框 通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使 ...
- CSS3基础(4)——CSS3 渲染属性
一. CSS3 计数器详解 CSS3计数器(CSS Counters)可以允许我们使用CSS对页面中的任意元素进行计数,实现类似于有序列表的功能. 与有序列表相比,它的突出特性在于可以对任意元素 ...
最新文章
- mysql数据库主要用来做什么的_为什么有了 MySQL ，还要有时序数据库？
- 服务器自动关机怎么查,怎样设置WIN7系统的自动关机和查询系统上次的关机时间?...
- OpenLayers中地图缩放级别的设置方法
- 移动端 项目开发经验集锦
- js如何读取客户端Excel文件
- opencv 平滑处理
- 黑苹果 无法运行xcode_Hackintosh (黑苹果) 折腾
- 阿里云VPC和企业网络互通配置
- HTML 列表 olullidldtdd
- ETL过程中数据清洗(脏数据处理)小结
- 模糊c均值聚类算法原理详细讲解
- C++ Primer 5th ed.pdf
- 黑苹果登录apple id_充分利用Apple登录功能
- #include ＜netinet/in.h＞ #include ＜netdb.h＞ 在windows下对应什么头文件
- 嵌入式监控【v4l2采集-＞vpu编码-＞live555推流】
- SpringBoot 接口数据加解密
- CUDA以及NVCC编译流程
- Redis 中哨兵sentinel 机制、从宕机及恢复、主库宕机及恢复解决方案
- Docker安装及镜像配置（常用命令介绍）
- jaccard相似性度量