动手实践，使用div盒子模型设计一个播放器效果/动手实践

题目效果

执行代码

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>动手实践</title><style>*{margin: 0;padding: 0;}.box1{width: 500px;height: 500px;background-image: linear-gradient(to bottom, rgb(79,48,89) 20%, rgb(190,160,198)50%, rgb(126,67,92) 80%);position:relative;}.box2{width: 300px;height: 300px;background-image: linear-gradient(120deg, rgb(126,67,92) 20%, rgb(79,48,89) 80%);position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;border-radius: 10%;}.box3{width: 180px;height: 150px;border: #010101 solid 30px;background-image: linear-gradient(160deg, rgb(246,159,133) 10%, rgb(149,69,84) 60%);position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;border-radius: 10%;}.box4{width: 100px;height: 100px;position:absolute;background-color: white;border:solid 1px white;top:0;left:0;right:0;bottom:0;margin:auto;border-radius: 50%;}.box5{width: 0px;height: 0px;border-left: 25px solid;border-right: none solid;border-bottom: 25px solid transparent ;border-top: 25px solid transparent ;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;}</style>
</head>
<body><div class="box1"><div class="box2"><div class="box3"><div class="box4"><div class="box5"></div></div></div></div></div>
</body>
</html>

最终效果

//欢迎加我VX进群交流
vx账号：-Sep07

动手实践，使用div盒子模型设计一个播放器效果/动手实践相关推荐

用JavaScript在网页编写一个播放器
今天是教师节,我先祝各位老师节日快乐!!! 今天我和大家分享用JavaScript在网页编写一个播放器. 对于播放器,大家都不陌生,那么要怎么样才能实现它呢? 下面是我做的一个播放器的图首先我们从上 ...
使用纯css做一个播放器
首先,贴出成品图,如下: 可以发现播放器的基本形状有了,但是需要精确到每一个方向,不能溢出,就得以如下的方式写,贴出静态代码: html如下: <!DOCTYPE html> <ht ...
使用AVPlayer制作一个播放器
代码地址如下: http://www.demodashi.com/demo/11685.html AVPlayer 是一个强大的视频播放器,可以播放多种格式的视频,缺点是没有控制界面,需要自己去实现. ...
制作一个播放器（二）
制作一个播放器(一) 制作一个播放器(二) 接着上一章的热身,咱们继续写播放器.上一篇中咱们用的是句柄的方式来播放视频.实际开发中,我们更多的是把数据给回调出来,这样更好的去显示视频,处理视频.这期, ...
使用go语言编写一个播放器
使用go语言编写一个播放器,直接看效果整体思路是使用ffmpeg解码,然后使用xui进行渲染,音频播放暂时还没调通,以下是源码 package mainimport ("github.co ...
制作一个播放器（一）
制作一个播放器(一) 制作一个播放器(二) 开发前准备开发平台:windows 开发语言:C++(Qt) 开发工具:Visual Studio 2019 cmake Qt5.15.2 做个小广告 ...
C#——窗体程序声明一个播放器接口IPlayer，包含5个接口方法：播放、停止、暂停、上一首和下一首。
声明一个播放器接口IPlayer,包含5个接口方法:播放.停止.暂停.上一首和下一首.设计一个窗体程序,在该程序中定义一个MP3播放器类和一个AVI播放器类,以实现该接口,最后创建相应类的实例测试程序 ...
声明一个播放器接口IPlayer，包含5个接口方法：播放、停止、暂停、上一首和下一首。
声明一个播放器接口IPlayer,包含5个接口方法:播放.停止.暂停.上一首和下一首.设计一个Windows应用程序,在该程序中定义一个MP3播放器类和一个AVI播放器类,以实现该接口,最后创建相应类 ...
从0开始写一个播放器系列-开篇
从0开始写一个播放器系列-开篇阅读本系列博客所需要具备的知识: js, ts , canvas Api , DOM, webpack, 不懂也没有太大的关系, 我会捎带着写出来, 剩下的自行百度第 ...

动手实践，使用div盒子模型设计一个播放器效果/动手实践

题目效果

执行代码

最终效果

动手实践，使用div盒子模型设计一个播放器效果/动手实践相关推荐

最新文章

热门文章