css3里面的animation属性非常强大，但是自己用的比较少，最近有次面试就刚好被问到了，趁现在有时间就对animation做一个小总结。同时实现一个逐帧动画的demo作为练习animation属性一览 因为animation属性比较多，然后在w3c上看有点蛋疼，干脆也做了一份导图，以后想查看，就一目了然了使用animation实现逐帧动画 熟悉了animation的属性之后，得找个简单的小项目实现下，逐帧动画好有意思，先跑一个满足下自己思路很简单，就是给元素...
查看效果：http://hovertree.com/texiao/css3/4/效果2 效果图： 代码如下：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 href="http://hovertree.com/texiao/css3/4/hovertreeplan...
上次开完飞机，这次开火车查看效果：http://hovertree.com/texiao/css3/7/效果图：代码如下：DOCTYPE html> <html> <head> <meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /> <title>纯CSS3实现动态火车行驶特效 - 何问起</title><base target="_blank" /> <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/css3/7/hovertreetrain.css"> </head> <body>...
实现css水平垂直居中的方法有很多，在这里我简单的说下四种比较常用的方法： 1.使用CSS3中的Flex布局 对于flex，我们要了解的是它是一个display的属性，而且必须要给他的父元素设置flex属性(flex必须配合绝对定位使用！！！！！)，除了设置display：flex之外，还有另外两个属性需要设置，分别是justify-content和align-items，他们的意思分别是水平居中和垂直居中。HTML+CSS代码如下：body {position: absolute;width: 100%;height...
CSS3作为新兴的前端技术可以实现很多复杂变化的效果，比如文字描边。这里主要用到text-shadow属性，顾名思义就是为文字加上阴影效果。例：text-shadow:10px 5px 2px #f60; /*text-shadow:x位移 y位移 模糊程度 颜色 */其中:x位移和y位移表示阴影相对文字的偏移值，可以为负值。 思路其实很简单：对四个方向都作出模糊程度为零的1px阴影。-webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -moz-tex...
一、最终效果需求：gift图片的小动画每隔2s执行一次。 需求就一句话，我们看一下实现过程。 二、实现过程 1、网页结构DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>a {display: inline-block;background-color: #cc2222;text-decoration: none;color: #fff;font-size: 14px;padding: 10px 12px;width: 100px;position: relative;}.ico {position: absolute;width: 14px;height: 16px...
效果：http://hovertree.com/texiao/css3/21/本文所用到的CSS知识请点击效果展示也中第一和第二个链接。代码：DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>css3实现光标悬浮滚动菜单 - 何问起</title><base target="_blank" /> <meta charset="utf-8" /> <style> html{height:100%;font-family: Roboto Condensed;} body{min-height:100%; background-image: -webk...
本篇文章给大家带来的内容是关于CSS3实现的11种基本图形代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。CSS3圆角#css3-circle{width: 150px;height: 150px;border-radius: 50%;}CSS3 椭圆形css3 radius#css3-elipse{width: 200px;height: 100px;border-radius: 50%;}CSS3 三角形#css3-triangle{width: 0;height: 0;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bot...
本篇文章给大家带来的内容是关于纯CSS3实现3D翻转效果的代码示例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。作为前端开发人员的必修课，CSS3能带我们完成许多基本动效，本期我们将用CSS3实现hover翻转效果~第一步非常简单，我们简单画1个演示方块，为其添加transition和transform属性：// 本示例均使用Sass语法 .block {width: 200px;height: 200px;background: brown;cursor: pointer;transition: 0.8s;&:...
主要通过CSS3中transform属性实现，首先给元素设置成3D元素，然后定义六个面的样式再通过transform属性对其进行旋转即可实现旋转立方体效果如今随着CSS3的不断成熟和发展，我们可以利用CSS3变换样式，translateZ，rotateX，rotateY，rotateZ，径向渐变，线性渐变，透视等属性创建一个可以旋转的3D立方体。接下来在文章中将为大家具体介绍如何通过CSS3实现这个旋转立方体效果。具有一定参考价值，希望对大家有所帮助【推荐课程：CSS...
本篇文章给大家带来的内容是关于CSS3实现微信小程序瀑布流布局的代码示例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1.column-count 属性规定元素应该被分隔的列数：-moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari 和 Chrome */ column-count:3;2.column-gap 属性规定列之间的间隔：-moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari 和 Chr...
本篇文章给大家带来的内容是关于CSS3中box-shadow属性实现的阴影效果总结，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果，该属性几乎可以让你完成你想要的任何阴影效果。然而 box-shadow 属性语法和取值非常灵活，对于新手有点不容易理解。今天总结一下语法和 box-shadow 属性各种阴影效果。语法/* offset-x | offset-y | color */ box-shadow: 60px...
本篇文章给大家带来的内容是关于css3如何实现元素环绕中心点布局（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。效果如图：代码实现：<style>*{margin: 0;padding: 0;box-sizing: border-box;}.surround-box,.center-point{position: absolute;top: 50%;left: 50%;width: 20px;height: 20px;margin-left: -10px;margin-top: -10px;border-radius: 50%;background-color: #000;}.circle{/* 这里一...
CSS3中要实现自动换行的效果可以通过word-break属性或者word-wrap属性来实现在CSS3中有一个新的属性可以让文本自动换行，尤其在内容多的文本中换行是一件很重要的事，接下来在文章中将为大家介绍有哪些换行属性以及它们的用法【推荐课程：CSS3教程】word-break属性自动换行属性，使用word-break属性，可以让浏览器实现在任意位置换行它有三个属性值分别为：normal： 浏览器中的默认换行行为break-all：可允许在单词内换行 keep-...
通过CSS3中的animation属性来设置动画名称，动画时间、速度以及动画是否循环播放来实现雪花飘落的效果今天将要分享的是利用CSS3中的animation属性来实现雪花飘落的效果，具有一定的参考效果，希望对大家有所帮助。【推荐课程：CSS3教程】制作背景图片我们可以利用电脑中的画图软件，绘画上你想绘制的图案，比如像小星星，雪花，爱心等等。本例中在画布上绘制一个黑色的背景然后再画上雪花程序思路：首先给body加一个与图片背景颜色...