自从有了html5和css3，好多以前只能想想的华丽效果都可以上手实现了。3D 转换(个人认为3D变换更贴切^)就是其中之一。关于3D转换，可以阅读CSS3 3D transform变换，不过如此，文中对3D转换进行了形象、生动、详细的阐述。在这里，只和大家讨论怎么利用3D转换来实现立体及其旋转效果，例如：好吧，废话不多说，上代码！1.页面代码 1<div class="translate3D_test"> 2<ul class="cube"> 3<li class="translate3D_li">1</li> 4<li cla...
终于在凌晨一点钟逼迫自己写博客。一直想记录自己的前端工程师之路，但毕竟拖延症晚期。因为第一篇随笔，所以多写一点废话吧。刚刚从学校毕业，放弃了一直学习的java，而想从事前端的工作。第一是觉得osgi这类的java框架实在太过笨重和繁琐，也许是真的好用，但也觉得真心不适合我。然后么，也许有点俗，前端真的能做很多华丽花哨的东西出来。到现在也工作一个月了，工资不高，老板不好，但社会毕竟不会总让人满意，没人有手把手教...
复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> dl { position:absolute; width:389px; height:154px; border:10px solid #eee; } dd { margin:0; width:389px; height:154px; overflow:hidd...
.print{width:250px;white-space:nowrap;overflow:hidden;-webkit-animation: dy 3s steps(60, end) infinite;animation: dy 3s steps(60, end) infinite; } @-webkit-keyframes dy{ from { width: 0;} } @keyframes dy{ from { width: 0;} }HTML<p class="print">欢迎来到我的地盘</p> 原文：http://www.cnblogs.com/binmengxue/p/5369192.html
这效果看起来挺炫，但原理并不复杂，能实现一片花瓣动起来，就能实现9片花瓣。效果的叠加而已。 HTML： 复制代码代码如下:<section class="demo"> <div class="box"> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> </div> </section> CS...
30种炫酷CSS3鼠标滑过按钮动画特效效果演示：http://www.htmleaf.com/Demo/201510282718.htmlCSS3鼠标hover按钮过渡动画效果演示：http://www.htmleaf.com/Demo/201708104678.html基于css3的各种新颖的鼠标hover图片动画效果演示：http://www.htmleaf.com/Demo/20141018225.html16种基于Bootstrap的css3图片hover效果演示：http://www.htmleaf.com/Demo/201703134400.html原文：https://www.cnblogs.com/he-qiang/p/8615153.html
首先trasition:transform只是单单表示后面只要有含有的tranform的所有属性可以参与动画，而trasition:all表示后面所有动画属性都可以参动画，当父容器有relative时，子容器有absolute，子容器会跟着父容器相对定位。当你想要然后一个父元素里面的子元素开始动画时间不同或者运动时间的不同，可以用nth-of-type，例如我们可以使p元素<p>运动0.5s</p><p>运动0.2s</p>，格式为：nth-of-type(1){trasition-delay:0.5s;},nth-of-type(2)...
此处{ } <>全部用（）代替CSS: form,p （ margin-bottom:30px; margin-left:20px;） .shadow,.one,.two,.three,.four,.five,.six （ height:50px; width:280px; border:1px solid #CCC; ） .shadow （ -moz-box-shadow: inset 0 0 10px #CCC; -webkit-box-shadow: inset 0 0 10px #CCC; box-shadow: inset 0 0 10px #CCC; ） .one （ -moz-box-shadow:5px 5px; -webkit-box-shadow:5px 5px; box-shadow:5px 5px;...
CSS3 文本效果CSS3中包含几个新的文本特征。在本章中您将了解以下文本属性：text-shadowword-wrap浏览器支持Internet Explorer 10, Firefox,Chrome, Safari, 和 Opera支持text-shadow 属性。所有的主流浏览器支持自动换行（word-wrap）属性。注意： Internet Explorer 9及更早IE版本不支持 text-shadow 属性.CSS3的文本阴影CSS3中，text-shadow属性适用于文本阴影。您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：h1 { ...
http://jsfiddle.net/8Tb6x/先是HTML 一个父div包含四个绝对定位的div<div class=‘container container--realistic‘><div class=‘cube cube--ani‘><div class=‘face‘>1</div><div class=‘face‘>2</div><div class=‘face‘>3</div><div class=‘face‘>4</div></div> </div> 首先，一个静态的立方体 .face:nth-child(1) {-webkit-transform: /*rotateY(0deg)*/ translateZ(2.5em /* half the side length, 5em in this cas...
鼠标hover 以后。图片上面出现一个遮罩, 透明度变化， 显示设置好的文字的文字，完全使用css 实现，下图是效果 关键代码 复制代码代码如下:.featured-image:hover { opacity: 0.9; color: #fff; background: rgba(0,0,0,0.8); } 看源码吧 复制代码代码如下:<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #content article { float: left; margin-right: 4%; max-width: 236px; positi...
如今，这种利用CSS制作圆角的技术已经得到了大多数主流浏览器的支持，包括Safari，谷歌浏览器，IE，Opera和火狐浏览器。下面让我们来看看border-radius的语法，解释，以及IE是如何支持它的。语法和说明在CSS3中用来生成圆角效果的属性是border-radius.这个属性跟大家熟知的width等属性的用法相似：复制代码代码如下:.roundElement { border-radius: 10px;}上面的这句代码的作用是设置一个元素的四个角的弧度半径值都为10px。你也可...
我们在做js动画的时候，很多时候都需要做回调处理，如在一个动画完成后触发一个事件、一个动画完成后执行另外一个动画等等，但在使用CSS3动画时能不能捕获到运动的状态做回调处理呢？CSS3动画也是可以做回调处理的，这里分为两个属性，一个是transition[w3c文档]，另外一个是animation[w3c文档]。1、transition对于transition，可以监听transitionend事件，当动画完成时触发，可以这样使用：复制代码代码如下:<!DOCTYPE html>...
刚发现一个网站上面的3D立方体效果挺好看的，就模仿着用CSS3实现了一个类似的效果：http://1.huizit1.applinzi.com//CSS/transform_3D/cube_3D.html这样的3D透视效果主要是用了perspective和transform-style: preserve-3d;这两个属性。然后在相应的元素上添加transform就行了。先看一下布局结构：<div class="container"><div class="box"><ul class="cube_1"><li><img src="../Img/1.jpg"></li><li><img src="../Img/2.jpg"></li>...
* {margin: 0;padding: 0;font-family: "Poppins",sans-serif; } body {display: flex;justify-content: center;align-items: center;background:rgb（76,79,64）; } .container {position: relative;height: 600px;width: 1200px;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;padding: 30px;}.container .card {position: relative;max-width: 300px;height: 300px;background: #fff;margin: 30px...