#cSS3

css3中的几何图形shape研究

前言估计大家在日常工作中都会用到css形状,但是目前天朝中使用到最多的估计就是圆(circle)、椭圆(ellipse)、各种三角形形状,但是你肯定很少看见过用几何图形或者多边图形。假如你不懂什么叫做几何图形,那么请前往百度百科,就算是我们用:after:before 这些伪元素来构造我们所需要的形状或者利用...

利用CSS3 中steps()制用动画

.monster{width:190px;height:240px;margin:2%auto;background:url('http://www.51dev.com//FileUpload/news/202004/20200418220700647.png')leftcenter;animation:play.8s...

CSS3 box-shadow快速教程

box-shadow属性向框添加一个或多个阴影。这个CSS3的属性很常用,盒阴影、按钮状态等各种地方都有用到,但是你了解并记住各个参数的作用及用法吗?源码:http://codepen.io/yisi/pen/sDBwC语法:http://www.w3cplus.com/content/css3-box-shadow动...

响应式HTML5+CSS3 网站开发测试实践

仅仅利用mediaquery适配样式是远远不够的,并没有考虑触屏下的行为和特有的内容组织方式的不同。简单在桌面版基础上叠加mobile版的代码,会带来请求增多、流量、性能、代码冗余等诸多方面问题。有统计说86%的手机站看起来small其实体积比桌面版还大。我们这次充分发挥“响应”的灵活性,实现o...

CSS3的学习--实现瀑布流

基于CSS3实现瀑布流,使用CSS3的CSS多栏(Multi-column)。可以到github上下载源码: https://github.com/CraryPrimitiveMan/waterfall-css3瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动...
代码星球 代码星球·2020-04-18

css3 flex流动自适应响应式布局样式类

 一旦一个容器赋予了display:flex属性,将会有以下特点:项目无法设置浮动。列表的样式会被清除。无法使用vertical-align设置垂直对齐方式。目前互联网上关于flex流动布局的文章很少,搜索关于flex的文章,大部分还介绍的是旧的知识点,显然已经不符合当前的w3c标准了,要想了解flex的相关...

HTMl5/CSS3/Javascript 学习推荐资源

前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/Python/Nodejs/Java/ASP.NET只要和展示有关的部分都可以称之为前端。在这里由于篇幅的限制,我们只推荐与HTML+CSS+Javascript三者有关的前端技...

前端制作动画的几种方式(css3,js)

制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式。1.css的transition。语法:transition:propertydurationtiming-functiondela...

CSS3-渐变这个属性2

渐变   有了渐变再也不用去切1px的图再重复了..   -webkit-是浏览器前缀,表示特定浏览器对一个属性还在实验阶段,在这里顺便写下各个浏览器的前缀:   chrome/safari  -webkit-...
代码星球 代码星球·2020-04-18

css3 编写滚动条 利用伪类

//高宽分别对应横竖滚动条的尺寸::-webkit-scrollbar{width:16px;height:16px;}//内阴影和圆角::-webkit-scrollbar-track{-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);border-radius:10px;}/...

css3 翻转

/*水平翻转*/.flipx{-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH();}/*垂直翻转*/.flipy{-moz-transform...
代码星球 代码星球·2020-04-16

CSS3条件判断——@supports

CSS3条件判断,听起来“不明觉厉”,如果你对CSS稍为熟悉一点的话,你会发现CSS中的“@media”就是条件判断之一。是的,在CSS3的条件判断规范文档中包含了两个部分,其一是“@media”规则,主要用来“根据媒体属性区分样式表&...
代码星球 代码星球·2020-04-16

CSS3实现DIV圆角完整代码

本实例是CSS3实现DIV圆角。实现圆角的CSS3代码句是:"border-radius:20px;"。需使用支持CSS3的浏览器运行,例如新版的Chrome、火狐,或者IE9以上。IE6、7、8不支持。在线预览效果:http://hovertree.com/texiao/css/4.htm画圆型的例子:http://...

CSS3-背景渐变

CSS3-背景渐变 CSS3渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果,现在通过使用CSS3的渐变(gradients)即可实现。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。  ...
代码星球 代码星球·2020-04-15

css3实现图片的变大变小

主要是使用css3的animation,scale等于1是原图大小,大于1是把图片放大,小于1是把图片缩小。animation-delay用来延迟5秒触发这个动画<htmllang="en"><head><metacharset="UTF-8"><metaname="viewp...
首页上一页...2122232425...下一页尾页