css3动画 | 易学教程

CSS3

阅读更多关于 CSS3

文本效果 1、text-shadow 文本阴影（艺术字） h1{ text-shadow: 5px 5px 5px #FF0000; /*4个参数：水平阴影、垂直阴影、模糊的距离、阴影颜色*/ } 2、text-overflow 文本溢出 p{ text-overflow: clip; /*剪掉溢出的文本*/ text-overflow: ellipsis; /*用省略号...代替溢出的部分来显示，最常用*/ } overflow可以处理所有的溢出，text-overflow专用于文本溢出。我们可以在:hover伪类中设置overflow/text-overflow，当鼠标移到内容上时，显示全部|完整内容。 3、word-break 单词换行拆分方式 p{ word-break:break-all; /*如果换行处的单词过长，会拆分单词，并不会加连词线*/ word-break: keep-all; /*如果换行处的单词过长，会转到下一行显示*/ word-break: normal; /*使用浏览器默认的换行符*/ } 边框 1、圆角边框 div{ border:1px solid red; border-radius:5px; /*设置圆角大小，数值越大，越圆*/ } border-radius需要和border | backgroud-image | background

CSS3 动画

阅读更多关于 CSS3 动画

动画：动画同过渡有些相似，格式如下 div{ animation:myfirst 5s; /*动画名持续时间*/ -webkit-animation:myfirst 5s; /*Safari 与 Chrome*/ } @keyframes myfirst /*动画效果*/ { from {background: red;} to {background: yellow;} } @-webkit-keyframes myfirst /* Safari 与 Chrome */ { from {background: red;} to {background: yellow;} } 多属性动画 @keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari 与 Chrome */ { 0%

CSS3之太阳系动画效果

阅读更多关于 CSS3之太阳系动画效果

效果如下：代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ background: #000; } .sun{ width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; /*保证居中*/ transform: translate(-50%;-50%); background: yellow; border-radius: 50%; box-shadow: 0 0 30px 3px gold; } .earth{ width: 350px; height: 350px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border:1px solid #ccc; border-radius: 50%; /*animation: whirl 5s linear infinite;*/ } .earth::before{ content: ""; width: 40px;

css3 animation 实现书页加载icon

阅读更多关于 css3 animation 实现书页加载icon

使用css动画实现类似微信读书加载图标的效果，效果图如下：实现过程页面DOM，定义一个 book-icon 容器，里面有 page-left、page-right 两个书页，书页内各有 3 个 <span> 表示行。 <div class="book-icon"> <div class="page-left"> <span></span> <span></span> <span></span> </div> <div class="page-right"> <span></span> <span></span> <span></span> </div> </div> book-icon 、page 、span 的样式 .book-icon { width: 15em; height: 9em; border: 0.4em solid #ddd; border-radius: 0.8em; display: flex; background-color: #f5f5f5; } .icon-left, .icon-right { width: 50%; padding: 1.2em; display: flex; flex-direction: column; justify-content: space-around; } .icon-right { border-left: 0