边框效果如下:鼠标移到下面方形,就有效果 正如你所看到的,这边框颜色只用纯css3就做出来了,HTML忽略.. 要想做出此效果,就得深入理解css3的transition过渡属性;我直接贴出代码,并注释: ...
分类:
Web程序 时间:
2018-10-26 22:16:43
阅读次数:
506
使用css3实现图片轮播 前言:实现图片轮播的方式有很多种 ,例如js ,css 等等。 本文主要讲述使用纯css3实现轮播图 工具介绍: 使用的编辑器: Hbuilder 进入正题 html代码: 解释: 定义两个div,第一个div用来确定展示的大小,第二个div用来实现图片的轮播。 css代码 ...
分类:
Web程序 时间:
2018-10-23 14:58:21
阅读次数:
249
test.html: test.css: 效果图: 可以将颜色换成图片。 ...
分类:
Web程序 时间:
2018-09-23 15:04:12
阅读次数:
581
进度条动画效果: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="vie ...
分类:
Web程序 时间:
2018-08-03 21:43:45
阅读次数:
850
css3 3d学习心得 卡片反转 魔方 banner图 首先我们要学习好css3 3d一定要有一定的立体感 banner图 通过这个图片应该清楚的了解到了x轴 y轴 z轴是什么概念了。 这个例子只是简单的纯css3 3d 关于y轴旋转 下面是代码: body{ perspective: 800px; ...
分类:
其他好文 时间:
2018-07-24 18:05:35
阅读次数:
459
日常开发中实现开关,或者更准确说实现单击按钮效果的方法很多,问题是怎么做才能让其更美观的展示在浏览器上。 效果图如下: 之前在网上看过不少实现的方法,其中就有一个是使用纯css3写出来的,以下是纯css代码实现的网站地址:https://proto.io/freebies/onoff/ 以下是该网站 ...
分类:
其他好文 时间:
2018-06-28 19:25:21
阅读次数:
335
1. 闲来无事时在网上看一些前辈的博客文章,自己尝试了一下。学习到最重要的一点就是box-shadow的叠加使用,受益非线。先上一下效果图: 其中有以下重要的几点: 1. 蜡烛底座的border-radius的水平圆角与垂直圆角设置,即 border-radius:左上水平 右上水平 右下水平 左下 ...
分类:
Web程序 时间:
2018-06-13 23:31:18
阅读次数:
762
position: sticky; 这东西来自css3,并且瞬间就完成了置顶的效果. 复制粘贴滚动滑轮即可见到效果……(至于兼容问题,暂且就不考虑了。反正俺也不会!呵呵吧。。。) 由于没什么写的,就顺便将position定位的属性都 static: --即默认不应用 relative(相对定位): ...
分类:
Web程序 时间:
2018-05-21 16:07:54
阅读次数:
374
我们知道css3代码可以改变图片的方向,可以让图片立体式排列,也可以实现倒影效果只要耐心,角度安排合理,可以制作出很多不错的效果这种效果在之前的css2代码中,html4时代是想都不敢想的今天特意整理了一个这么效果供给大家观赏使用下载:圆柱模板更多圆柱模板尽在:http://zhimo.yuanzhumuban.cc/
分类:
Web程序 时间:
2018-03-06 17:07:37
阅读次数:
290