- 博客(16)
- 收藏
- 关注
RSS订阅原创 图片的局部放大算法
如下图所示:下面是完整代码，算法的每一步已加注释<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>局部放大</title> <style> * { marg...
2019-11-24 14:35:17
871
原创 原生js实现贪食蛇小游戏
先不多说先上图下面是代码部分（这里你可以根据需要改变蛇头和身体还有食物的图片，然后默认的样式是使用纯颜色的如果没有更改我的背景图片的话------改这些图开始是想搞笑一下朋友哈哈哈，请不要在意哈），还有操作键是使用 ↑ ↓ ← → ）<!DOCTYPE html><html><head lang="en"> <meta charset...
2019-11-23 21:29:19
3427
7
原创 纯CSS制作rate评分
前段时间在掘金看到一个标题是用纯CSS制作rate评分,然后自己就去想了一下,试了一下做了一个效果是做出来了,但代码好像有点…有待优化哈哈哈。后来回头点进去那位大哥是用SASS写的，发现确实秀。那么先说一下我的代码的 实现思路首先运用input的radio来做点击，然后使用选择符 ‘~’ ，获取当前选中的后面的所有同辈元素，给后面同辈的元素添加样式。具体是我是先用一个盒子把5个input和装...
2019-08-28 13:32:15
421
原创 图解CSS形状Shapes
CSS的高级特效----形状（Shapes）CSS Shapes 允许我们通过定义文本内容可以环绕的几何形状、图像和渐变，来创建有趣且独特的布局。CSS Shapes包含两组属性，shape-outside 和 shape-outside。 本文不涉及shape-inside，因为目前好像还没有浏览器实现它。shape-outside 有四个形状函数( 只能应用给浮动元素 )：circ...
2019-08-19 22:05:46
562
翻译 CSS3改变图片的颜色(附gif图及源码)
此项目主要是运用混合模式中的色相来完成图片的变色效果的首先简单讲一下色相：色彩的相貌，如下图的颜色通过在颜色板添加混合模式为色相样式，然后通过改变颜色板的颜色使车身部分的颜色改变，因为除了车身，其他部分的颜色为黑白，所以没有随着变色下面是html代码，一个颜色板color和一个img车的图片，然后设置默认色板颜色为#0000ff（蓝色） <input type="color" v...
2019-08-19 01:23:41
1432
原创 CSS实现水波浪效果(附gif图及源码)
不多说先上图，如下图其实上图实现的水波浪的效果并不是让蓝色部分的水动，而是使白色区域变化（让两个椭圆绕Z轴旋转）那么我们先在html用一个div做一个杯子，下面是div的样式代码div { margin: 300px auto; width: 200px; height: 300px; border-radius: 0 0 20px 20px; bo...
2019-08-17 00:53:59
5963
原创 浅谈web性能
度量 Web性能的一个重要指标就是页面内容实际显示在屏幕上需要多久。这个指标有时候也叫 “渲染时间” 或者 “上屏时间”。现代浏览器在屏幕上渲染之前，至少需要两样东西：HTML和CSS。这意味着让浏览器尽快下载HTML和全部CSS极其重要。浏览器只有掌握了布局页面的全部CSS信息，才能给出最佳响应。 因为只有这样，他们才知道应该把页面渲染成什么样，从而一次性地把页面绘制到屏幕上，而非一边加载新样...
2019-08-16 01:07:46
172
原创 浅谈CSS继承及优先级
继承是很有用的机制，有了它就可以避免给一个元素的所有后代重复应用相同的样式。如果你要设置的属性是一个继承属性，那么应该考虑是否直接设置到父元素上。合理的使用继承，有助于减少选择符的数量，降低复杂性。不过，如果有大量的元素继承了各种不同的样式，那么查找样式的来源也会比较麻烦。不可继承的：display、margin、border、padding、background、height、min-he...
2019-08-15 00:10:24
559
原创 CSS时钟案例
效果如果图下下面是html代码<div class="box"> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> <div class...
2019-08-14 00:23:12
1872
原创 CSS3图解颜色渐变
渐变产生的是图像，所以需要使用 background线性渐变linear-gradient（方向，开始颜色，位置，颜色2，位置，颜色3，位置…）方向：to top：0degto right：90degto bottom：180ddeg-----默认值to left：270deg下面附上一张关于角度的图（源于网络）下面给盒子添加宽高和 to right（向右）的渐变backgr...
2019-08-13 01:17:02
246
原创 CSS3图解伸缩性布局
CSS3伸缩性布局flex父盒子 section 需添加 伸缩布局模式 display: flex;<section> <div>1</div> <div>2</div> <div>3</div> <div>4</div></section>...
2019-08-09 15:30:54
346
原创 css多列布局column
下面由我用一个小案例来讲解一下 多列布局—columncolumn-count: 3; ----设置列数(此处列数为3列)column-rule: dashed 3px red; -----添加列间隙样式(与边框样式添加一样，此处宽度为3px的红色虚线)column-gap: 50px;----设置列间隙大小(此处列宽为50px)column-span: all;----设置跨列显...
2019-08-08 18:08:25
2605
原创 3D动画展示--3D图片旋转展示
3D图片旋转展示下面是6个div放置6张周围旋转的图,html如下<section> <div></div> <div></div> <div></div> <div></div> <div></div> <...
2019-08-07 23:53:58
1481
2
原创 微信导航栏的实现
微信导航栏的实现以下是使用到的背景图片，原理是使用内边距撑开图片放在images文件夹中的ao.png放在images文件夹中的tu.png下面是html标签<ul> <li> <a href="#"> <span>首页</span> </a> ...
2019-08-07 14:18:26
935
原创 两面翻转----背面隐藏（backface-visibility:hidden）
实现图片的两面翻转,效果如下图主要是使用背面隐藏(backface-visibility: hidden;) 实现图片的两面翻转首先在body中一个 div 中放置两个图片 img<div> <img src="images/1.jpg" alt=""> <img src="images/2.jpg" alt=""></div>...
2019-08-06 18:21:57
6661
2
原创 使用text-shadow:实现凹凸文字
使用text-shadow实现凹凸文字那么先在body创建两个div,用来存放凹、凸文字<div>窝是凸文字</div><div>窝是凹文字</div>以下为css样式：然后为body添加背景颜色#ccc(灰色)，div的的文字样式是：颜色#ccc和背景色一致，宽度100px，字体大小100px，微软雅黑body{ backgroun...
2019-08-05 23:28:27
427
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人