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

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

又一个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 领红包,领到大红包的小伙伴赶紧使用哦! 支持你我,扫一扫红包

可以缩放的侧边栏

mainWrp { padding: 10px; background-color: lightcyan; z-index: 2; transition: transform 1s cubic-bezier(0.215, 0.610, 0.355, 1) } .shrik { transform: scale3d(.8) translateX(70%) } nav { position: fixed;

滚动时的渐显渐隐标题

} #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%) } .

2018年网络开发者应该关注什么

以使CSS变量成为全局范围。然后,在按钮样式的上下文中使用该变量。 :root { --button-bg-color: #FF00FF; display: inline-block; height: 24px; } 可以选择Element然后getComputedStyle使用元素调用获取用于使用JavaScript 设置样式的变量的值- 将变量名称作为String传递给getPropertyValue方法。 let element = document.querySelector('.getPropertyValue("--button-bg-color") // returns #FF00FF

注解

} 使用注解 如果使用的那个注解有注解属性,那么使用的时候就要为这些注解属性赋值。 @MyAnnotation02(anno = @MyAnnotation01, clazz = TestAnno03.class, color = Color.GREEN, str = "qwe", value = { "asd" }) public class TestAnno03 { @MyAnnotation03(value = "qwe") public String name = "张三"; 获取fn1方法上的MyAnnotation01注解的对象 Class clazz = Class.forName("com.itheima.annotation.meta.TestAnno03"); System.out.println(annotation);

Web移动端兼容问题

/* flex-wrap: nowrap */ ios: 父元素display: flex子元素绝对定位后,父元素的align-items:center会失效 -webkit-appearance: none;5s。animation: pop-right 3s ./bg.jpg') 0 no-repeat/cover 不支持这种写法,cover跟在no-repeat后面 js 解决移动端键盘弹起遮住输入框的问题 window.addEventListener("resize", function () { if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") { document.activeElement.scrollIntoView();

为简书Markdown文字添加颜色

为简书Markdown文字添加颜色 简书的markdown非常好用, , 简书Markdown编辑器默认使用黑色的文字, 然而, 世界本就是的, 为文字上色也是一项必不可少的技能(此技能在简书手机app观看

React 中合并单元格的正确写法

React 中合并单元格的正确写法 用表格进行页面布局,页面布局在各种浏览器的的兼容性, 都非常好, 而在react中使用表格布局, 合并单元格的写法比较特殊, 博主查了很久才找到正确的写法, 在这里分享一下 效果图 源码 react组件文件 import React, { Component } from 'react';/App.css';App { text-align: center; } td { border: 1px solid #AB3319; width: 30px;title { color: #444444; font-size: 20px; border-collapse: collapse;

授之以渔-运维平台发布模块三(Jenkins篇)

svn -t rpm -n $JOB_NAME -v $BUILD_NUMBER --prefix %s -C /var/lib/jenkins/workspace/$JOB_NAME -p /home/release/$JOB_NAME .update(svn_next_no = J.get_job_info(job)['nextBuildNumber']) else: pass """构建项目""" J.build_job("%s"Hb) """进入监测版本号变更循环""" while True: try: """如当前构建版本号等于下次构建版本号,跳出循环""" time.sleep(5) if int(J.get_job_info(job)['lastSuccessfulBuild']['number']) == int(Svn.objects.get(svn_name=job).

vscode之必备插件推荐

vscode之必备插件推荐 工欲善其事,必先利其器 Auto Close Tag 自动闭合标签 Auto Rename Tag 自动完成另一侧标签的同步修改 Path Intellisense 自动提示文件路径,支持快速引入文件 Open HTML in Default Browser 右键:在浏览器中打开 Live Server vscode不是IDE

PHP header头状态

// 重定向,其实就是302 暂时重定向 header('Location: http://www.maiyoule.com/'); header('WWW-Authenticate: Basic realm="登录信息"'); // 设置内容长度 header('Content-Length: 39344'); readfile('example.zip');//读取文件到客户端 //禁用页面缓存 header('Cache-Control: no-cache, no-store, max-age=0, must-revalidate'); header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); //设置页面头信息 header('Content-Type: text/html; charset=iso-8859-1'); charset=utf-8');

Solr集成IKAnalyzer中文分词器

Solr集成IKAnalyzer中文分词器 前言 官网:https://code.google.com/archi... IK Analyzer 2012 FF版本 (即For 4.0),在API和功能上保持不变,只是让其支持了Lucene4.0和Solr4.0,让这部分的用户能用起来。 如果你还是Lucene3.2-3.6的用户,那么你只需要下载IK Analyzer 2012 U6版本。因为FF版本的API与3.) IKAnalyzer2012.jar(主 jar 包) IKAnalyzer.cfg.xml(分词器扩展配置文件) stopword.dic(停止词典) LICENSE.TXT ;

使用flex布局构建一个iphone容器---基于react,styled-components

import { Container, TopContainer, CameraPhoneWrapper, HeaderWrapper, LightSensor, CameraFront, HeadPhone, HeadPhoneSpace, HeaderBottomSpace, StatusBar, SignalWrapper, SignalDot, LTEWrapper, BatteryWrapper, BatteryHead, BatteryBody, BatteryPercentWrapper, ContentWrapper, BottomWrapper, TouchButton } from '. export default (props) = { return ( 4G 66% {props.children} ); } 样式 import styled from 'styled-components'; flex-grow:1;

CSS画心形、蛋形、菱形、八卦、三角、圆形、对话框、平行四边形

CSS画心形、蛋形、菱形、八卦、三角、圆形、对话框、平行四边形 各图形的html代码均为 ,替换class名称即可 圆形 .circle { width: 100px; height: 100px; border: 1px solid #ccc; border-radius: 50%; background: coral; } 蛋形 .egg { width: 126px; height: 180px; background-color: #eee; box-shadow: 0px 2px 5px #ccc; display: block; border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; } 心形 .heart { width: 100px; height: 90px; position: relative; } .heart:

简单了解 VBO,FBO

glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), 0);) RBO (Render Buffer Object) RBO 是一块2D图像缓存,能够用于存储color,depth,stencil值,也就是可以作为 fbo的color或depth或stencil attachment。但是这个rbo不能直接作为纹理使用。 http://blog.csdn.net/ldpxxx/article/details/17304273 renderbufferStorage 关联屏幕渲染, 缓冲区中最后显示在屏幕[_context presentRenderbuffer: GL_RENDERBUFFER ]; 参考: VBO FBO PBO

记录一下我的小程序公共样式

记录一下我的小程序公共样式 基于 mpvue 如果需要原生,px转为rpx,可以自己转换 App.vue 样式 /* 全局样式*/ page { background-color: #fff; height: 1px;button { position: relative;ml10 { margin-left: 10px;mb15 { margin-bottom: 15px;bk { word-wrap: break-word;vh { visibility: hidden; content: ""; white-space: nowrap;middle { display: inline-block; transition: all 250ms; cursor: default; pointer-events: none; flex-wrap: wrap; flex-direction: column;