分享一款纯CSS3实现漂亮的价格表样式代码是一款常见的主机商发布产品价格信息页。效果图如下： 在线预览 源码下载 实现的代码。 html代码： DEMO 1 DEMO 2 入门型VPS ...
CSS3中2D3D技术的发展，带来了更丰富的视觉效果~他们的实现机理是怎样的呢？ 1定义 2D: 能够对元素进行移动，缩放，转动，拉长或拉伸。 3D： 允许对元素进行格式化，在三维空间进行操作。元素改变形状，尺寸和位置。 2D方法： matrix()方法把所有2D转换方法组合在一起，该方法需要六个参数，包含数学函数，可以实现旋转（angle）,缩放（n）,移动（x,y）,倾斜（x-angle,y-angle）。 3D方法： 3Dtransfor...
上面是一个效果图，代码在下面： html CSS3 实现的导航 首页 Web前端 JavaScript JQuery CSS ...
语法 border-radius:length|percentage {1,4} length : 用长度值设置对象的圆角半径长度。不允许负值 percentage : 用百分比设置对象的圆角半径长度。不允许负值 {1,4}是说该属性支持1~4参数值; 参数解释 一个参数: 所有半径相等,顺时针,自左上角到左下角 两个参数:对角相等. 第一个参数:左上角=右下角; 第二个参数:右上角=左下角 三个参数. 第一个参数:左上角; 第二个参数:右上角=左下角; 第三个...
Style样式 .toggle { position: relative; display: inline-block; width: 60px; height: 30px; border: 1px solid #E5E5E5; background-color: #fff; background-clip: content-box; -webkit-border-radius: 30px; border-radius: 30px; } .toggle i { position: absolute;...
1，向上的三角 1 2 < html > 3 < head > 4 < meta charset ="utf-8" > 5 < title >border-radius </ title > 6 < style > 7 div{ 8 width: 0; 9 height: 0; 10 border-left: 20px solid transparent; 11 border-right: 20px solid transparent; 12 border-bottom: 20px solid #ccc; 13 } 14 </ ...
用css3样式实现的滑动导航菜单，html代码如下 CSS3 Minimalistic Navigation Menu | Tutorialzine demoCSS3 Minimalistic Navigation MenuRead the tutorial on Tutorialzine Home About Services Portfolio Contact us 效果图： 演示及下载
我们可以通过 CSS3 中的box-shdow和transform 来实现酷炫的Drop-shadow效果： 下面记录一下是实现步骤。 DOM 结构 我们仅仅需要一个div作为主体，阴影可借助伪元素:before和:after来实现。所以我们的 DOM 结构非常简单。 drop shadow effect 添加阴影 给两个伪元素添加阴影，暂时先搞定左边，右边的阴影稍后再处理。 .drop-shadow:before, .drop-shadow:after { content: ""; position: absolute; z-index: -1; b...
预备知识 DIV+CSS基础 圆角:border-radius 2D变幻:transform:skew && rotate 伪类::before 和 :after 代码 HTML结构代码很简单,CSS内含注释,图片小伙伴们自己替换哈! HTML CSS3实现曲线阴影和翘边阴影 啦啦啦德玛西亚!!!! 这是曲线阴影效果!!!! 这是翘边阴影效果!!!! CSS * { outline: 0; pad...
预备知识 DIV+CSS基础 CSS3的transform 和 transition用法 主要是用了transform的rotate/scale 动画过渡的几个参数(transition-property/transition-duration/ transition-timing-function) CSS3的box-shadow..这里只用到外阴影 值得一提的:更多属性的参数要查询css手册,这里展示只是会用到的; 素材获取 百度自行搜索图片素材,替换下面代码的图片路径即可.. 例子中的图片大于400像素小于600像素,其中480X270居多...
纯CSS3缎带效果.ribbon-content{border: 1px solid #DDD;font-weight: bold;margin: 0 -10px;min-height: 30px;padding: 7px 31px;text-align: center;line-height: 30px;}.ribbon-left{display: block;border-left: 10px solid white;border-top: 8px solid #EEE;float: left;height: 0;margin-left: -10px;width: 0;}.ribbon-right{display: block;border-right: 10px solid white;border-top: 8px solid #EEE;float: right;heig...
在很多网站中，我们都可以看到这样的效果，当用户鼠标进入某一个元素后，下方就会有遮罩层上浮动画，如图： 今天我们就用hover伪类加上css3实现，没有使用任何JS #d1{ height: 100px; position: relative; width: 100px; overflow: hidden; } #d1:hover > #d3{ transition: transform 0.5s ease; transform: translateY(-100%); } #d2{ background: red; heig...
纯CSS3实现的各种阴影效果body{padding: 20px 0 0;font: 14px/1.5 Arial, sans-serif;text-align: center;color: #333;background: #FAF0D9;}a{font-weight: bold;color: #346AA8;}a: hover, a: focus, a: active{text-decoration: none;}.container{position: relative;z-index: 1;width: 600px;padding: 20px;margin: 0 auto;background: #FAF0D9;}.container: after{content: "";display: block;clear: both;visibility: hidden...
CSS3实现各种纹理背景效果 body{font-family: Georgia, serif;}.stripes{height: 250px;width: 375px;float: left;margin: 10px;-webkit-background-size: 50px 50px;-moz-background-size: 50px 50px;background-size: 50px 50px;-moz-box-shadow: 1px 1px 8px gray;-webkit-box-shadow: 1px 1px 8px gray;box-shadow: 1px 1px 8px gray;}.angled{background-color: #ac0;background-image: -webkit-gradient(linear, 0 100%...
分享16款纯CSS3实现的loading加载动画。这是一款实用的可替代GIF格式图片的CSS3加载动画代码。效果图如下： 在线预览 源码下载 实现的代码。 html代码： Loading… Loading… Loading… Loading...