css3幻灯片换位效果 .flowGallery {width:810px; height:540px; position:relative; z-index:100;}.flowGallery input {position:absolute; left:-9999px;}.flow {padding:0; margin:0; list-style:none; width:810px; height:540px;}.flow li {width:150px; height:100px; position:absolute;}.flow li img {display:block; width:100%; height:100%;}.flow li.c1 {left:0; top:0;-webkit-transition:0.5s 0.05s;-moz-transition:...
总是能看见很多广告或者网站都是使用整屏滚动的效果，一直看着都心痒痒，想自己也实现一个。最近刚学习到css3的动画效果，所以尝试使用css3做了一个整屏切换。 页面结构 实现思路与大众方法类似，如图 每个section就是一页内容，它的大小充满了屏幕（红色区域），一个container由多个section构成，我们通过改变container的位置，来达到页面切换的效果。container向下走，页面好像上移了，container向上走，页面就下移了。 ...
昨晚用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记…… PS:如需转载，请注明出处！ 第1种效果： 代码如下： .loading{ width: 80px; height: 40px; margin: 0 auto; margin-top:100px; } .loading span{ display: inline-block; width: 8px; ...
很棒的CSS3立体效果http://www.999jiujiu.com/ .list_case_left{position:absolute;left:10%;font-size:130px;font-weight:800;color:#fff;text-shadow:1px 0px #009807, 1px 2px #006705, 3px 1px #009807, 2px 3px #006705, 4px 2px #009807, 4px 4px #006705, 5px 3px #009807, 5px 5px #006705, 7px 4px #009807, 6px 6px #006705, 8px 5px #009807, 7px 7px #006705, 9px 6px #009807, 9px 8px #006705, 11px 7px #009807, 1...
还记得之前分享过一款CSS3图片悬停放大特效，效果非常不错。今天我们要再来分享一款类似的CSS鼠标滑过放大突出效果，只不过之前那个是图片，这次是色块，其实掌握了其CSS原理，任何网页元素都可以实现这种突出放大的CSS3动画特效。效果图如下： 在线预览 源码下载 实现的代码。 html代码： ...
1.outline的直角与圆角 来给个div： 来再给个样式： 1 .use-outline{ 2 3 width: 200px; 4 height: 200px; 5 background: #009dda; 6 margin: 100px 40px; 7 border-radius: 10px; 8 border: 10px solid #c24263; 9 10 11 outline: 20px solid #26C2A7;12 -moz-outline-radius: 30px;13 14 ...
原文出处： 郭锦荣 前言前两天我刚发布了一篇CSS3实现小黄人动画的博客，但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片，并自己用PS抠出需要实现动画的部分，最后才完成的动画效果。但是，其实我的初衷是想体验一下用图片做动画的赶脚，但是找不到素材，才无奈用了最笨的方法来满足自己的需求，本想勉强能看就行了。可是呢，还是抵不住自己内心的完美，于是乎，用了一个晚上用CSS3画出了小黄人再实现类似的动...
转盘 @charset "utf-8";body { font-family: 黑体; -webkit-font-smoothing: antialiased; background-color: #f4f4f5;}.container-fluid { padding: 0;}.row { margin: 0;}.col-xs-12 { padding: 0;}@keyframes mycircle { 0% { transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); } 10% { transform: rotate(36...
热火朝天的css3无疑吸引了很多前端开发者的眼球，然而在css3中的动画属性则是新功能中的主打招牌，说到css3的动画属性不得不让人想起这三个属性：Transform?Transition?Animation。 transform属性虽然看起来可以实现动画的效果，但本质其实是静态的，说白一点其实就是一个图形的变形工具；而transition属性是一个简单 的动画属性，操作起来非常的简单；在这里主要为大家介绍Animations属性，这是个名副其实的动画属性，虽然官方也没...
我用css3的transition实现动画效果，在单页面下是完全没有问题的，问题在于我做一个手机翻页的效果，当将要翻到这一页的时候我把这个页面的内容清空，只留下背景图，同时把透明度调低，然后当这个页面呈现出来，再动态添加节点，这个时候transition的效果没有出现，直接出来的是变换以后的效果，贴上测试代码 .section { text-align: center; font: 50px "Microsoft Yahei"; ...
目标：实现照片墙布局和鼠标经过图片时的动画效果 涉及知识点：CSS3的动画、过渡、变形（缩放），绝对定位与相对定位 疑点：绝对定位与相对定位对页面元素显示层次的影响 参考极客学院布道师iwen的课程 源码?? html部分： CSS部分(picwall.css)： *{ margin: 0px;}body{ backgroun...
随着浏览器的不断进步和更新，许多的新特性也崭露头角。许许多多以前需要用 gif 图片或者是 flash 实现的效果，现在使用 CSS 就可以实现了。消耗部分计算能力，从而大大减少了流量的交换。 今天要介绍的是 CSS3 中的3D效果，以及非常新的透视功能。 3D变换效果 CSS3 的3D效果是使用 transform 属性的 rotateX(Y, Z), translateX(Y, Z), scaleX(Y, Z)方法进行设置的。 一个元素如果进行3D变换，它在3D空间的初始位置是这样的...
今天把页面遮罩的效果发一下，之前遮罩都是用JS实现的，忽然发现CSS3里面的box-shadow属性除了做立体阴影外，还可以做页面的遮罩~~~~ 下面来看一下完成的动态效果： 从上图可以看出，就是当鼠标悬浮在按钮上时，会出现整个页面的遮罩，当然调一下透明度就是网页中经常看到的当鼠标悬浮在一张图片上时，周围的其他图片都被遮罩了，这样就达到了突出这张图片的效果，其实这个效果做出来很简单~~~~~ 一、主体程序： ...
CSS3的3D转换效果详解介绍:本章介绍一下CSS3的3D转换效果，此效果的实现依靠的是transform属性，3D转换只是此属性的部分应用，更多相关内容可以参阅CSS3的transform属性总略介绍一章节。掌握3D转换效果，可以从三个方法作为突破口，分别是rotateX, rotateY, rotateZ，在2D变换过程中rotate()函数的应用，它表示旋转的意思，由于是2D变换，所以它只是在一个平面进行旋转，所以无需细分，具体可以参阅CSS3的2D转换效果详细介绍一章节...
主要使用border-radius属性实现圆，半圆，定位坐标覆盖部分模块。 半圆： width: 50%; height: 100%; border-radius:100% 0 0 100% /50% 0 0 50%; 太极图 .taiji{position: relative; width: 200px; height: 200px; border-radius: 50%; background-color: #fff;border:solid 1px #ccc; animation: spin 6s linear infinite;/*动画设置*/} .tj_1{position: absolute; top: 0px; width:...