css3动画 | 易学教程

css3动画创意

阅读更多关于 css3动画创意

css3动画创意鼠标指向前：鼠标指向后：代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Open Sans',sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #000000; } .square { position: relative; width: 400px; height: 400px; display: flex; justify-content: center; align-items: center; } .square span:nth-child(1) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #FFFFFF; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;

CSS3

阅读更多关于 CSS3

1、introduction 2、selector1 3、selector2 4、border&background1 5、border&background2 6、border&background3 7、text1 8、text2 9、box1 10、box2 11、box3 12、homework 13、transition 14、cubic-bezier 15、animation 16、animation2 17、step 18、step2 19、rotate 20、scale 21、skew 22、translate+perspective 23、perspective2 24、matrix 25、screen&px 26、gpu&layout CSS3响应式布局 CSS3炫酷转轴展开照片列表 3D酷炫动画特效 CSS3响应式布局项目开发来源： https://www.cnblogs.com/lisalisalisa/p/12240351.html

HTML和HTML5、css和css3的区别

阅读更多关于 HTML和HTML5、css和css3的区别

HTML和HTML5的区别: 其实说白了，就是ES5和ES6的区别，HTML是前端搭建页面的必须品，但是随着人们开发的需求和速度，后期维护和代码可读性，各个方面的需求不断增加，会发现HTML里面的一些标签满足不了，所以就更新换代，不断的更具需求整合添加了一部分新的元素标签进来，其中常用的有如下这些，如有不全请谅解，仅供参考: 新增的结构标签： 1、header元素表示页面中一个内容区块或真个页面的标题。 2、hgroup元素表示对真个页面或页面中的一个内容区块的标题进行组合。 3、article元素表示页面中一块与上下文不相关的独立内容。比如一篇文章。 4、aside元素表示article元素内容之外的、与article元素内容相关的辅助信息。 5、footer元素表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。还有以下一些也会经常用到，如新的表单控件，比如 calendar、date、time、email、url、search；用于媒介回放的 video 和 audio 元素；用于绘画的 canvas 元素，这些都是新增的一些非常强大的标签，多多研究对我们的提升有非常大的帮助的。 css和css3的区别: 同理,其实和上面讲的HTML区别一样，都是升级版，在原来的基础上添加了一些常用的新属性，下面列举了一些

CSS3动画旋转与滤镜

阅读更多关于 CSS3动画旋转与滤镜

animation属性-动画 1.IE10,Firefox和Opera支持animation属性，Safari和Chrome用-webkit-animation替换。 2.animation有以下几个值。值作用 animation-name 规定Keyframe要调用的名称 animation-duration 动画完成所需时间(s或ms) animation-timing-function 动画执行的速度曲线 animation-delay 开启动画的延迟 animation-iteration-count 播放次数 animation-direction 是否轮流反向播放动画 3.动画执行速度曲线默认是ease，其是低速➡加速➡变慢三阶段完成动画，还有以下五组值。值作用 linear 全程速度相同 ease-in 全程慢➡快 ease-out 全程快➡慢 ease-in-out 全程慢➡快➡慢 cubic-bezier(n,n,n,n) 四个参数可设置0~1的数值 4.动画的播放次数默认是1，可通过animation-iteration-count设置指定次数或设置为infinite(无限播放)。 5.动画默认是正常播放的，可通过设置animation-direction:alternate来实现轮流反向播放。 6.示例：把一个div从0位置向下移动

CSS3:变换和动画

阅读更多关于 CSS3:变换和动画

