一些用Css实现的效果

css三级菜单效果

一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"> <title>css实现三级菜单</title> <style type="text/css"> *{margin:0;padding:0} ul{list-style:none} a{text-decoration:none} body{fon…

利用target的特性，可以实现纯css的tab效果切换

基础知识: :target起作用的是href连接到的位置如 <a href="#tab1">tab1</a> <div id="tab1" class="tab">This is a tab1</div> :target{ color:red; } 但点击a标签的时候,连接到id是tab1的div,对这个div起作用color:red; 如: <a href="#tab"…

CSS 边框阴影效果以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; background-color: red; box-shadow: 5px -5px 1px 1px #000; -webkit-box-shadow:5px -5px 1px 1px #000; -moz-box-shadow:5px 5px 1px 1px #000; /* For IE 8 */…

Css实现透明效果，兼容IE8

Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年9月9日 17:39:24 星期三 http://fanshuyao.iteye.com/ /* background: rgba…

HTML与CSS简单页面效果实例

本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link href="style.css" rel="stylesheet" type="text/css"…

css 实现评分效果

css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由 background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上稍有偏差. 我的理解:有人认为background-position 的位置移动中,这个属性相当于大图片不动,把div的顶点进行移动,移动到目标小图的顶点位置, 可参见:http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111704.html…

纯 CSS 实现波浪效果！

一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CANVAS),是可以很轻松的完成所谓的波浪效果的,先看看,非 CSS 方式实现的波浪效果. 使用 SVG 实现波浪效果借助 SVG ,是很容易画出三次贝塞尔曲线的. 看看效果: 代码如下: <svg width="200px" height="200px" vers…

React 系列教程 1：实现 Animate.css 官网效果

前言这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就是添加类与删除类的操作.这对于学习 React 来说是一个非常典型且简单的示例.但是我并不会在教程中介绍相关的前置知识,比如 JSX.ES6 等,对于小白来说还是会有一些困惑的地方,所以可能还要了解一下 React 相关的基础知识.虽然 React 有很多值得深究的知识,但这个系列教程主要以浅显易懂…

IE7,8纯css实现圆角效果

众所周知,IE7,8不支持border-radius效果.但我们同样有办法用css实现这个效果,方法就是用border来模拟. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ pos…

vue中使用第三方插件animate.css实现动画效果

vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-class/leave-active-class入场离场属性但是设置的值前面必须加上animated(当然也可以不在transition上设置animated,可以在你所要进行动画的标签上设置class属性为animated)4.也可以加入:duration来统一设置入场和离场时候的时长案例如下 <!…

css实现毛玻璃效果

css实现毛玻璃效果,效果图 1,html代码 <div class="mainHolder"> <div class="textHolder"> <p>this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is Froste…

3.8.1 HTML与CSS简单页面效果实例

HTML与CSS简单页面效果实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML与CSS简单页面效果实例</title> <style> * { margin: 0px; padding: 0px; } body { background-color: snow; } .wrapper { width: 80%; he…

一种巧妙的使用 CSS 制作波浪效果的思路

在之前,我介绍过几种使用纯 CSS 实现波浪效果的方式,关于它们有两篇相关的文章: 纯 CSS 实现波浪效果! 巧用 CSS 实现酷炫的充电动画本文将会再介绍另外一种使用 CSS 实现的波浪效果,思路非常有意思. 从定积分实现曲边三角形面积说起在进入主题之前,先看看这个,在高等数学中,我们可以通过定积分求二次函数曲边图形面积. 我们可以将曲线下的面积分割成 n 个的细高的矩形,当 n 无限趋近于无穷时,所有矩形的面积就等于曲边图形的面积. 两张简单的示意图,图取自为什么定积分可以求面积?:…

css 马赛克悬停效果

css 马赛克悬停效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset=…

CSS 实现打字效果

JS实现最近做项目的时候需要实现一个字符逐个出现的打字效果,在网上一搜有个不错的jQuery插件Typed.js,效果很赞 <div class="element"></div> <script src="typed.js"></script> <script> $(function(){ $(".element").typed({ strings: ["First sent…

纯CSS实现JS效果研究

利用CSS3:checked选择器和~配合实现tab切换效果: 代码: <style> body,div,input,label{ margin:0; padding:0; } #tab>input{ opacity:0; position:absolute; left:0; top:0; } #tab .label{ overflow:hidden; } #tab .label>label{ float:left; width:100px; height:30px; line-…

HTML+CSS页面滚动效果处理

HTML+CSS代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>index</title> <style type="text/css"> body,ul,li{ margin:0px; padding:0px;} body{ background:url(img/bg.jpg) center; }…

canvas/CSS实现仪表盘效果

手机上看比较虚 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas仪表盘动画效果</title> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; } canvas { display: none; bo…

CSS扇形展开效果

知识点预备: [1]CSS3中特别重要的transform中的rotate(),现在transform可以将元素进行2D和3D变形. 2D transform常用的transform-function的功能: translate():用来移动元素,可以根据X轴和Y轴坐标重新定位元素位置.在此基础上有两个扩展函数:translateX()和translateY(). scale():用来缩小或放大元素,可以使用元素尺寸发生变化.在此基础上有两个扩展函数:scaleX()和scaleY().rota…

DIV实现CSS 的placeholder效果

placeholder是HTML5中input的属性,但该属性并不支持除input以外的元素但我们可以使用Css before选择器来实现完全相同的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Div+placeholder</title> <style> .rich{ colo…

css的border效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{width: 100px;height: 100px;margin-top:50px; display: inline-table;} div…

CSS Gradient文字效果

你想创建的标题没有渲染和Photoshop每个标题吗?这里是一个简单的CSS技巧向您展示如何创建渐变文字效果,PNG图像(纯CSS,没有Javascript或Flash).你所需要的是一个空的< span >标记的标题和应用使用CSS背景图像叠加position:absolute.这种方法已经在大多数浏览器测试:Firefox.Safari.Opera,甚至Internet Explorer 6.继续阅读本文找出. VIEWDemos DOWNLOADDemo ZIP 好处这是纯CSS技巧…

CSS制作彩虹效果

今天看到一篇文章,说到margin的塌陷的问题,并提供了好几个例子. 自己之前还没怎么遇到过这个问题,正好来研究一下. <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> css样式一,…

纯css实现幻灯片效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"><head> <…

CSS实现三角形效果

类似三角形的形状的元素在网页中可能会用到,我们可以用图片或者CSS元素达到我们想要的效果.这里讲一下是讲自己使用HTML+CSS实现三角形的方式. 为了能够熟悉的使用HTML+CSS构建三角形,我们首先要熟悉以下代码以及代码所实现的效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>shape</title…

css一些特别效果设定

在CSS中,BOX的Padding属性的数值赋予顺序为 padding:10px; 四个内边距都是10pxpadding:5px 10px; 上下5px 左右10pxpadding:5px 10px 15px; 上5px 右10px 下15px 左因为缺省与右相等,则为10pxpadding:5px 10px 15px 20px; 上5px 右10px 下15px 左20px div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再c…