大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

css实现边框动画

css实现边框动画 1、css实现边框动画 效果如图: body,div{ margin: 0; padding: 0; box-sizing: border-box; } .box{ width: 300px; height: 200px; padding: 20px; margin: 50px auto; color: #fff; background-color: #f60; } .border-box{ position: relative; width: 100%; height: 100%; padding: 20px; } .border-box::before

表格单元格内的两端对齐

表格单元格内的两端对齐 前端入坑纪 49 许久未更,最近做了个表格。碰到了两端对齐的坑(以前看到过,后来忘了。果然好记性不如烂笔头),今天来分享下~ 好,详解如下! OK,first things first! github项目地址 性冷淡表格 HTML 结构 姓名 休泽 职业 修业 就是这么简单的一个表格,这里的span是整个效果的灵魂,mark CSS 结构 table { width: 300px; height: 30px; display: inline-block;

用Vue.js写一个 自适应_等比缩放_无缝切换轮播

imgsWrp { display:flex; background-position:center center } 这次轮播li里不是直接套图片img了,使用了我之前《自适应缩放图文列表》同样的原理,所有的图片都是设置div.imgsInner的背景。然后,用padding撑开div.imgsInner。ul里的li,使用的flex布局就不多赘述了,相关的文章资料好大一坨呢! JavaScript 结构 var vm = new Vue({ el: "#app", data: { imgsArray: [], lens:0 }, beforeCreate:function(){ axios.get('imgslist.json') .

又一个css3 loading 打转的圆

又一个css3 loading 打转的圆 前端入坑纪 52 上回写过一篇《一直打转的圆圈》的css3 loading 效果,用的是障眼法. 今天来分享真正的环形圆圈来做, 其实是border啦,哈哈 好,详解如下! OK,first things first! github项目地址 你就是个圆 HTML 结构 就是只用一个div, 任性不, O(∩_∩)O哈哈~ CSS 结构 body{ background-color: aliceblue;circle{ border: 8px solid rgba(218, 141, 218, 0.5); width: 100%; left: -8px;

让渐变成为滚动的进度条吧

bar{ height: 30px; infinite 可以让动画一直循环不停。 这里的 widtheft 2s linear infinite,仅仅是展示效果,请略过 3.@keyframes backgroundPosition 这个是条纹动起来的原理,简单说,便是背景的x轴上的位置,从0px走到60px。 好了,到此,本文告一段落!感谢您的阅读!祝你身体健康,阖家幸福! 打开支付宝首页搜 625097528 领红包,领到大红包的小伙伴赶紧使用哦! 支持你我,扫一扫红包

css3 飘雪的日子

css3 飘雪的日子 前端入坑纪 54 用bing搜索的时候,看到它的雪花效果,那就地仿照一个咯~ 好,详解如下! OK,first things first! github项目地址 圣诞临近啦 HTML 结构 这么多class为snow的div,都是为了设置雪花背景和动画用的 CSS 结构 body{ background-color:black;snowWrp{ position: fixed; height: 100%;snow1 { animation-delay:10s;snow2 { animation-delay:20s; } @keyframes falling{ 0%{ top:-100%;

滚动时的渐显渐隐标题

} #titWrp { background-color: rgba(255, 255, 255, 0); } 对标题设置背景,后续都是操作这个背景的透明度 JavaScript 结构 var tit = document.querySelector('#titWrp') var doc = document.body || document.documentElement // 当滚动时,用节流函数来间隔时间段触发绑定的函数操作 window.addEventListener("scroll", _.throttle(function () { // 仅在小于100时,也就是滚动值100以内才执行对应的操作 if(doc.scrollTop 100){ var num = doc.scrollTop;

tab滑动切换内容效果

tab滑动切换内容效果 前端入坑纪 57 今天来分享个曾见到过的tab效果! 好,详解如下! OK,first things first! 点我查看实际效果 简约界面 HTML 结构 a1 a2 a3 a4 a5 a6 a7 a1_Content a2_Content a3_Content a4_Content a5_Content a6_Content a7_Content 所有滚动效果的div都外部嵌套两层div,最外层为屏幕的宽度,次外层为包裹所有内部div一起平铺开来的宽度 CSS 结构 html

环绕按钮动画———原生javascript手作

环绕按钮动画———原生javascript手作 前端入坑纪 58 今天来分享昨天和小伙伴聊到的一个效果 好,详解如下! OK,first things first! 点我查看实际效果 集齐7颗召唤神龙吧,骚年 HTML 结构 B1 B2 B3 B4 B5 B6 B7 ROT 所有的按钮都是包裹在div.roller 里,div.roller 的底色与底部条颜色相同,以制造凸的效果 CSS 结构 html, body { margin: 0; z-index: 99; transform: translateX(-50%) } .

给我一首诗的时间

给我一首诗的时间 前端入坑纪 59 今天来分享最简单版打字机效果 好,详解如下! OK,first things first! 点我查看实际效果 诗仙,你好 HTML 结构 通过canvas里面来模拟打字的效果,所以一个canvas容器是必须的 CSS 结构 html,body { margin: 0; font-size: 0; j = 0 } }else{ clearInterval(tik) } }, 170);

论省略号...的4种写法

line-height: 20px;prg2 { display: -webkit-box;prg3的省略号,是目前比较合理的。javascript的方式,灵活简便,唯独增加了些许js的代码量。毕竟不是使用的css属性。 JavaScript 结构 // 立即执行函数,将shortLine函数挂到window上,这样就可以直接调用了 (function (w) { var shortLine = function (pragrafsClass, number) { // 获取需要展现省略号的那些段落的class元素 var prgs = document.getElementsByClassName(pragrafsClass);

【Vue17】单页应用和多页应用

【Vue17】单页应用和多页应用 多页应用 每一次页面跳转的时候,后台服务器都会给返回一个新的html文档

CSS3动画实现

CSS3动画实现 1. transform 通过transform转换,我们能够对元素进行移动(translate)、旋转(rotate)、伸缩(scale)、翻转(skew)。转换是使元素改变形状、尺寸和位置的一种效果。 浏览器支持 Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。Chrome 和 Safari 需要前缀 -webkit-。 注释:Internet Explorer 9 需要前缀 -ms-。 1.1 2D 转换 2D转换方法: translate(); skew()翻转 transform:skewX(45deg);width: 100px;

基于Flask的Markdown编辑器实践

提供接口。其中js代码处注意宽度设置与Bootstrap4的body相冲突,这里我们注释掉width字段,否则将无法直接提取html。如果是继承模板,引入js较多时,可以在js的顺序上优先保证editor.MD,上下文在最后继承 new_post.html: $(function () { editormd("fancy-editormd", { // width: "100%", 请不要添加 height: 640, syncScrolling: "single", path: "{{ url_for('static',filename='editormd/lib/') }}", saveHTMLToTextarea : true });

android基于socket.io实时通讯项目搭建

android基于socket.io实时通讯项目搭建 项目简介 image github: https://github.com/cn-ljb/android_im_socket.io 基于socket.io实现的Android IM 实时通讯开源项目 服务端代码见 - service demo 架构 kotlin + mvp + socket.io + okhttp + retrofit + rxjava + glide + eventbus 导入项目 修改 Constant.SOCKET_HOST 为你本地服务器端IP和端口(服务器端代码service demo) const val SOCKET_HOST = "http://172.16.201.33:9090" //loc ip and port 或者直接扫码

【 Spring Boot 开发实战】10 分钟快速构建一个自己的技术文章博客

【 Spring Boot 开发实战】10 分钟快速构建一个自己的技术文章博客 【 Spring Boot 开发实战】10 分钟快速构建一个自己的技术文章博客 1.图形界面效果 image.png image.png image.png 2.工程源代码 image.png https://github.com/KotlinSpringBoot/saber 3.数据库结构 package com.light.saber.model import com.fasterxml.jackson.annotation.JsonFormat import java.util.* import javax.persistence.* @Entity class Knowledge { @Id @GeneratedValue(strategy = Gene

移动端开发就不需要学习CSS了?

item { float: left; border-top: 1px solid #fff; } 实现效果: flex上下划分效果 中间那条竖空白间隙错位了,为什么?按照预期我们上面块左侧宽度66.6%,下面块左侧宽度33.3% + 33.3%,两个宽度应该相等才对。 然而我们忽略了flex一个重要特性,子元素会自动占满父元素剩余空间,这时子元素宽度计算受flex控制,下面块的3个子元素宽度计算并非一定是相等的,会有些许差异,此时66.6% !

Android屏幕适配前先了解这些

getMetrics(displayMetrics); density = dpi / 160; 控件高度为103dp 高度/屏幕高度 = 0.19375. 适配后:0.16125. 小米4: 分辨率为 1080 x 1920 .