CSS3

CSS3–过渡动画(transition)、变形(transform)3.1、概述transition属性可以让动画在CSS层面实现,此时不是利用setInterval(),不是定时器,而是底层C++在渲染,渲染动画的质量、丝滑程度都要远远优于JS、jQuery。要颠覆我们传统制作网页动画的思维模式,现在的 ...

最近整理CSS3的一些属性,新增选择器、伪类、圆角、阴影(box-shadow)、background详情地址:CSS3---新增选择器、伪类、圆角、阴影(box-shadow)、background ...

我本善良

我本善良|css3杂的码

发布于 昨天 14:13 浏览:100 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><styletype="text/css">/*reset*/*{margin:0;padding:0;box-sizing:border-box;font-family:"微软雅黑";font-size:12px;}body{background:#e6e2d7;}/*修饰*/.laipi{width:80px;height:80px;border-radius:50%;bord ...

css3杂的码
connie_liu

connie_liu|css3折纸目录

发布于 3 天前 浏览:148 类型:原创 - 随笔 分类:JavaScript 举报

html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>body{margin:0;}@-webkit-keyframesshow{0%{-webkit-transform:rotateX(-90deg);}30%{-webk ...

零度沈

零度沈|这个方便以后使用

发布于 3 天前 浏览:112 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title></head><styletype="text/css">.radio-1{width:980px;margin:0auto;padding:3%0;background-color:#3cc;text-align:center;}.radio-1[type="radio"]{display:none;}.r ...

592667917

592667917|一个div实现的“胡子”

发布于 3 天前 浏览:256 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<!DOCTYPEhtml><html><head><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><metahttp-equiv="content-type"content="text/html;charset=utf-8"><title>纯css画胡子</title><style>*{margin:0;padding:0;}.mustache{width:100px; ...

study_web

study_web|html和css 爱笑大白

发布于 4 天前 浏览:155 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<html><head><metacharset="utf-8"><title>baymax</title><style>body{background:#595959;}#baymax{margin:0auto;height:600px;overflow:hidden;}.head{height:64px;width:100px;border-radius:50%;background:#fff;margin:0auto;margin-bottom:-20px;border-bottom:5pxsolid#e0e0e0;z ...

sunny红

sunny红|六面体骰子

发布于 5 天前 浏览:194 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Dice</title><style>@-webkit-keyframesshaizi{0%{transform:rotateX(0)rotateY(0)rotateZ(0)translateZ(60px)}100%{transform:rotateX(360deg)rotateY(360deg)rotateZ(360deg)translateZ(60px)}}#shaizi{wi ...

梦柯

梦柯|推荐一个纯CSS3导航特效

发布于 6 天前 浏览:262 类型:转载 - 随笔 分类:HTML/CSS 举报

在站长素材网网页模板中无意发现的感觉不错就去研究了一下。因为某些原因需要大家自己排下版,关键css代码都写上了。有css3基础就能看懂!!!好东西都是需要分享的!!!html代码效果预览<ulclass="header-navpt35pr30"><liclass="nav-itme"><aclass="linknav- ...

hlq81619335

hlq81619335|一个DIV元素实现的动画

发布于 6 天前 浏览:782 类型:转载 - 随笔 分类:HTML/CSS 举报

html代码效果预览<!doctypehtml><html><head><metacharset="UTF-8"><title>效果</title><style>.inner{width:960px;margin:0auto;}.load-container{border:1pxsolidrgba(255,255,255,0.2);width:240px;height:240px;float:left;position:relative;overf ...

lingwer111

lingwer111|菜单栏 “三” 变形为“X”css3过渡动画

发布于 6 天前 浏览:1300 类型:原创 - 教程 分类:HTML/CSS 举报

最近要模仿一个页面,其中有一个效果就是三菜单栏变形为X的效果,思路:三横的实现:传统可以用3个span标签来实现,但有一个更加巧妙的方法,1个标签就能实现三横效果,根据张鑫旭大神分享的利用padding用一个标签实现三的效果,大概原理是上中下横线分别用border-top,背景,border-bottom。用background-clip: ...

Luminary丶

Luminary丶|不知所措的滑稽

发布于 7 天前 浏览:142 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>滑天下之大稽</title><style>*{margin:0auto;padding:0;}.box{position:relative;width:500px;height:500px;top:50px;} ...

曾阿牛

曾阿牛|CSS3图片翻转切换案例

发布于 7 天前 浏览:1159 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>css3翻转效果</title></head><style>.flip-container{margin:30px;display:inline-block;border:1pxsolid#aaa;-webkit-perspective:500;-moz-perspective:5 ...

Luminary丶

Luminary丶|手动调动border-radius值查看图形

发布于 2017-02-20 22:56:04 浏览:135 类型:原创 - 随笔 分类:HTML/CSS 举报

想用css做一个叮当猫,但是一些形状自己设计的话感觉非常难设计出,一点点调动还要在编译器和网页中转换,感觉非常不方便,于是便想写一个可以随意调节css属性直接显示图形的,很方便自己。界面非常简单,也可以说丑..但是做这个目的很简单也已经达成了,就不想再做那些了==还是懒啊。html代码效果预览<!DOCTYPEhtm ...

探花

探花|会用得到的小效果

发布于 2017-02-20 17:26:55 浏览:381 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览[code=html,html代码,true]<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>js</title></head><style>*{margin:0;padding:0;}.nav-box{position:relative;}ul{overflow:hidden;list-style:none;height:40px;line-height:40px;background-colo ...

吾爱吾心

吾爱吾心|手风琴实例

发布于 2017-02-18 23:04:55 浏览:160 类型:原创 - 随笔 分类:JavaScript 举报

没事玩的jQuery用的是1.7.2版本<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><scriptsrc="1.7.2.js"></script><style>*{&nbs ...

461255824

461255824|css3打字动画

发布于 2017-02-18 10:59:28 浏览:307 类型:原创 - 随笔 分类:HTML/CSS 举报

写了一半发现bug太多暂时搞到这html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>Document</title><styletype="text/css"media="screen">.box{width:100%;height:500px;text-align:center;posi ...

追追

追追|纯css3.0打造具有绚丽视差滚动的图片切换

发布于 2017-02-17 18:29:28 浏览:1592 类型:原创 - 教程 分类:HTML/CSS 举报

用纯css实现这款banner切换,在摒弃了定时器效果下,加上滚动视差感堪称完美。效果预览先来剖析:什么是视差滚动?视差滚动(ParallaxScrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。视差滚动的结构可以分成:背景层、内容层和悬浮层(贴图层)。悬浮层和背景层可为多层,能实 ...

骄傲的大花猫

骄傲的大花猫|纯CSS实现笑脸猫动画

发布于 2017-02-16 10:20:33 浏览:1681 类型:转载 - 教程 分类:HTML/CSS 举报

html代码效果预览<html><head><style>.face{left:50%;top:50%;position:absolute;width:400px;height:340px;margin-left:-200px;margin-top:-170px;border-radius:50%50%35%35%;border:2pxsolid#000;z-index:10;background:#f3f3f3;overflow:hidden;}.e ...

飘动的风

飘动的风|简单的翻书效果

发布于 2017-02-15 16:19:18 浏览:973 类型:原创 - 随笔 分类:HTML/CSS 举报

看见个翻书效果,自己做了个试试html代码效果预览<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><style>body{overflow:hidden;margin:0;padding:0;}#book{position:absolute;left:50%;top:50%;margin-left:-325px;margin- ...