-
CSS3中文字镂空、透明值、阴影效果设置示例小结
所属栏目：[系统] 日期：2020-03-17 来源：DaWei
text-fill-color打造镂空文字： 代码 CSS Code复制内容到剪贴板 -webkit-text-fill-color:transparent; -webkit-text-stroke:1px#000; 效果 text-stroke-color透明值让文字更柔和： 代码 CSS Code复制内容到剪贴板 background-image:-webkit-linear-gradie[详细]
-
CSS制作三角形广告引导文字效果
所属栏目：[系统] 日期：2020-03-17 来源：DaWei
副标题#e# 街上经常碰到一些发各类广告传单的，有一次收到一张房地产广告的传单，顺手留下来，看着里面有些广告挺吸引人，同时也想练练自己css技术，故抽空做了一下。 原图某区域如下： 实现上图效果是需要一些想象力的，比如三角形的构成和左右两边的空白[详细]
-
css3学习之2D转换功能详解
所属栏目：[系统] 日期：2020-03-17 来源：DaWei
CSS3提供了2D转换功能，能够对元素进行移动、缩放和转动等功能。 2D转换的属性名为transform，使用方法为transform:method(value)。 2D转换方法有translate、scale、rotate、skew、matrix，还有基于这些分支出的translateX、scaleY等。 这里，我将会介绍到[详细]
-
CSS样式中大于号的使用及Css中处理继承方法
所属栏目：[系统] 日期：2020-03-17 来源：DaWei
继承在一定程度上让程序在编写的过程中更加方便，但是有时候也会给我们的程序带来一定的困扰，所以认真的学习继承的原理，以及处理的方法很重要。下面是Css中处理继承的一个方法。 在一段CSS代码中见到一个大于号()，代码如下： BODY#css-zen-garden DIV#e[详细]
-
深入理解CSS系列之flex兼容
所属栏目：[系统] 日期：2020-03-17 来源：DaWei
Flex 布局教程想了解的可以自己去看看这篇博文，或者自己百度，这里先部多做介绍，我们主要来说一说flex布局的兼容性问题。 why? 大家可能想问了，flex布局为什么会存在兼容性问题啊？ 之所以存在兼容性问题，是因为技术在不断的更新，有些旧的浏览器只支[详细]
-
深入理解CSS行高line-height与文本垂直居中的原理
所属栏目：[系统] 日期：2020-03-17 来源：DaWei
前言 在CSS中，line-height 属性设置两段段文本之间的距离，也就是行高，如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了，比如下面的例子： 复制代码 代码如下: !DOCTYPE html html lang="en" head meta charset="UTF-8" tit[详细]
-
CSS实现鼠标滑过鼠标点击代码写法
所属栏目：[系统] 日期：2020-03-17 来源：DaWei
鼠标滑过元素，使得元素的样式发生改变 我们定义一个按钮标签 复制代码 代码如下: buttonBUTTON/button 我们首先设置按钮的背景颜色为灰色： 复制代码 代码如下: .px-button{ background-color: grey; } 我们要使得鼠标滑过按钮的时候，让其变为蓝色，我们[详细]
-
10个CSS简写/优化技巧整理
所属栏目：[系统] 日期：2020-03-17 来源：DaWei
CSS简写就是指将多行的CSS属性简写成一行，又称为CSS代码优化或CSS缩写。CSS 简写的最大好处就是能够显著减少CSS文件的大小，优化网站整体性能，更加容易阅读。 下面介绍常见的CSS简写规则： 一、盒子大小 这里主要用于两个属性：margin和padding，我们以m[详细]
-
详解CSS中的display:flex
所属栏目：[系统] 日期：2020-03-17 来源：DaWei
Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 flex： 将对象作为弹性伸缩盒显示 inline-flex：将对象作为内联块级弹性伸缩盒显示 flex示例代码 !DOCTYPE htmlhtml lang=enheadmeta chars[详细]
-
详解css常用选择器
所属栏目：[系统] 日期：2020-03-17 来源：DaWei
导入外部css样式表的方法 使用link标签导入外部css样式表 link rel=stylesheet href=http://www.jb51.net/css/css/demo01.css 在样式表中import(导入)外部样式表 @import url(/crazy-html5/06css/css/demo01.css); 使用内部样式表 内部样式表只能作用于某[详细]
-
利用纯CSS实现动态的文字效果实例
所属栏目：[系统] 日期：2020-03-17 来源：DaWei
大家可能经常会看到类似酷炫的网站： 在这类网站中能看到，一打开页面，无论是文字还是图片，都随着规定时间的而变化。原理很简单，主要用到CSS中animation属性。 接下来，我以我目前的工程项目为例，实现文字和图片的动画效果。（效果如上图GIF） HTML代[详细]
-
使用css3绘制出各种几何图形
所属栏目：[系统] 日期：2020-03-17 来源：DaWei
副标题#e# 1、圆形 示例: 思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.代码如下： html: 复制代码 代码如下: div/div css: 复制代码 代码如下: .size{ width:200px; height: 200px; background: #8BC34A; } .example1{[详细]
-
CSS性能优化提高css性能的方法
所属栏目：[系统] 日期：2020-03-17 来源：DaWei
不规范的css会导致很多性能问题，这些问题可能在一些小的项目中不够明显，但是在大型项目中就会显现出来。 css匹配原理 在优化css之前我们需要了解下css是怎么进行工作的，我们都知道css是由选择器，属性和属性值构成的。 我们可能会这样写上一行代码 CSS[详细]
-
CSS实现文字高光水波渐变的动态效果实例
所属栏目：[系统] 日期：2020-03-17 来源：DaWei
先来看看静态的效果图，动态效果更好 实例代码 复制代码 代码如下: !DOCTYPE html html lang="en" head meta charset="UTF-8" titlerollcat/title style type="text/css" *{ margin: 0;padding: 0; } body{ background: #333;font-family: "Helvetica Neue[详细]
-
纯CSS3代码实现switch滑动开关按钮效果
所属栏目：[系统] 日期：2020-03-17 来源：DaWei
副标题#e# XML/HTML Code复制内容到剪贴板 divclass=container divclass=bg_con inputid=checked_1type=checkboxclass=switch/ labelfor=checked_1/label /div /div css代码，:before负责颜色，:after是那个白色小圆点，切换时的过渡效果用css3的动画实现。[详细]
-
DIV点击折叠实例代码
所属栏目：[系统] 日期：2020-03-17 来源：DaWei
副标题#e# 废话不多说了，关键代码如下所示： CSS Code复制内容到剪贴板 !doctypehtml html head metacharset=utf-8 metacontent=width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0name=viewport title测试/title styletype=text/cs[详细]
-
CSS兼容问题之HACK技术
所属栏目：[系统] 日期：2020-03-16 来源：DaWei
CSS Hack原理是通过不同浏览器自身所带有的特别标识符以及CSS中优先级的机制来实现不同浏览器里CSS样式兼容性的问题。 针对不同的浏览器写不同的CSS的过程，这就叫CSS hack，也叫写CSS hack，相信您会对一些比较不易解决的兼容问题有一定的兴趣。 注意点：[详细]
-
浅谈css之属性及剩余的选择符
所属栏目：[系统] 日期：2020-03-16 来源：DaWei
副标题#e# 今天的课程加速了，比平时快了些，但觉得很不错。nice~ 属性选择符 E[att] 选择具有att属性的E元素。 XML/HTML Code复制内容到剪贴板 input[type]{color:#red;}inputtype=radio E[att=val] 选择具有att属性且属性值等于val的E元素。 XML/HTML Cod[详细]
-
必须掌握10个非常不错的CSS技巧
所属栏目：[系统] 日期：2020-03-16 来源：DaWei
在这里，巧妙的运用CSS的技巧，可以让你不用修改HTML就能得到很好的博客或者模板外观。我收集了一些非常有用的CSS技巧让我们设计博客时更炫更酷。 设计模版和博客主题时，我经常不断推敲和尝试CSS（Hit and Trial CSS ），我只看哪种配色方案和哪种CSS属性[详细]
-
10个非常实用的CSS hack技术
所属栏目：[系统] 日期：2020-03-16 来源：DaWei
副标题#e# 好吧，既然你看了这篇文章，那么我猜你了解CSS并且知道它能为你做什么。但是一些很有用的技术对很多开发人员来说仍然比较隐秘，所以本文中，让我们看看10个肯定能提高你设计的CSS技术吧 1 跨浏览器的inline-block CSS Code复制内容到剪贴板 style[详细]
-
20个非常实用的CSS技巧
所属栏目：[系统] 日期：2020-03-16 来源：DaWei
副标题#e# 这段代码会让你的彩色照片显示为黑白照片，是不是很酷？ CSS Code复制内容到剪贴板 img.desaturate{ filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(1[详细]
-
CSS3解决移动页面上点击链接触发色块的问题
所属栏目：[系统] 日期：2020-03-16 来源：DaWei
副标题#e# 前段时间做微信页面的时候，一行内容做了2个链接，点击一个标签的时候，整个颜色块会闪一下，影响美观。需求针对这种情况来问我，能否把这个一闪的颜色去掉。我当时就想，这个怎么去？那我也不好直接回绝她，好吧，我试试吧！经过研究，百度的很[详细]
-
深入解读CSS3中transform变换模型的渲染
所属栏目：[系统] 日期：2020-03-16 来源：DaWei
副标题#e# transform是通过一系列矩阵变换完成的，scale等transform-function都是对matrix的封装。 w3里的解释是，transform基于可视化格式模型（visual formatting model，这样翻译对不对啊）并为其绘制出一个坐标系，而且所有在这个坐标系内进行的操作，[详细]
-
CSS中的line-height行高属性学习教程
所属栏目：[系统] 日期：2020-03-16 来源：DaWei
副标题#e# 基本概念 1.行高、行距 行高是指文本行基线间的垂直距离。那什么是基线呢？记不记得vertical-align属性有个baseline值，这个baseline就是基线。看张盗图（选自下面的参考文章），其实我也修改了一下啦~ 注意：倒数第二根是基线哦，最下面那根是底[详细]
-
CSS3轻松实现清新 Loading 效果的简单实例
所属栏目：[系统] 日期：2020-03-16 来源：DaWei
至今HTML5中国已经为大家分享过几百种基于CSS3的Loading加载动画，效果酷炫代码简洁，非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例。 第一种效果： HTML部分 XML/HTML Code复制内容到剪贴板 divclass=loading span/span span/span s[详细]
浙公网安备 33038102330484号