2020年12月_Rengarhunt

转载 CSS与JS学习案例（17）：网易云音乐轮播图

网易云音乐官网点这里原版：自己做的：和原版相比，没有切换图片时的渐隐渐显效果。HTML部分：左右箭头图标：阿里巴巴矢量图标库下方选中的白色圆点使用JS自动添加<div class="container"> <div class="bgbox"></div> <div class="picbox"> <div class="pic"> <d

2020-12-14 14:32:13 975 1

原创 CSS学习案例（16）：网易云音乐导航栏

网易云音乐官网点这里原版：自己做的：写的代码还是有些粗糙，细节方面需要提高；原版只要选中块就可以跳转，而自己做的需要选中文字才可以；还有就是我的网易云logo做的并不完美，在下方空白处也能点击到logo。 <div class="container"> <div class="top"> <div class="content"> <div class="logo">

2020-12-09 17:51:48 2038 2

原创 CSS学习案例（15）：图标展开效果

<div class="container"> <div class="tool"> <span class="iconfont iconxiangji" id="#"></span> <span class="iconfont iconwendang" id="#"></span> <span class="iconfont iconqi..

2020-12-07 22:25:06 361

原创 CSS学习案例（14）：下拉导航菜单

<div class="container"> <nav class="menu"> <ul> <li><a href="#">Home</a></li> <li> <a href="#">About Me</a> ..

2020-12-06 19:47:06 330

原创 CSS学习案例（13）：3D卡图库旋转

<div class="box"> <div style="--i:1"><img src="/img/08E724F95B8A3381E7AF0460B8667CB8.jpg" ></div> <div style="--i:2"><img src="/img/95ACF74AB0E3067CA55FF4D791A2F883.jpg" ></div> <div st..

2020-12-05 19:16:00 323 1

原创 CSS学习案例（12）：3D卡片翻转

<div class="container"> <div class="one"> <div class="contents"> <h1>Else</h1> <span>Queen of Arendelle</span> </div> </div> ..

2020-12-04 19:15:18 289

原创 CSS学习案例（11）：3D堆叠图片ui布局特效

<div class="container"> <div class="food-card"> <div class="pic"> <img src="https://www.17sucai.com/preview/1424582/2020-07-03/dz/img/1.jpg" alt="Pizza"> </div> &lt..

2020-12-03 19:05:02 569

图标：阿里巴巴矢量图标库<div class="search-box"> <input class="serach-txt" type="text" name="" placeholder="Type to search"> <a class="search-btn" href="#"><svg t="1606822073464" class="icon" viewBox="0 0 1024 1024" version="1.1".

2020-12-01 20:42:55 230

Rengarhunt的博客