常见特效
文章平均质量分 78
骆小胖
这个作者很懒,什么都没留下…
展开
-
全兼容的多列均匀布局问题
原创 2018-02-13 21:47:13 · 167 阅读 · 0 评论 -
原生JS实现瀑布流效果
原创 2018-12-23 14:28:39 · 185 阅读 · 0 评论 -
CSS优化单选多选按钮样式(1)
原创 2019-01-11 15:30:03 · 882 阅读 · 0 评论 -
纯CSS实现半圆、1/4圆
<div class="area"></div>.area{ width: 100px; height: 50px; background: red; border-radius: 0px 0px 100px 100px;} 2、上半圆 3、左半圆 4、右半圆 (2)1/4圆 实现原理:border四个方向的值的设定---上右下左原创 2019-01-12 15:49:15 · 7945 阅读 · 0 评论 -
浅谈纯CSS实现二级导航(优缺点与局限性)
ck一样,无法实现过渡。 注意(局限性):高度变化若想出现过渡效果,必须由0变到指定高度,如0-200px等才可以。 【主体(1)height由0变为auto<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS</title&原创 2019-01-15 09:26:57 · 543 阅读 · 1 评论 -
浅谈jQuery实现二级导航(优缺点与局限性)
seover:当鼠标指针位于元素上方时,会发生 mouseover 事件。 mouseenter:当鼠标指针穿过元素时,会发生 mouseenter 事件。 从这里的一个小插曲上,我们应该可以看出,mouseenter是穿过,所以只能触发一次改事件,而mouseover是位于上方,可以想下,如果给div设定了一个mouseover事件,其子孙后代都可以响应改事件,so...一旦鼠标从父级进入自己也会触发这个效果,当从子集回到父级也会触发这种效果。所以,你可以这么理解:mouseenter事件只作用于目原创 2019-01-15 09:50:36 · 377 阅读 · 0 评论 -
浅谈原生JS实现二级导航(优缺点与局限性)
gt; <style type="text/css"> *{ margin: 0; padding: 0; } li{ list-style: none; } a{ text-decoration: none; } .nav{ width: 80%; height: 40px; line-height: 40px; margin: auto; }原创 2019-01-15 11:59:42 · 735 阅读 · 0 评论 -
浅谈获取html元素宽高的两种方式-offsetWidth和width的区别
原创 2019-01-16 10:53:05 · 1170 阅读 · 0 评论 -
CSS优化单选多选按钮样式(2)
css特殊字符表。 这两天学生做项目,将项目里遇到的特效简单讲解下。这里做下备注,课程大纲适当调整。 【主体】 因为特殊字符表在某些低版本浏览器展示容易出现问题,所以这里再介绍一种方案--->伪元素+画长方形+旋转 <!DOCTYPE html><html><head> <meta charset="utf-8"&a原创 2019-01-16 11:35:30 · 795 阅读 · 0 评论 -
纯JS实现点击区域外隐藏元素
PE html><html><head> <meta charset="utf-8"> <title>demo</title> <style type="text/css"> *{ margin: 0; padding: 0; } .a原创 2019-01-23 15:30:11 · 467 阅读 · 0 评论 -
弹性盒模型(1)------Flex布局对子元素影响
原创 2019-01-24 16:40:52 · 2484 阅读 · 0 评论 -
弹性盒模型(2)------Flex容器元素
原创 2019-01-24 17:25:01 · 221 阅读 · 0 评论 -
返回顶部的几种方案
原创 2019-03-02 14:28:23 · 800 阅读 · 0 评论 -
jquery插件——仿新浪微博限制输入字数的textarea
-8" /><title>jquery插件——仿新浪微博限制输入字数的textarea</title><script src="http://apps.bdimg.com/libs/jquery/1.10.1/jquery.min.js"></script><style> *{padding: 0;mar原创 2018-12-19 13:44:40 · 138 阅读 · 0 评论 -
CSS实现文字竖向排版
别的方法吗?这里我简单总结几个别的方法。以后上课重点强调下 【主体】(1)常用方法<div class="one">我是竖列排版</div> <div class="two">I AM ENGLISH</div>.one { width: 20px; margin: 0 auto; line原创 2018-10-31 16:35:55 · 5201 阅读 · 0 评论 -
酷炫的 3D 视角
中的交互体验感觉非常棒,运用在移动端制作一些 H5 页面可谓十分博人眼球。并且掌握原理之后制作起来也并不算废力,好好的研究了一番后将一些学习过程共享给大家。下面进入正文:(一些 Gif 图片较大,需要等待一会) 3D 效果示意百闻不如一见,先直观感受一下上述我所说的效果: 最好能点进去看看,这里我使用了带背景色的 div 作为示例,我们的视角处于一个正方体中,正方体的旋转动画让我们有了 3D 的感觉。那么原本的图长什么样呢?我们把距离拉远,一探究竟: 是长这样的:原创 2018-02-13 21:51:18 · 207 阅读 · 0 评论 -
酷炫的3D旋转透视
原创 2018-02-13 21:41:07 · 258 阅读 · 0 评论 -
伪元素的妙用 - 多列均匀布局及title属性效果
原创 2018-02-13 21:53:34 · 120 阅读 · 0 评论 -
box-shadow 与 filter:drop-shadow 详解及奇技淫巧
。 box-shadow 常规用法说到 box-shadow ,首先想到的必然是它能够生成阴影,所以称之为 shaodow ,简单看看它的语法:基础属性语法box-shadow 属性向框添加一个或多个阴影。box-shadow: h-shadow v-shadow blur spread color inset;像这样 box-shadow: 10px 10px 5px #888888; 除此之外,我们要知道,box-shadow 是分外 shadow 和内 shado原创 2018-02-13 21:45:20 · 396 阅读 · 0 评论 -
伪元素的妙用--单标签之美
原创 2018-02-13 21:46:24 · 177 阅读 · 0 评论 -
【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理
原创 2018-02-13 21:59:37 · 273 阅读 · 1 评论 -
一款有趣的Javascript动画效果
原创 2018-02-13 22:00:44 · 548 阅读 · 0 评论 -
Grid网格布局
原创 2018-03-10 13:45:55 · 87 阅读 · 0 评论 -
input file类型自定义样式-按钮
原创 2018-04-07 11:31:07 · 401 阅读 · 0 评论 -
用Javascript实现回到顶部效果
原创 2018-08-26 23:19:40 · 153 阅读 · 0 评论 -
css修改滚动条默认样式
【主体】 简单的demo,可以尝试下: /*滚动条样式*/ .innerbox::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ b原创 2018-08-29 17:46:30 · 189 阅读 · 0 评论 -
纯JS代码完成表格增删改查
多,这里大概列举几个常见的 (1)获取表单值写到了点击事件外部,导致点击按钮时获取不到表单输入值 解析:如果写到了外部,name获取到的会是初始化页面时的表单值--→即空。所以必须写到点击事件内部才能获取点击时的当前表单值。 (2)实现全选全不选var checkBoxs = document.getElementsByName("del");var status = me.checked;for (var i = 0; i <原创 2018-09-05 16:25:01 · 962 阅读 · 1 评论 -
浅谈锚点跳转优先级
(1)name值 a 标签 name 属性值为 top(可变)<!-- 定义一个名称为top的锚点链接 --><a name="top"></a><!--主体代码--><!--返回页面顶部top锚点的链接--><a href="#top">返回顶部<原创 2019-03-02 15:08:06 · 596 阅读 · 0 评论