#cSS3

css3之水波效果

这些效果可谓多种多样,当然用canvas、svg也都能实现奈何对这些有不熟悉(尴尬),不过咱们用css来写貌似也没想象中的那么难吧。 效果图 css.container{width:100px;height:100px;border-radius:50%;border:3pxsolid#e787e7...
代码星球 代码星球·2020-09-17

CSS3中的px,em,rem,vh,vw

1、px:像素,精确显示2、em:继承父类字体的大小,相当于“倍”,如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端     em换算工具:http://www.runoob.com/tags/ref-...
代码星球 代码星球·2020-09-17

CSS3伪类和伪元素的特性和区别

前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link、visited等,伪元素较常见的比如:before、:after等。其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念,CSS1和CSS2中对伪类的伪元素的区别比较模糊,甚至经常有同...

浅谈css3有意思的属性pointer-events: none;

 可以用来阻止事件pointer-events:none;可以让某个元素实现类似于海市蜃楼的效果,具体理解为,你可以看的到某个元素,但是你无法摸的着。 而display:none;是你摸不着,但是你也看不见。 pointer-events:none;摸不着,但是看得见。如果把某个元素再加上...

css3图形绘制

以下几个例子主要是运用了css3中border、bordr-radius、transform、伪元素等属性来完成的,我们先了解下它们的基本原理。    border:简单的来说border语法主要包含(border-width、border-style、border-color)...
代码星球 代码星球·2020-09-12

DIV右上角标签的CSS3实现技巧

CSScode:--双倍攒豆<i><spanclass="aliPointView"><p>双倍攒豆</p></span><span><spanclass="aliPointstrikethrough"><p>194欢豆&l...

纯css3响应式3d翻转菜单

前端开发whqet,csdn,王海庆,whqet,前端开发专家周末快乐哈,今天来看一个纯CSS3实现的3d翻转菜单。3d响应式菜单,希望对大家有所帮助。在线赞赏效果。在线编辑代码,或者下载收藏。html文件例如以下<ulclass="menu"><li><atitle=...

CSS3设置内容超过一定长度后自动折行

    在用编辑器保存的数据到数据库的时候经常是在我们的内容前后加一个P标签,但是出来之后是一行,有时候会超过边框的宽度,所以研究了如何折行,如下代码:<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>...

CSS3动画(重要)

CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和JAVAScripts。要创建CSS3动画,你将不得不了解@keyframes规则。@keyframes规则是创建动画。@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。实例:@keyframesmyfirst{...
代码星球 代码星球·2020-08-26

CSS3 过渡

CSS3中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript. CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两项内容:指定要添加效果的CSS属性指定效果的持续时间。应用于宽度属性的过渡效果,时长为2秒:div{transition...
代码星球 代码星球·2020-08-26

CSS3 3D 转换

CSS3允许您使用3D转换来对元素进行格式化。在本章中,您将学到其中的一些3D转换方法:rotateX()rotateY()rotateX()方法,围绕其在一个给定度数X轴旋转的元素div{width:100px;height:75px;background-color:red;border:1pxsolidblack...
代码星球 代码星球·2020-08-26

CSS3 2D 转换

CSS3转换,我们可以移动,比例化,反过来,旋转,和拉伸元素。  在本章您将了解2D变换方法:translate()rotate()scale()skew()matrix()<!DOCTYPEhtml><html><head><metacharset="ut...
代码星球 代码星球·2020-08-26

CSS3 文本效果(阴影)

CSS3中包含几个新的文本特征。在本章中您将了解以下文本属性:text-shadowbox-shadowtext-overflowword-wrapword-break CSS3中,text-shadow属性适用于文本阴影。您指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色:<style>h1...
代码星球 代码星球·2020-08-26

CSS3 渐变(Gradients)

参考:http://www.runoob.com/css3/css3-gradients.html CSS3渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果。但是,通过使用CSS3渐变(gradients),你可以减少下载的事件和宽带的使用。此外,...
代码星球 代码星球·2020-08-26

CSS3边框与背景

参考:http://www.runoob.com/css3/css3-tutorial.html CSS3被拆分为"模块"。旧规范已拆分成小块,还增加了新的。一些最重要CSS3模块如下:选择器盒模型背景和边框文字特效2D/3D转换动画多列布局用户界面 1.CSS3边框: 用CSS3,你可以...
代码星球 代码星球·2020-08-26
首页上一页...1213141516...下一页尾页