#cSS3

css3制作梯形导航

/*HTML*/<divclass="nav"><ahref="javascript:;">首页</a><ahref="javascript:;"class="active">项目</a><ahref="javascript:;">关于</a...
代码星球 代码星球·2020-12-30

使用PIE对IE6、7、8进行CSS3兼容介绍和经验总结

下面说说如何对IE10以下版本的浏览器进行部分CSS3兼容国外团队开发的兼容插件,去年做项目时才发现,非常强大主角:PIE.js, PIE.htc   两种方法可以实现官方网站:http://css3pie.com/演示地址:http://css3pie.com/demos/gr...

HTML5+CSS3整体回顾

http://blog.poetries.top/2016/10/19/HTML5+CSS3%E5%9F%BA%E7%A1%80%E5%9B%9E%E9%A1%BE%20/ 这篇文章主要总结H5的一些新增的功能以及一些基础归纳,这里只是一个提纲,并不是很详细,后面会一直完善补充新的内容,本文是一些笔记记录,放...
代码星球 代码星球·2020-12-30

CSS3 页面跳转的动画效果

从左侧弹出:varwindowWidth=window.innerWidth;$(atlas_list).css({"transition":"none","-webkit-transition":"none","transform":"translate3d("+(windowWidth)+"px,0,0)"});w...

CSS3 中关于 *-of-type 和 *-child的差异性及适用场景

css3中有很多表示元素序号的选择器,有以下几种:first-child、:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n...

CSS3的变形、过渡、动画、关联属性

transform:可以对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew、矩阵变形matrix。示例:transform:rotate(90deg)scale(1.5,0.8)translate(100px,50px)skew(45deg,45deg);/*矩阵变形*/matrix(...

css3动画之两面翻转的盒子

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>/*先清掉默认的样式*/body{margin:0;padding:0...

css3实现椭圆轨迹旋转

实现效果 X轴Y轴在一个矩形内移动做斜线运动.ball{position:absolute;animation:animX2slinearinfinitealternate,animY2slinearinfinitealternate}@keyframesanimX{0%{left:0px;}100%{lef...

css3 过渡和动画

1.过渡的定义和使用在没有过渡属性的时候,当一个元素的属性值发生变化时,浏览器就会将个这个元素瞬间渲染成新属性值的样式。例如一个定位元素top:0,动态修改成top:100px,这个元素就瞬间跑到100px的位置,有时候我们为了达到某种视觉效果,希望它以动画的形式在一定的时间内,从旧的样式转变成新的样式,而这个过程就是...
代码星球 代码星球·2020-12-24

CSS3 简单的砸金蛋样式

实现样式:1、鼠标移入后,鼠标样式图标变为“锤子”。2、用户砸金蛋,锤子简单的扬起效果。3、砸碎金蛋,显示内容。 分析实现步骤:1、在html中插入一颗金蛋找一张静态图片或带一点效果的动态图,直接放入img标签即可。 2、鼠标移入,改变鼠标样式图标系统自带的鼠标样式就那几种,可以通过css修改,简单...
代码星球 代码星球·2020-12-24

css3新增属性有哪些?

css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性。 1、css3新增属性之border-color:为边框设置多种颜色p{border-style:solid;border...
代码星球 代码星球·2020-12-24

纯CSS3制作3d网红热词盒子

今天给大家分享的是css3制作的带3d效果的方块,上面简单整理了一下2019年的网红热词。这个DEMO用到了css3的3d变化技巧,做出来的效果还不错。请注意,该3d效果依赖transform-style:preserve-3d属性,必须在现代浏览器或IE11中才能看到效果。 盘他柠檬精OMG我太难了996我...

CSS3中的渐变效果

渐变是css3中比较丰富多彩的一个特性,通过渐变我们可以实现许多绚丽的效果。渐变可分为线性渐变和径向渐变。 沿着某条直线朝一个方向产生渐变效果语法:linear-gradient([<point>||angle]?<stop>,<stop>[,<stop>]*)...
代码星球 代码星球·2020-12-24

纯CSS3仿网易云孤独星球特效

今天收听网易云音乐时看到孤独星球的特效,于是就顺手搬到这里了。孤独星球特效本身没有什么难点,但如果要加入音轨控制星球运动频率就有点麻烦了,后面我会专门开一篇文章讲解如何使用js去解析mp3的音轨并制作动画特效,这里呢就稍微简单点了,既然是纯css3,星球运动频率就设为固定的好了。   &n...

纯css3实现二维码扫描特效

在线预览https://jsrun.pro/AafKp/如果本文对你有用,对博主小额打赏,以资鼓励,分享更多有用的技能先看效果: 第一步,实现网格背景:background-image:linear-gradient(0deg,transparent24%,rgba(32,255,77,0.1)25%,rgb...
首页上一页...1011121314...下一页尾页