css
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 · 982 阅读 · 1 评论 -
CSS学习案例(16):网易云音乐导航栏
网易云音乐官网点这里原版:自己做的:写的代码还是有些粗糙,细节方面需要提高;原版只要选中块就可以跳转,而自己做的需要选中文字才可以;还有就是我的网易云logo做的并不完美,在下方空白处也能点击到logo。 <div class="container"> <div class="top"> <div class="content"> <div class="logo">原创 2020-12-09 17:51:48 · 2054 阅读 · 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 · 368 阅读 · 0 评论 -
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 · 335 阅读 · 0 评论 -
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 · 331 阅读 · 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 · 297 阅读 · 0 评论 -
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> <..原创 2020-12-03 19:05:02 · 575 阅读 · 0 评论 -
CSS学习案例(10):动态搜索框
图标:阿里巴巴矢量图标库<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 · 238 阅读 · 0 评论 -
CSS学习案例(9):荧光边框
<div class="box"> <h1>jQuery</h1> <p>click() 方法是当按钮点击事件被触发时会调用一个函数。 该函数在用户点击 HTML 元素时执行。 当点击事件在某个 <p> 元素上触发时,隐藏当前的 <p> 元素:</p> <p>dblclick() .转载 2020-11-30 21:27:06 · 633 阅读 · 0 评论 -
CSS学习案例(8)(二):炫彩流光按钮
<a href="#">Button</a>*{margin: 0;padding:0;}body{ height: 100vh;width: 100vw; display: flex; justify-content: center; align-items: center; background: #000;}a{ padding: 12px 35px; text-decoration: none; fo.转载 2020-11-29 17:40:04 · 924 阅读 · 0 评论 -
CSS学习案例(8)(一):闪亮按钮
<a href="#">闪亮按钮</a> <a href="#">闪亮按钮</a>*{margin: 0;padding:0;}body{ height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; background: #000;}a{ position: r..转载 2020-11-29 16:09:01 · 279 阅读 · 0 评论 -
CSS学习案例(7):聚光灯
图标获取:阿里巴巴矢量图标库 <div class="logo"> <svg t="1606555264232" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="595" width="200" height="200"><path d="M512 1024C229.2224 1024 0 794.7776 0 512 0 .转载 2020-11-28 17:50:08 · 202 阅读 · 0 评论 -
CSS入门案例(6):图形变换
<div class="box"> <p>Elsa</p> <h1></h1> </div> *{margin: 0;padding: 0;} .box{ height: 309.29px;width: 400px; margin: 100px auto; position: relative; ..原创 2020-11-27 19:44:08 · 244 阅读 · 0 评论 -
CSS入门案例(5):垂直手风琴
<div class="box"> <div class="bb" id="b1"> <a href="#b1">标题</a> <span></span> <p> 块级元素<br> 设置display:block就是将元素显示为块级元素 ..原创 2020-11-26 19:34:19 · 412 阅读 · 0 评论 -
CSS入门案例(4):折扇
<div class="box"> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> ..原创 2020-11-25 18:43:57 · 1997 阅读 · 0 评论 -
CSS入门案例(1):实现等待Loading效果
<div class="loadbox"> <p></p> <p></p> <p></p> <p></p> </div> <div class="loadbox"> <p></p> <p></p> &..原创 2020-11-21 20:05:55 · 335 阅读 · 0 评论 -
CSS入门案例(3):太极图旋转
<div class="bigbox"> <div class="bbbox"></div> <div class="bwbox"></div> <div class="sbbox"></div> <div class="swbox"></div> <div class="lbbox"></div&g..原创 2020-11-24 21:12:06 · 306 阅读 · 0 评论 -
CSS入门案例(2):立方体旋转
<div class="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> ..原创 2020-11-23 20:45:35 · 263 阅读 · 2 评论