实现效果为如下：在同一页面下，当我选中输入手机号时，出现手机号输入框，当我选中输入验证码时，出现验证码输入框，当我选中设置密码时，出现密码框 在这里有一个小技巧，就是 1.对下面的输入框设置同样的样式，保证在更换的时候不出现抖动；2.对输入框区域一开始就设置display：none。让其不显示，在上方单选框checked的时候再显示出来。html代码如下：<div class="main1"><input type="radio" name="regist" id="regist1" che...
标签云是博客的标配功能，能够清晰的呈现博客的各个关键词和主题。在这个效果中，您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果。 作为实验项目，使用了 CSS3 渐变，阴影和最重要的的 CSS 变换特性。 效果演示 源码下载 您可能感兴趣的相关文章Web 开发中很实用的10个效果【源码下载】精心挑选的优秀jQuery Ajax分页插件和教程12个让人惊叹的的创意的 404 错误页面设计让网站动起来！12款优秀的 jQuery 动画插件十...
给我一个渐变的效果鼠标移入能看到效果<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">.d1{width: 200px;height: 200px;background: green;position: relative;overflow: hidden;} .d2{width: 200px;height: 200px;z-index: 1;position: absolute;} .d2:before{content: "";position: absolute;width: 100%;height: 100%;top: 100%;background: red;z-index: -2;transition: all 0.5...
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><style type="text/css">* {margin: 0;padding: 0;}.q-loading-2 {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: #ffebeb;display: flex;j...
概要层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。熟练掌握CSS的基本原理可以实现更好的页面交互效果，提升用户的使用体验。代码实现新建文件夹social-3d-hover，social-3d-hover下新建index.html和style.css文件，index.html引入...
一、CSS3实现兼容性渐变背景效果，兼容FF、chrome、IE渐变效果，现在主流的浏览器FF、Chrome、Opera、IE8+都可以通过带有私有前缀的CSS3属性来轻松滴实现渐变效果，IE7及以下也可以通过滤镜来实现渐变效果（滤镜来实现会消耗大量资源）？为什么滤镜实现渐变效果会消耗大量资源 呵呵，菜鸟，什么都不懂，就只会百度了。见笑了。原因是：由于IE内部在解析滤镜，也是通过大量的CPU计算，从而达到滤镜效果，最后再渲染。二、各浏览...
代码如下：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100,500); html {background-color: #eeedef;}#container {position: absolute;top: 50%;left: 50%;margin-right: -50%;opacity: 0.9;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%,...
写了一个小Demo,用html,css渲染的时钟效果: Html代码:<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>css实现时针</title><link rel="stylesheet" href="css/style01.css" /></head><body><div class="watch"><ul class="num num1"><span>1</span></ul><ul class="num num2"><span>2</span></ul><ul class="num num3"><span>3</span></ul><ul class="num num4"><span>4</span></ul><ul class="num num5"><span>5</sp...
复制代码代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script type="text/javascript" src="js/prefixfree.min.js"></script> <title>用css3实现鼠标移进去当前亮其他变灰</title> </head> <style type="text/css"> *{margin: 0;padding: 0;font-size:12px;} .wrap...
四行文字会逐次掉落:<style type="text/css"> @-webkit-keyframes fadeInDown1 {0% {-webkit-transform: translate3d(0, -20px, 0);transform: translate3d(0, -20px, 0);opacity: 0;}100% {-webkit-transform: none;transform: none;opacity: 1;} } .div111{background:#0099ff;width:300px;height:100px;} .div111 p{opacity:0;} .anima p:nth-of-type(1){-webkit-animation: fadeInDown1 .5s ease-in-out .5s forwards;} .anima...
早上没事干，感觉字体阴影的效果还是好看的，那么就来一个小demo吧！1、这是html 简单的有一个标签或者盒子都可以复制代码代码如下:<div class="demo11">我爱考试</div>2、css样式，用css3编写样式，感觉还不错。复制代码代码如下:.demo11 { border: 1px dashed #f2b; height: 150px; width: 250px; text-align: center; line-height: 150px; margin: 0 auto; font-size: 50px; color: orange; text-sh...
CSS3的transform:scale()可以实现按比例放大或者缩小功能。CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。效果如下图所示：1、当未鼠标未放到图片上的效果： 2、当鼠标放到图片上后(放大的过程是有动画过渡的，这个过渡的时间可以自定义)：代码如下：<!DOCTYPE html> <html> <head> <meta c...
1、阴影box-shadow语法：box-shadow: h-shadowv-shadowblurspreadcolor inset;h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊距离。但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；spread可选。阴影的尺寸。color可选。阴影的颜色。请参阅 CSS 颜色值。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，建议不要省略此参...
大家已经开始在项目中使用一些CSS3动画效果了吧，这让网站在高端浏览器上看起来很上流。animate.css是一个老外做的各种CSS3动画的合集，比较全，也很炫，大家可以参考学习一下。项目主页：http://daneden.me/animate/自定义下载样式：http://daneden.me/animate/build/git地址：https://github.com/daneden/animate.css原文：http://www.cnblogs.com/mixzo/p/4213606.html
我们在做导航标签的时候，有时会出现空间过于拥挤需要隐藏部分内容的情况，所以在这里我自己写了一个鼠标悬停显示扩展内容的效果，如下图所示。 总的来说效果还是比较好实现，但是比较头疼的是三角部分使用了伪元素::after，而对父元素设置over-flow:hidden时也会把伪元素给隐藏掉。最后想的办法是把文字和图标用一个 <span> 包裹住然后对其设置over-flow属性。 HTML代码：1<div id="nav">2<a id="nav-main"><span><i class="icon-...