CSS3实现文字扫光效果
2017-03-20 本文已影响0人
assassian_zj
因为前几天项目需要做一个h5页面(如下图所示)，唯一的难点就在于文字需要有那种被颜色填充的感觉，后面经过在网上查找相关效果，找到了一个类似的效果特意记录一下。
步骤四（视频加载中）.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3实现文字扫光效果</title>
<style>
.bg {
background: #000;
width: 1000px;
height: 300px;
margin: 0 auto;
padding-top: 100px;
}
.slideShine {
width: 1000px;
font-family: "Microsoft YaHei";
font-size: 60px;
text-align: center;
background: #111 -webkit-linear-gradient(left, #111, #F25C65) 0 0 no-repeat;
-webkit-background-size: 80px;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0.1);
-webkit-animation: slideShine 3s infinite;
}
@-webkit-keyframes slideShine {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 100%;
}
}
</style>
</head>
<body>
<div class="bg">
<p class="slideShine">Welcome to xinpureZhu Blog</p>
</div>
</body>
</html>
点击效果图.png
还有一点就是当初设计的时候是点击手指图标，就播放视频然后隐藏掉这些图片,由于是在微信里面使用video标签还是有点坑。
直接写video标签然后添加上视频链接的话，视频是全屏显示播放的并且带有视频自带的退出键和一系列的原始播放按钮，这点和需求上要求不同(需求是只能显示微信的back键来退出播放视频，其他的按钮一律不显示)，经过在网上搜索，最终完成了这一效果，代码如下:
<video src="../../..//ishuowww/Tpl/Public/images/video/video.mp4" id="video"
width="100%"
height="240px" /*如果有封面，请设置高度*/
controls /*这个属性规定浏览器为该视频提供播放控件*/
style="object-fit:fill" /*加这个style会让 Android / web 的视频在微信里的视频全屏，如果是在手机上预览，会让视频的封面同视频一样大小*/
webkit-playsinline="true" /*这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/
x-webkit-airplay="true" /*这个属性还不知道作用*/
playsinline="true" /*IOS微信浏览器支持小窗内播放*/
x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/
x5-video-orientation="h5" /*播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏*/
x5-video-player-fullscreen="true" /*全屏设置，设置为 true 是防止横屏*/
preload="auto" /*这个属性规定页面加载完成后载入视频*/
>
your browser does not support the video tag
</video>
同时通过video标签自带的play和pause方法来控制视频的播放与暂停。