<html> <style> .container{ -webkit-perspective: 800; -webkit-perspective-origin: 50% 40%; } .img{width:200px; padding:20px;} .trans{ border:1px solid #333;height:100px;width: 200px;margin: 20px; float: left; } .trans_rotata{ -webkit-transform:rotate(7deg); } .trans_rotataX{ -webkit-transform:rotateX(60deg); } .trans_3d{ -webkit-transform:rotate3d(1,-1,0,60deg) } .opacity{ opacity: 0.2; } .trans_scale{ -webkit-transform:scale(1.1, 1.1); } .trans_scale3D{ -webkit-transform:scale3D(1.1, 1.1, 1.1); } .img:hover{ -webkit-transform:scale3D(1.1, 1.1, 1.1); } .trans_skew{ -webkit-transform:skew(30deg

学习使用 CSS3 制作网站面包屑导航效果

阅读更多关于学习使用 CSS3 制作网站面包屑导航效果

　　作为最重要的导航展示形式之一，面包屑导航能够让用户更清楚的知道他们所在页面的层次结构，让他们可以方便的导航到上一层页面。在本教程中，您将学习如何使用 CSS3 技术创建自己的面包屑导航效果。效果演示插件下载详细教程 HTML示例代码： <ul id="breadcrumbs-one"> <li><a href="">Lorem ipsum</a></li> <li><a href="">Vivamus nisi eros</a></li> <li><a href="">Nulla sed lorem risus</a></li> <li><a href="">Nam iaculis commodo</a></li> <li><a href="" class="current">Current crumb</a></li> </ul> CSS示例代码： #breadcrumbs-one{ background: #eee; border-width: 1px; border-style: solid; border-color: #f5f5f5 #e5e5e5 #ccc; border-radius: 5px; box-shadow: 0 0 2px rgba(0,0,0,.2); overflow: hidden; width: 100%; } #breadcrumbs

css3 3d变换和动画——回顾

阅读更多关于 css3 3d变换和动画——回顾

1.transform-style 属性指定嵌套原始是怎样在三维空间中呈现。　　语法：transform-style: flat | preserve-3d 　　　　　　flat 表示所有子元素在2D平面呈现。　　　　　　preserve-3d 表示所在元素在3D空间中呈现。 2.perspective 定义3D元素距视图的距离，以像素计，当为元素定义perspective 属性时，其子元素获得透视效果，而不是元素本身　　语法：perspective: number | none; 　　　　　　number 元素距离视图的距离，以像素计。　　　　　　none 默认值，与0 相同，不设置透明。 3.perspective-origin 属性定义3D元素所基于的X轴和Y轴，该属性允许您改变3D 元素的底部位置，定义的这个属性，它是一个元素的子元素，透视图，而不是元素本身。　　语法：perspective-origin: x-axis y-axis 　　　　x-axis 定义该视图在x轴上的位置。　　　　y-axis 定义该视图在y轴上的位置。示例：　　<style> 　　　　.box{width:60px;height:60px;padding:40px;border:2px solid #000;margin:30px auto; -webkit-transform

css3实现时钟效果

阅读更多关于 css3实现时钟效果

css3实现时钟效果 <div class="clock"> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> <div class="line line4"></div> <div class="line line5"></div> <div class="line line6"></div> <div class="cover"></div> <div class="hour"></div> <div class="minute"></div> <div class="second"></div> <div class="center"></div> </div> * { padding : 0 ; margin : 0 ; } .clock { width : 300px ; height : 300px ; border : 10px solid #ccc ; /*border-radius: 160px;*/ /*百分比参照元素的实际宽高*/ border-radius : 50% ; margin : 100px auto ; position : relative ; } .line { width : 8px ; height :

css3中的过渡效果和动画效果

阅读更多关于 css3中的过渡效果和动画效果

一、CSS3 过渡（一）、CSS3过渡简介 CSS3过渡是元素从一种样式逐渐改变为另一种的效果。实现过渡效果的两个要件：规定把效果添加到哪个 CSS 属性上规定效果的时长定义动画的规则过渡transition （作用）将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值” （二）、transition属性语法： {transition：属性名持续时间过渡方法} transition-property 属性的名字（如果是一个属性就带有这个属性的名字；如果是多个属性，属性名之间用逗号隔开；如果是所有属性，用all表示即可。）表示对哪个属性进行变化。 transition-duration 变化持续的时间长度（秒或是毫秒） transition-timing-function 过渡实现的方式（比如说，先慢后快/先快后慢），具体实现的时候是以函数来实现的。 transition-delay 过渡开始前等待的时间，单位为秒或是毫秒。 transition-timing-function 属性取值 linear 匀速（线型过渡） ease 先慢后快再慢 ease-in 先慢后快 ease-out 先快后慢 ease-in-out 开头慢结尾慢，中间快实例：原有的状态是灰底红字，鼠标悬停在上面利用transition属性设置了一个3s 之内的变化

CSS3: 快速制作页面加载动画

阅读更多关于 CSS3: 快速制作页面加载动画

介绍3个简单的案例：案例1： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>页面加载动画</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/loader1.css"> </head> <body> <div class="loader"> <div class="circle"></div> <div class="circle"></div> </div> </body> </html> /* 通用样式 */ *{ padding: 0; margin: 0; box-sizing: border-box; } body{ font-family: sans-serif; font-size: 18px; line-height: 1.6; background: linear-gradient(135deg,

订阅 css3动画