CSS3

756642763

756642763|loading动画特效(在更新中)

发布于 昨天 15:53 浏览:510 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>lodading动画效果上</title><linkrel="stylesheet"href="style.css"/><style>.box{width:100%;padding:3%;box-sizing:border-box;overflow:hidden;}.box.loader{width:30%;float: ...

madcn

madcn|论如何用 CSS3 做地月模型

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

地月模型效果预览<style>#solar_wrap{width:0;height:0;background-color:#251822;padding:100px130px;overflow:hidden;}#solar{position:relative;width:0;height:0;transform:perspective(300px)rotate3d(0,0,1,30deg);transform-style:preserve-3d;}#solar.solar_sun ...

fanbuxie

fanbuxie|关于CSS3选择器(第二弹)

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

之前发表过一篇关于css的属性查找的方法;这次是刷一写平常常用的一些css3选择器html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Css3</title><style>p{height:30px;border:1pxsolid#000;margin:10px0;}p:first-child{background: ...

娜娜子

娜娜子|漂亮的表单边框

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

今天看到一个很漂亮的表单边框,具体地址是:http://www.html5tricks.com/demo/Glowform/demo.html很想模仿下来作为一个酷炫的素材。也发现了这个原本的demo并不兼容IE,我自己的是IE11。要看源代码的直接f12就可以看了。为了省以后的麻烦,我自己弄了个demo,把其他不必要繁琐的样式去掉,单独重点把边框的 ...

_zxqian

_zxqian|IE不兼容问题及解决办法(不定时补充)

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

IE不兼容问题及解决办法(不定时补充更新)1、IE9及以下不支持样式名称叠加写法,如:.s1.start;解决:.xxx.s1;提升层级分开写。不支持css3transition兼容代码:<!--[iflteIE9]><linkhref="fixed.css"rel="stylesheet"type="text/css"/><![endif]- ...

_zxqian

_zxqian|webkit私有及实用属性

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

这是我多年下来总结的webkit相关笔记-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-webkit-overflow-scrolling:touch;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-we ...

ywhluck

ywhluck|loading...

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

index.html效果预览<!doctypehtml><htmllang="en"><head><metacharset="utf-8"><title>loading...</title><style>.loader{float:left;position:relative;width:80px;height:80px;margin-right:8px;}.small{-webkit-transform:scale(.5);transform:scale(.5);}. ...

18910715150

18910715150|CSS3 弹性盒子

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

display:flex;将对象作为弹性伸缩盒显示<!DOCTYPEhtml><html><head><style>.flex-container{display:-webkit-flex;display:flex;width:400px;height:250px;background-color:lightgrey;}.flex-item{backgro ...

CSS3 弹性盒子
18910715150

18910715150|CSS3 弹性盒子

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

display:flex;将对象作为弹性伸缩盒显示<!DOCTYPEhtml><html><head><style>.flex-container{display:-webkit-flex;display:flex;width:400px;height:250px;background-color:lightgrey;}.flex-item{backgro ...

18910715150

18910715150|CSS3 弹性盒子

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

display:flex;将对象作为弹性伸缩盒显示<!DOCTYPEhtml><html><head><style>.flex-container{display:-webkit-flex;display:flex;width:400px;height:250px;background-color:lightgrey;}.flex-item{backgro ...

四月鸟凉

四月鸟凉|goast button,幽灵按钮特效

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

有时候能看到这种效果的按钮,效果很棒,请看下图:html代码效果预览<!DOCTYPEhtml><htmllang="ZH-CN"><head><metacharset="utf-8"><metaname="keywords"content=""/><metaname="description"content=""/><linkrel="shortcuticon"href=""><title>20170113goast</title><!--<linktype=""rel="styles ...

不买醋

不买醋|css3 2D转换

发布于 2017-01-14 22:26:44 浏览:170 类型:原创 - 随笔 分类:HTML/CSS 举报

一、transform:注意各浏览器兼容,加前缀1.位置移动:属性值:translate(x,y)translateX(x)translateY(y);作用:通过此方法,将元素从当前位置按指定 ...

15210403558

15210403558|css之原点定位

发布于 2017-01-14 00:37:54 浏览:117 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>CSS2D转换</title><style>body{margin:0;padding:0;background-color:#F7F7F7;}.box{width:155px;height:219px;margin:100pxauto;position:relative;}.boximg{ ...

mnblue

mnblue|CSS3之transform矩阵Matrix

发布于 2017-01-13 16:01:37 浏览:111 类型:原创 - 随笔 分类:HTML/CSS 举报

CSS3中的矩阵指的是一个方法,书写为matrix()和matrix3d(),前者是元素2D平面的移动变换(transform),后者则是3D变换。2D变换矩阵为3*3,如上面矩阵示意图;3D变换则是4*4的矩阵。矩阵与transform属性的计算公式默认矩阵matrix(1,0,0,1,0,0)&nbs ...

娜娜子

娜娜子|canvas流星雨的背景

发布于 2017-01-13 14:26:26 浏览:2042 类型:原创 - 随笔 分类:HTML/CSS 举报

看到一个很棒的流星雨效果。修改一下样式就可以作为网页背景了。。!自己用这个背景加了几个按钮,做了个非常简单的demo,放在github:https://github.com/lily920416/MeteorShower;以后有需要可以参考一下了html代码效果预览<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>一起 ...

mnblue

mnblue|CSS3之transform

发布于 2017-01-13 13:46:40 浏览:136 类型:原创 - 随笔 分类:HTML/CSS 举报

1.transform2D变换1.rotate旋转(单位deg)html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no"/><title>Document</title><styletype="text/css">#box{width:100px;height:100px;border:1px ...

WebMaster

WebMaster|推销自己的前端技术书籍

发布于 2017-01-12 23:45:48 浏览:1634 类型:原创 - 教程 分类:JavaScript 举报

今天主要自我推销两本前端技术书籍!《JavaScript半知半解》《Web开发实战》如果链接失效,可复制这里:《JavaScript半知半解》http://www.kancloud.cn/dennis/tgjavascript《Web开发实战》http://www.kancloud.cn/dennis/javascriptmethod一、《JavaScript半知半解》为什么写这本书?因为之前作者在博客上洋 ...

推销自己的前端技术书籍
lauhee

lauhee|中国第三届CSS开发者大会相关PPT&PDF

发布于 2017-01-12 17:17:37 浏览:880 类型:原创 - 随笔 分类:HTML/CSS 举报

中国第三届CSS开发者大会由于上传有大小限制,还有部分详见ThingsIDidn’tKnowAboutCSS:https://img.w3ctech.com/slide/4.20%20things%20I%20didn’t%20know%20about%20CSS.pdfCSSGridLayout:https://css.w3ctech.com/CSSinNative:https://img.w3ctech.com/slide/CSS%20in%20Native%20-%20CSSConf%20Guan ...

asd2340138

asd2340138|仿苹果官网轮播图效果

发布于 2017-01-12 11:24:37 浏览:1381 类型:原创 - 随笔 分类:JavaScript 举报

最近项目比较忙,很久没有发笔记了,现在稍微闲下来一点时间,来总结下自己之前写过的一个轮播插件—根据苹果官网的轮播效果所扒下来的轮播插件。下面主要讲一讲我当时扒这个轮播图的一些思路和逻辑吧。具体的代码演示效果,在页面底部。首先,上一下轮播图的原理图:如上图所示,轮播图的大概运行机制就是这样,具体 ...

仿苹果官网轮播图效果
常规特效

常规特效|纯CSS动画,心形齿轮!

发布于 2017-01-11 21:44:44 浏览:593 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="Generator"content="EditPlus®"><metaname="Author"content=""><metaname="Keywords"content=""><metaname="Description"content=""><title>Document</title><style>body{display:flex; ...