效果:http://hovertree.com/texiao/css3/20/效果图:代码如下:<!doctype html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3鼠标悬停图片上浮显示描述特效 - 何问起</title><base target="_blank"/><link rel="stylesheet" type="text/css" href="http://hovertree.com/texi...
昨晚上闲的没事突然想做几个小loading效果,下面是昨晚上做的几个小案例,分享给大家 1.水波loading:这个loading是我觉得非常简单,但是看上去的效果却非常不错的一个小loading 这个是效果图片 下面我直接把代码放上来,大家需要的可以直接拉走 核心思想:(旋转,以及overflow:hidden属性),可以把代码中的overflow属性注释掉,保准你看一眼明白了,看不明白回来找我,我对你负责 <!DOCTYPE html> <html...
用纯css3和html来制作一些社交媒体的图标,虽然没有图片和javascirpt,css3配合 html也能实现这些图标。html代码如下:复制代码代码如下:<div class="content"> <ul> <li class="facebook"><a href="#non" title="Share on Facebook">Facebook</a></li> <li class="twitter"><a href="#non" title="Share on Twitter">Twitter</a></li> <li class="rss"><a href="#non" title="Subscribe to the RSS feed">RSS</a></li> ...
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#wrap{width: 300px;height: 300px;margin: 100px auto;background: pink;opacity: 0.1;}#inner{width: 100px;height: 100px;background: deeppink;}</style></head><body><div id="wrap"><div id="inner">inner</div></div></body></html>设置文字阴影 <!DOCTYPE html><html><head><meta charset="UTF-8"><titl...
好程序员web前端技术之CSS3过渡,css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值transition-property:检索或设置对象中的参与过渡的属性transition-duration:检索或设置对象过渡的持续时间transition-delay:检索或设置对象延迟过渡的时间transition-timing-function:检索或设置对象中过渡的动画类型简写:...
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style> *{margin: 0;padding: 0;} .hover {width: 500px;height: 500px;background-color: red;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;transition: all 0.5s linear;} .hover:hover, .hover:focus, .hover:active {-webkit-transition: all 0.5s linear;-moz-transition: al...
从这篇文章开始,会利用几个篇幅,我将跟大家分享 从CSS1到CSS3都是如何实现页面布局的(当然,所指的范畴是利用CSS技术)。由于盒子模型技术内容比较多,这篇文章我将着重讲解知识点。下一篇文章,我会带领大家开发一个兼容 pc端浏览器和 移动端浏览器的弹性布局web界面的实例。希望大家能从中领受到CSS3在布局方面的强大功能。好了,长话短说,现在开始我们的《CSS3中的弹性流体盒模型技术详解》之旅吧!在讲解CSS3中新增的弹性布局...
原文地址今天我们来探索一下Carl Philipe Brenner的网站上一个微妙而有趣的动画效果。当鼠标经过网格元素时,会有一个微妙的动画发生——网格元素变得透明,每条边有个顺时针的动画,创造了非常好的效果。这种效果是通过JS给span标签的宽或者高做了动画。我们待会会用SVG和CSS渐变来完成。注意,这个技术还是实验性的。首先,让我们来看看基本的概念,然后我们会朝着这个方向努力。请注意,我们将在SVG上使用CSS过渡,可能无法得到...
在线演示 本地下载原文:https://www.cnblogs.com/datiangou/p/9986695.html
Flexbox模型的三个规范:1. 旧版本 2009年 display: box、inline-box2. 混合版本 2011年 display: flexbox、inline-flexbox3. 新版本 display: flex、inline-flex 当display属性为以上时,将为其后代创建FFC(Flex Formatting Context)。旧版本属性如下:1. box-orient 定义伸缩主轴的方向 horizontal | vertical | inline-axis (内联轴排列)| block-axis (块轴排列)2. box-directio...
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工。美你妹啊,请叫我前端工程师好不好。呃。。好吧,攻城尸。。。呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3的动画就绝对是值得你拥有了,虽说IE9以及更早版本的IE浏览器都不支持css3动画,但是IE6-8浏览器已是江河日下,使用谷歌浏览器、火狐浏览器、IE10+浏览器以及移动端浏览器等这些支持css3动画的浏览器的人数越来越多,所以如果...
CSS3 边框:border-radius(倒圆角)box-shadow (盒子阴影)border-image (边界图片)CSS3 背景:background-size(属性规定背景图片的尺寸。)background-origin(属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域)CSS3 文本效果:text-shadow(可向文本应用阴影,可以设置水平阴影、垂直阴影、模糊距离,以及阴影的颜色)word-wrap(word-wrap 属性允许您允许文本强制文本进行换...
1. 边框(圆角边框、加阴影和用图片绘制)新增加 border-radius box-shadow border-image.div1{ border:2px solid purple; border-radius: 25px; -moz-border-radius:25px;(火狐老版本) width:600px; height:300px; box-shadow:10px 10px 5px #888888; -webkit-border-image: url(border.png) 2 2 round;(chrome)}2.背景新增加 background-size background-origin background-clip.div1{ bord...
CSS3,html5:各种属性,有酷炫的效果兼容性问题:政府大多数政府机构都是用的IE6.7,所以很多时候要兼容IE6.7,IE连PNG格式都不支持margin:本身有兼容性问题,在其他地方可能有问题padding:内边距还好一些APP端只有一个兼容性问题,屏幕,要自适应屏幕两种方法:(腾讯的autoSize,js)(metaholder.js 连rem都可以不用,用px都可以)手机端只有屏幕兼容性问题,所以常用CSS3,html5CSS3扩展:浏览器有兼容性问题,有些可以在浏览...
-moz代表firefox浏览器私有属性 -ms代表ie浏览器私有属性 -webkit代表safari、chromecontenteditable="true" 内容变的可编辑onpaste="return false" 表示不能粘贴,用于input或不能粘贴的div、span、p标签等onselectstart="return false" 不能复制文本内容-moz-user-select:none; 在火狐下面设置样式不能选择插入样式表的方法有三种: 1、外部样式表(.css文件引入...