![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
K.Dream
这个作者很懒,什么都没留下…
展开
-
Windows预加载等待动画
Windows预加载等待动画教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<div class="container"> <div class="wrapper"> <div class="loader"> <div class="dot"> </div> </div> <div class="转载 2020-06-15 10:50:37 · 737 阅读 · 0 评论 -
带有3D效果的个性名片
带有3D效果的个性名片教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<div class="card"> <div class="content"> <div class="user"><span class="fas fa-us...转载 2020-03-25 16:02:54 · 536 阅读 · 0 评论 -
CSS3制作带有子菜单的下拉菜单
CSS3制作带有子菜单的下拉菜单教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<nav> <label for="btn" class="button">Drop down <span class="fas fa-caret-down"></sp...翻译 2020-03-25 15:59:46 · 861 阅读 · 0 评论 -
CSS3 Neumorphic社交媒体图标
CSS3 Neumorphic社交媒体图标教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<div class="center"> <div class="icons first"> <li><a href="#"><span clas...转载 2020-03-25 15:58:37 · 551 阅读 · 0 评论 -
带有社交图标的动画共享按钮
带有社交图标的动画共享按钮教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<div class="content"> <div class="text">Animated Share Button with Icon</div> <p>HTML ...转载 2020-03-25 15:57:14 · 326 阅读 · 0 评论 -
事件通信菜单
事件通信菜单教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<!-- https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css --><div class="newsletter"> &l...转载 2020-03-18 15:56:57 · 193 阅读 · 0 评论 -
响应式联系信息
响应式联系信息教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<div class="contact-info"> <div class="card"> <i class="card-icon far fa-envelope"></i> ...转载 2020-03-18 15:52:56 · 217 阅读 · 0 评论 -
jQuery制作扁平化动态技能栏
jQuery制作扁平化动态技能栏教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<div class="skills"> <div class="skill"> <div class="skill-name">HTML</div> &...转载 2020-03-18 15:48:09 · 325 阅读 · 0 评论 -
使用jQuery制作颜色效果选择器
使用jQuery制作颜色效果选择器教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<div class="colors-container"> <div class="color"> <div class="color-hex">#000000</...转载 2020-03-18 15:45:06 · 453 阅读 · 0 评论 -
弹动加载动画
弹动加载动画教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<div class="loading-screen"> <div class="loading-animation"> <img src="logo.png" alt="" class="logo"...转载 2020-03-18 15:40:13 · 358 阅读 · 0 评论 -
使用范围滑块更改页面亮度
使用范围滑块更改页面亮度教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<div class="container"> <div class="brightness-box"> <i class="far fa-sun"></i> &...转载 2020-03-18 15:35:53 · 323 阅读 · 0 评论 -
自定义滚动条
自定义滚动条教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html <section> <h2>百年孤独</h2> <p><!-- 请增加到足够滚动的字体 --> </p> </...转载 2020-03-09 21:25:25 · 497 阅读 · 1 评论 -
登陆界面设计
登陆界面设计教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<div class="bg-img"> <div class="content"> <header>Login Form</header> <!-- 表单 -->...转载 2020-03-09 21:08:52 · 703 阅读 · 0 评论 -
Glide插件的图片轮播图
Glide插件的图片轮播图教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区引入文件码云下载:html<!-- 头文件注意引入次序 --><div class="images glide"> <div class="glide__track" data-glide-el="...转载 2020-03-09 20:35:06 · 1353 阅读 · 1 评论 -
使用HTML和CSS的明信片动画效果
使用HTML和CSS的明信片动画效果教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<div class="wrapper"> <div class="mail"> <div class="cover"></div> <div ...转载 2020-03-06 19:51:50 · 1095 阅读 · 0 评论 -
波纹效果
波纹效果教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<div class="container"> <span class="ripple r1"></span> <span class="ripple r2"></span> ...转载 2020-03-04 20:09:04 · 301 阅读 · 1 评论 -
CSS制作开关
CSS制作开关教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<label> <input type="checkbox" name="" id="one"> <span class="check"></span> <span clas...转载 2020-03-04 20:06:53 · 393 阅读 · 0 评论 -
点击切换显示隐藏输入框
点击切换显示隐藏输入框教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<div class="inputBox"> <input type="password" name='' placeholder="Enter password" id='password'> &l...转载 2020-03-02 21:16:09 · 844 阅读 · 2 评论 -
分布图层悬停效果
分布图层悬停效果教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html <div class="container"> <div class="imgBx"> <img src="img/bg.jpg"> <img src="img/bg.jpg"...转载 2020-03-01 20:12:38 · 280 阅读 · 1 评论 -
响应式菜单
教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ziKUQWDn-1582942429406)(演示.gif)]代码区html<header><div class="inner-width"> <a h...转载 2020-02-29 10:14:08 · 576 阅读 · 0 评论 -
滚动渐变导航栏
滚动渐变导航栏教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<header> <!-- logo --> <a href="#" class="logo">Logo</a> <!-- 导航栏 --> <ul>...转载 2020-02-27 19:43:04 · 1266 阅读 · 2 评论 -
图片文字制作视差效果
图片文字制作视差效果教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html <section> <p> <!-- 请自行添加文章 --> </p> <div id='bg'></div> </secti...转载 2020-02-26 13:58:53 · 325 阅读 · 0 评论 -
css制作悬停效果按钮
css制作悬停效果按钮教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<div class="container"> <button class="btn btn1">Hover Me</button> <button class="btn btn2"...转载 2020-02-26 13:22:03 · 1434 阅读 · 0 评论 -
等待动画效果
等待动画效果教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<div class="loading"> <span>Loading...</span></div>CSSbody{ margin: 0; /* 外边距 */ paddin...转载 2020-02-26 13:13:19 · 608 阅读 · 0 评论 -
jq制作代办事务表单
jq制作代办事务表单教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<div class="container"> <!-- 输入框 --> <input type="text" class="txtb" placeholder="Add a task">...转载 2020-02-23 20:27:26 · 369 阅读 · 0 评论 -
滚动显示阴影文字
滚动显示阴影文字教程地址:原文地址(codepen)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html <div class="reveal"> <span>Reveal</span> </div>CSS@import url("https://fonts.googleapis...原创 2020-02-20 11:23:44 · 255 阅读 · 0 评论 -
展开菜单栏
展开菜单栏教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<div class="menu-container"> <!-- 菜单栏 --> <div class="button"><p>Menu</p> <span ...转载 2020-02-19 18:14:25 · 639 阅读 · 2 评论 -
输入式朝阳文字
输入式朝阳文字教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<div id="text" contenteditable="true">Text</div>CSS* { margin: 0; /* 外边距 */ padding: 0; /* 内边距 */ f...转载 2020-02-18 18:15:41 · 202 阅读 · 1 评论 -
过渡等待动画
过渡等待动画教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<h2> <span>L</span> <span>o</span> <span>a</span> <span>d</spa...转载 2020-02-16 09:13:05 · 201 阅读 · 0 评论 -
使用js实现跟随鼠标移动的心形上浮效果
使用js实现跟随鼠标移动的心形上浮效果教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9zP31qVn-1581731960911)(演示.gif)]代码区html<!-- 模板即可 -->CSS* { margin...转载 2020-02-15 09:59:43 · 1125 阅读 · 0 评论 -
水球加载动画
水球加载动画教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<div class="circle"> <div class="wave"></div></div>CSSbody { margin: 0; /* 外边距 */ paddi...转载 2020-02-13 10:14:11 · 254 阅读 · 0 评论 -
黄色圆形加载动画
黄色圆形加载动画教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<div class="ring"> Loading <span></span></div>CSSbody { margin: 0; /* 外边距 */ paddin...转载 2020-02-13 09:47:27 · 11002 阅读 · 0 评论 -
蛇形方框加载器
蛇形方框加载器教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EbIV5dx1-1581477748976)(演示.gif)]代码区html<div class="square"> <span></spa...转载 2020-02-12 11:22:49 · 184 阅读 · 0 评论 -
背景视频切换
背景视频切换教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vl9jxGdg-1581474957730)(演示.gif)]代码区html<section> <video id='slider' autoplay m...转载 2020-02-12 10:36:20 · 1020 阅读 · 1 评论 -
马赛克属性图片利用图片加载算法属性
马赛克属性图片利用图片加载算法属性教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html<div class="container"> <div class="pixel"> <img src="img/img1.png" > <!-- 清晰 -->...转载 2020-02-11 11:27:40 · 323 阅读 · 0 评论 -
RBG渐变圆形读条
RBG渐变圆形读条教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N6rAsd2K-1581390043706)(演示.gif)]代码区html<div class="outer"> </div><div ...转载 2020-02-11 11:01:18 · 281 阅读 · 0 评论 -
边框加载霓虹灯按钮
边框加载霓虹灯按钮教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图代码区html <a href="#">Button</a> <a href="#">Button</a> <a href="#">Button</a>CSS* {...转载 2020-02-10 11:55:06 · 290 阅读 · 0 评论 -
点赞爱心按钮
点赞爱心按钮教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dNVJEhBd-1581303162565)(演示.gif)]代码区html <!-- 外边框 --> <div class="heart-btn">...转载 2020-02-10 10:52:58 · 1803 阅读 · 0 评论 -
纯CSS制作笑脸评分系统
纯CSS制作笑脸评分系统教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载图片下载地址效果图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6pegrcL4-1581214877022)(演示.gif)]代码区html <div class="rating"> &l...转载 2020-02-09 10:21:34 · 662 阅读 · 0 评论 -
渐出效果的个人主页
渐出效果的个人主页教程地址:原文地址(YouTube)B站教程:原文转载(bilibili)两个视频的内容相同,第二个为转载效果图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JL96S4dk-1581130898993)(演示.gif)]代码区html<div class="wrapper"> <div class="im...转载 2020-02-08 11:14:21 · 215 阅读 · 0 评论