css
许你一城个人博客
这个作者很懒,什么都没留下…
展开
-
CSS绘制三角形(含代码)
(1)我们先来看看下面这段代码:div#tr1{width: 0px;height: 0px;border: 30px solid #F00; }想想这会是怎样一个图形?直接上图,看下面: 对,就是一个正方形。如果你不理解,说明你对css中的盒子模型还不了解,需要去补充一下这方面的知识。(2)继续,上面(1)的代码也可以写成如下形式,运行结果是一样的,我就不上图了。div#tr1{width: 0...原创 2017-04-09 19:49:05 · 1862 阅读 · 0 评论 -
鼠标拖拽div元素
上图中绿色箭头指向的分别是3个事件,大概的意思是:鼠标单击div#box元素后,激活了document.onmousemove鼠标移动事件,在移动鼠标时,会改变div#box的left、top值,从而达到div#box元素随着鼠标移动。单鼠标放开时触发了document.onmouseup鼠标松开事件,在鼠标松开事件里把document.onmousemove事件设为null,这时div#box就...原创 2018-03-20 10:50:27 · 253 阅读 · 0 评论 -
无缝轮播——改ul的marginLeft
轮播图几乎存在于每个网站的主页。轮播图的实现方法有很多种,比如改变img的display、img的opacity或者改变ul的marginLeft达到无缝轮播等等。今天给大家介绍最后那种方法——无缝轮播。如下两张图是无缝轮播的实现原理。通过定位把li中的图片拼成一长条,div#pic设置了overflow:hidden;致使只有一张图片显示,JS控制ul的marginLeft来移动ul,从而显示不...原创 2018-03-08 19:51:02 · 363 阅读 · 0 评论 -
轮播——改img的display
轮播图几乎存在于每个网站的主页。轮播图的实现方法有很多种,比如改变img的display、img的opacity或者改变ul的marginLeft达到无缝轮播等等。今天给大家介绍“改变img的display”这种方法。这种方法的实现原理是如此的简单,如下图:把div#pic的定位设置为position:relative;而div#pic中的5个img的定位设置为position:absolute;...原创 2018-03-08 19:47:40 · 672 阅读 · 0 评论 -
CSS基础知识总结
CSS(层叠样式表:Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS是做网站的基础,今天将自己学习CSS的笔记分享给大家。1、CSS的三种引入方式 1、外部样式表 <link rel="stylesheet" href="css/index.css"...原创 2018-03-08 19:42:08 · 206 阅读 · 0 评论 -
旋转太极八卦
太极八卦图,以同圆内的圆心为界,画出相等的两个阴阳鱼表示万物相互关系。阴鱼用黑色,阳鱼用白色,这是白天与黑夜的表示法。阳鱼的头部有个阴眼,阴鱼的头部有个阳眼,表示万物都在相互转化,互相渗透,阴中有阳,阳中有阴,阴阳相合,相生相克,即现代哲学中和矛盾对立统一规律表示法。哈哈,装了个逼。其实我就是想教大家用css3画出旋转太极八卦。仅此而已。Html的代码很简单,就一行代码,如下图:............原创 2018-03-08 19:31:27 · 922 阅读 · 0 评论 -
3D爱心的制作
之前有看到过很多基于HTML5或者CSS3制作的爱心动画,不过基本上都是2D平面的,今天在国外的网站上看到一个基于HTML5 3D的爱心动画,对于HTML5爱好者来说,不免兴奋了一把。下面将分享一下这个3D爱心动画的实现过程,可以一起来看看。如何实现呢?其实3D爱心上的每一根线条就是一个<div class="rib1"></div>,通过设置border相关属性就可以变成...原创 2018-03-08 19:28:39 · 989 阅读 · 0 评论 -
CSS3实现内外双立方体
CSS3实现内外双立方体,前提是要会实现单个立方体,才可能理解双立方体的实现。你可以 单击这里 学习单个立方体的实现方法。完整文章、源代码下载请点击这里许你一城个人博客...原创 2018-03-08 19:25:59 · 202 阅读 · 0 评论 -
CSS3实现立方体
SS3可以实现制作立方体,代码简单,只是涉及CSS3的一些变换、动画以及过渡属性,而且这些大家都见过,通过制作这个立方体可以让大家更好见识到CSS3的厉害。立方体是由六个面组成,分上下、左右和前后,考虑这些可以助我们更好的融入css3的代码接下来就是要写代码了:首先我们设一个大盒子cube,包裹住六个div:然后是css代码:.......................................原创 2018-03-08 19:23:36 · 1159 阅读 · 0 评论 -
基于时间或速度的JS运动框架
JQuery要实现动画,那是相当的简单啊,现成的函数可以用。那么Javascript如何实现动画呢?哎呀,其实也是so easy啊,也许你没想过如何实现,因为JQuery太给力了、甚至CSS3就可以实现完美动画。今天就教教大家如何实现。实现原理是:动画嘛,不就是一帧一帧的变嘛,打个比方,div元素的width由300px变成400px,那就让它依次变化:305px、310px、315px、320p...原创 2018-03-29 17:14:50 · 313 阅读 · 0 评论