用:before :after 来写一些小特效】的更多相关文章

提起:before :after首先想到的是 —— 用它来去浮动来我们来换个方式玩接下来展示三种用:before :after来实现的特效 希望能起到抛砖引玉的作用 <一>第一种就是常见的小三角 直接上干货了: //在你想要添加三角的地方加上 .demo:after { content: ""; position: absolute; top: 80%; left: 50%; border-top: .6em solid #5BC0DE; border-left: .6em…
前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 ( 以下效果兼容IE5+ IE5-以下没有测试哦) 今天为大家演示的效果是一个div,鼠标经过的时候透明度为100%,鼠标移出的时候透明度变为原来的50%. 也许大家会问现在这么多流行的JS框架和CSS3的transition配合伪类:hover都可以实现的效果干嘛要用这么老套的方式呢?没错的,现在用CSS3,JS框架都是可以轻松的实现以下的效果,但是为了学习原生的javascript的童鞋,用CSS3和JS框架实现的就留给大…
前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 一:运动特效(主要是通过改变元素的left,right,height,width,opacity来达到运动的效果) 我们今天做一个利用计时器来创建一个匀速运动的效果,代码很简单. 1:首先我们先写出HTML的结构 <div id="div1"> <span id="share">share</span> </div> 2:给出样式 <style…
程序员面试京东前端,现场JS代码写出魔方特效,成功搞定20K月薪 今天小编我逛论坛,看到了一位程序员小伙子,因为是有了两年工作经验,然后去京东面试前端岗,一面二面轻松就过了,到了技术面这一块,小伙干脆就直接用JavaScript写了一个魔方特效,最终通过了面试,试用期12K,转正20K的工资水平,这特效看的小编也服气,主要是脑洞大,所以我也COPY了一份源码,分享给头条上的小伙伴学习. 完成之后的效果图如图所示: 完整源码分享给大家: 想要更多项目源码拿来练练手的可以复制下方群号→ web前端/…
起因 昨晚在做慕课网的十天精通CSS3课程,其中的综合练习是要做一个3D导航翻转的效果.非常高大上. 以往这些效果我都很不屑,觉得网上一大堆这些特效的代码,复制粘贴就好了,够快.但是现实工作中,其实自己写出来,比你网上找代码要快很多,因为你是不会才去找代码粘过来的.那么你就要去看哪些代码需要用,哪些不需要.而如果是自己写的话,哪里漏了什么,再去查,明显快些,如果很熟练,写得就更快了. 这些常见特效真要让我自己写出来,竟然束手无策.坐在电脑前开始怀疑之前学的前面几章节的CSS3包括以往学的CSS3…
以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css&…
以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css&…
前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 今天为大家做的是多个物体的运动效果, 1:HTML <body> <ul>       <li></li>       <li></li>       <li></li>  </ul>  </body> 2:css <style type="text/css">       body,*…
原文网址:http://www.cnblogs.com/wenjiang/p/3140055.html 最近几天真的是各种意义上的忙,忙着考试,还要忙着课程设计,手上又有外包的项目,另一边学校的项目还要搞,自己的东西还在文档阶段,真的是让人想死啊!! 近半个月来,C#这方面的编码比较多,android和java这里完全搁置了,于是抽空写个小例子. 这个例子非常小,就是一个读取android根目录下的文件夹或文件,当做热一下身. @Override public void onCreate(Bun…
在开发移动端项目时,总是遇到很多小三角,之前一直用图片,感觉好麻烦,今天尝试了直接用CSS写出小三角!先看看如何写出各种小三角! /*箭头向上*/ .arrow-up { ; ; border-left:30px solid transparent; border-right:30px solid transparent; border-bottom:30px solid #000; } /*箭头向下*/ .arrow-down { ; ; border-left:30px solid tran…
像VUE一样写微信小程序-深入研究wepy框架 微信小程序自发布到如今已经有半年多的时间了,凭借微信平台的强大影响力,越来越多企业加入小程序开发. 小程序于M页比相比,有以下优势: 1.小程序拥有更多的能力,包括定位.录音.文件.媒体.各种硬件能力等,想象空间更大 2.运行在微信内部,体验更接近APP 3.在过度竞争的互联网行业中,获取一个有效APP用户的成本已经非常高了,小程序相比APP更加轻量.即用即走, 更容易获取用户 开发对比 从开发角度来讲,小程序官方封装了很多常用组件给开发带来很多便…
最近几天真的是各种意义上的忙,忙着考试,还要忙着课程设计,手上又有外包的项目,另一边学校的项目还要搞,自己的东西还在文档阶段,真的是让人想死啊!! 近半个月来,C#这方面的编码比较多,android和java这里完全搁置了,于是抽空写个小例子. 这个例子非常小,就是一个读取android根目录下的文件夹或文件,当做热一下身. @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstan…
原生js写个小时钟 一.代码 今天美化博客园自学的哈,分享一下 <!--标题变成时钟--> <div id="Header1_HeaderTitle"></div> <script> function get_time() { var obj = new Date(); var hour = obj.getHours(); var min = obj.getMinutes(); var seconds = obj.getSeconds()…
很简单的两步: 1.获取网页源代码 2.利用正则表达式提取出图片地址 3.下载 #!/usr/bin/python #coding=utf8 import re # 正则表达式 import urllib # 获取网页源代码 # 用正则表达式写一个小爬虫用于保存贴吧里的所有图片 # 获取网页源代码 def getHtml(url): page = urllib.urlopen(url) # 打开url,返回页面对象 html = page.read() # 读取页面源代码 return html…
在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个三角形,如果想要带边框的三角形,则可以两个重叠使用.代码如下: <div class="box2"> 纯css写带小三角对话框 </div> .box2{ float:left; position:relative; width:200px; height:100p…
几年前写的一个获取windows窗体基本信息和屏幕取色的小工具 ,一直在用. 下载地址 http://files.cnblogs.com/dint/SpyPlus.zip…
一.做个这样的效果,双击图标打开相应的应用 二.主界面类,使用JavaSwing的JDesktopPane类创建这个桌面 package com.swing; import java.awt.BorderLayout; import java.awt.Dimension; import java.awt.Graphics2D; import java.awt.Rectangle; import java.awt.Toolkit; import java.awt.event.MouseAdapte…
本文以 JavaScript 为例,介绍了该如何优化函数,使函数清晰易读,且更加高效稳定. 软件的复杂度一直在持续增长.代码质量对于保证应用的可靠性.易扩展性非常重要. 然而,几乎每一个开发者,包括我自己,在职业生涯中都见过低质量的代码.这东西就是个坑.低质量代码具备以下极具杀伤力的特点: 函数超级长,而且塞满了各种乱七八糟的功能. 函数通常有一些副作用,不仅难以理解,甚至根本没法调试. 含糊的函数.变量命名. 脆弱的代码:一个小的变更,就有可能出乎意料的破坏其他应用组件. 代码覆盖率缺失. 它…
引言:作为一个前端小菜鸟,最近迷上了node,于是乎空闲时间,为了练练手写了一个node的小社区,关于微信小程序的,欢迎大家批评指导. 项目架构部分 一.前端架构 作为一个写样式也得无聊的前端狮,我偷了个懒,直接用了bootstrap框架,由于jQuery封装的ajax极其友好,所以依然是jQuery,而没有选用angular之类的. 二.使用mongodb+node+express+nginx mongodb是菲关系型数据库,它的各种查询语句以及存储数据的方式跟js有点类似,所以对于没有学习过…
应公司文职工作人员需求,写一个车间人员工作时间的统计软件,输入开始工作时间1,再输入结束工作时间2,计算两个时间的差值. 根据需求,初步构想的UI界面如下: 下面开始干活. 分析后觉得利用PyQt4来设置UI PyQt4的安装不表,注意PyQt4的安装目录在\Lib\site-packages\PyQt4 PyQt4的资料请查看\Lib\site-packages\PyQt4\doc\html PyQt4的界面设计.界面设计先利用PyQt4安装目录下的designer.exe,拖拽控件即可.这里…
一.写在前面: .....最近在写一个微信小程序项目,在看完官方微信小程序开发文档后,有一种直接想"放弃"的念头: .....使用微信小程序原生框架可以快速,方便,简洁的搭建项目,同时微信提供了新的一套'语义化'标记语言wxml,以及独立出来的wxss样式表,并且js的交互逻辑支持ES6的语法,包括使用Promise等:除去框架本身之外,小程序还提供了一些常用的组件,包括Picker,slider,canvas,form表单等,能极大的提高开发者的效率,丰富的API完全能满足工作需求,…
添加与新增一些小玩意的1.0.3版本:传送门 各位带哥,这不是你们要的c++.java.c#作业哈 课上要求做个小作业,学生管理考勤系统,原本想着是个练手的好机会,结果只证实了我还是个弟中弟. 设想的功能只写了1/3左右,其余的大多数由于技术未涉及/基础不扎实(闭包问题,其实正好高程三才开始读到闭包)等被删了 原本设想的功能里包括点击“结束考勤”按钮后能把没有变色的按钮的名字收集起来,结果卡死在闭包问题上了. 暂且先上传这一版本,有个想法是等以后学的更深更深一些把这个开发成一个真正的,有后台.有…
  在Android众多工具类app中,Last App Switcher绝对算是一个让人用过就不会卸载的工具.LAS这个应用,它的功能很简单,就是通过一个浮动按钮实现在两个应用之间一键切换,但是非常实用,尤其是在边玩边聊天需要频繁切换应用的时候.所以可以看出,想开发一款受欢迎的应用,一定要注重用户体验,只要用户用的爽,功能再再再简单,它也会受欢迎.那么这功能到底有多简单呢?跟我来实现一下就好了. 本文地址:http://www.cnblogs.com/rossoneri/p/4561057.h…
一.背景: 在很多时候,应急会发现.卧槽,异常连接,只有一个域名或者IP. 怎么办?上防火墙看记录,查域名对应的记录累成狗,自己把之前的代码改了改,写了个小工具,一条命令查询DNS相关记录,也可以指定内网服务器查询. 二.分析思路: 1.首先排查一下流量通信情况,采集远端IP.域名.及其对应的解析记录. 2.国内推荐使用我们360,以及threatbook.还有老东家tianjipartner的的威胁情报源分析是否有关联威胁,如果有采取第一波止损措施,马上下策略隔绝断网.重要的机器可以直接先断了…
学习了一段时间的web前端,感觉有点看不清前进的方向,于是就写了一个小爬虫,爬了51job上前端相关的岗位,看看招聘方对技术方面的需求,再有针对性的学习. 我在此之前接触过Python,也写过一些小脚本,于是决定用Python来完成这个小项目. 首先说说一个爬虫的组成部分: 1.目标连接,就是我需要爬取信息的网页的链接: 2.目标信息,就是网页上我需要抓取的信息: 3.信息梳理,就是对爬取的信息进行整理. 下面我来说说整个爬虫的设计思路: 总体思路:以“前端”关键字进行搜索,把搜索结果上面每一个…
很多人开始学习java时,都是抱着诸如<Thinking in java>.<疯狂java>等书籍,从前到后慢慢翻看,不管其内容重要与否,也不关心自己以后能否使用到.我的建议是,初学者只需要关注基础语法,对一些多线程.网络编程.JDBC等,先放放,心里有个概念就好,知道当我要并发处理任务时要去翻多线程,使用某些网络服务时翻网络编程,需要访问数据库时翻JDBC等,不是说他们不重要,相反,他们非常之重要,只是如果结合具体场景学习的话,事半功倍.具体的语法我就不详细说了,各种参考资料一大…
这个是因为自己被自己蠢哭了动笔的,里面大概记录自己所犯的错,和一些小知识. 1.有一个错误我经常犯:内部定义的字段没对应开放到编辑器的字段.这个是由于我有点依赖ide写代码的习惯导致,而shader的ide只提供了基本的关键字高亮. 纠正方法:对一个字段,一直使用拷贝粘贴的方式进行书写. cg教程给了一个写cg代码的tip: 2.法线没归一化正确,导致效果奇奇怪怪,这个我是在写matcap那里犯的错:漏了这句: o.twoUv.zw = o.twoUv.zw * 0.5 + 0.5;//(-1,…
出于兴趣和学习目的,我想自己做一个基于"子弹笔记(Bullet Journal)"的小程序.由于个人开发经验很有限,只在课程作业中写过 web 前端,所以也不知道多久能写出来(逃).因此想通过博客记录一下开发过程.学习资料.踩过的坑等等. 本系列文章主要计划用于个人学习总结,如果恰好对你有帮助那真是太好了! PS:文中提到的各种平台规则均截至 2021.1.12,如果存在疏漏或后续出现变化敬请在评论区指出! 0 微信小程序 微信小程序是什么想必不需要过多解释.小程序的开发与普通的 we…
有人说前端自动化测试非常困难,我觉得确实如此.在项目中,我个人也不放心写的测试,还是要手动测试.但是我们平时写demo学习时,完全可以使用自动化测试. 传统demo 1,新建一个html 2,写入js脚本 3,运行html 平时写demo,大家伙恐怕都是这个步骤吧,其实我们可以使用karma自动化这个过程. 自动化demo(使用karma) 假设已经安装好karma,如果不会,请看本人的这篇博客 karma单元测试入门 1,在根目录运行 karma init 一路空格选择默认,在What is…
特别补充一句:软件可以一次性复制多个文件的文件名. Windows 中的复制文件名实在是有些不方便 ,需要点右键 "重命名"之后再点右键选择"复制"才可复制文件名.我以前用过一个软件,叫:"复制文件名CopyFilenames",这个小软件就是为解决这个问题而出现的,仅仅点右键选择"复制文件名"就 OK 了,并且可"粘贴文件名""复制文件名并删除",大大简化了我们的常用操作. 截图如下:…