今天学习了一些css的基本语法和选择器。w3c里有这些知识点都有,我在这就不再强调知识点了。我主要分享自己做的demo和做demo中遇到的坑。
先扔个今天做好的demo
贴上代码
<!doctype html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><style>.bottom{font-family:书体坊米芾体,Algerian;font-size:15px;color:white;position:absolute;/*定义元素为绝对定位*/bottom:0;/*设置文字据底部位置*/right:auto;}body{margin:0;/*清除外边距*/padding:0;/*清除外边框*/min-height:100%;min-width:100%;}video{margin:0;min-height:100%;min-width:100%;/*保持视频比例*/position:fixed;right:0;bottom:0;width:auto;height:auto;z-index:-100;/*设置视频在最底层*/}#center{text-shadow:10px10px30pxwhite;/*设置文字阴影*/font-weight:bold;font-size:50px;text-align:center;color:white;margin-top:300px;font-style:normal;}</style><title>第二天</title></head><body><videosrc="love.mp4"loop="loop"autoplay="autoplay"muted></video><!--一定要使用muted,否则可能视频无法播放--><pid="center"onmousedown="change()">hello world</p><!--设置鼠标点击引用函数--><pclass="bottom">2019.5.26 第二天</p></body><script>functionchange(){document.getElementById("center").innerHTML="我喜欢你";/*获取地址并改变地址元素*/}</script></html>
在设置视频背景要注意的点
设置外边距和边框为0
设置视频的min-weight和min-height为100%
插入video标签注意设置autoplay自动播放和muted静音(muted不设置视频会无法播放,为这个坑花了好多时间)
另外在制作视频背景时也苦于找不到素材,在这里贴上免费素材的网站。
如果有想要自己做一个的同学,也可以下载我的视频,进入我的demo右键视频另存为就好了。
还有粘贴今日的前端学院学习教程
结束!!!!!
另外JavaScript真的有趣!
编辑于 2019-05-26