CSS3
静水流深之鑫
I AM ON THE WAY! 好好学习,天天向上!
展开
-
Vue实现类似于word插入表格时选中行列的效果
首先看一下效果:实现的思路:先设置一个容器的,容器中放上10×10的小格子,同时监听容器的进入和离开方法。每个小格子上设置鼠标进入的方法,同时传入当前的序号,计算出当前的行和列,改变背景颜色。监听容器的是从那个位置进入,只有从左边和上边进入有效。相关的核心代码:判断鼠标移入元素的方向——上下左右,核心代码:var direction = Math.round((((Math...原创 2019-09-28 18:42:21 · 1789 阅读 · 3 评论 -
CSS3实现侧边栏快速定位的隐藏和消失
Dome<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS3隐藏悬浮网站左侧标签式导航栏代码 </title>原创 2018-12-03 23:13:17 · 3620 阅读 · 0 评论 -
Animation.css学习笔记
animation.css是一款非常炫酷、有趣、跨浏览器的预设css3动画库,便于你在项目中引用。安装npm install animate.css --save 或者 yarn add animate.css 或者直接下载使用在项目中引用<head> <link rel="stylesheet&quot原创 2018-12-08 18:07:38 · 953 阅读 · 0 评论 -
CSS布局解决方案(终结版)
前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局。居中布局水平居中1)使用inline-block+text-align(1)原理、用法原理:先将子框由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中。用法:对子框设置displ转载 2018-04-22 20:21:55 · 188 阅读 · 0 评论 -
详解 CSS 居中布局技巧
水平居中元素方式一:CSS3 transform.parent { position:relative;}.child { position:absolute; left:50%: transform: translateX(-50%);}原创 2018-04-22 20:09:29 · 316 阅读 · 0 评论 -
display:none和visibility:hidden的区别
display:none和visibility:hidden的区别1.空间占据2.回流和渲染3.株连性一、空间占据display:none 隐藏后的元素不占据任何空间,而 visibility:hidden 隐藏的元素空间依旧存在。二、回流和渲染display:none 隐藏产生回流和重绘(reflow 和 repaint),而 visibility:hidden 只产生重绘。三、株连性displ...原创 2018-04-22 17:38:33 · 269 阅读 · 0 评论 -
解决Button 按钮的点击时候出现边框的问题
CSS控制Button 按钮的点击时候出现蓝色边框添加css属性,这样在点击安按钮的时候就不会有蓝色边框了 button{ outline:none; } 实对于button的outline设置需要这样来设置,才能达到所有浏览器一样的风格效果:focus {outline:none;} /*for IE*/::-moz-focus-inner {border-color: tra原创 2017-12-08 16:05:45 · 25770 阅读 · 3 评论 -
用javascript实现sliding door 的效果
index.html代码 sliding doors css样式表代码#container{ height: 477px; margin: 0 auto; borde原创 2016-03-19 20:20:39 · 457 阅读 · 0 评论 -
立体线框球型旋转的实现
body{ background-color: #000; } .ball-box{ width: 300px; height: 300px; position: absolute; left: 50%; top: 50%;原创 2016-01-08 11:36:26 · 1084 阅读 · 0 评论 -
CSS3 实现导航菜单的 3D 翻转动画效果
3D反转动画的的实现 .nav{ width: 980px; height: 100px; margin: 50px auto; background-color: #fdfdfd; border: 1px #ccc solid; }原创 2016-01-07 19:47:03 · 1340 阅读 · 0 评论