css3动画

CSS3基础

由 江枫思渺然 提交于 2019-11-29 16:34:17
内容： 1.圆角 border-radius 2.阴影 text-shadow、box-shadow 3.渐变 linear、radial 4.rgba rgb+alpha opacity 5.transform 6.动画 transition、animation 1.圆角 border-radius 通过设置元素的border-radius值，可以轻松给元素设置圆角边框，甚至实现绘制圆、半圆、四分之一的圆等各种圆角图形： (1)只设置一个值 只设置一个值得情况常用来给button加圆角边框，或者画一个圆形按钮，仅需设置一个数值，即可给元素的四个边角设置统一的圆角弧度 1 .box {width:300px; height:300px; background:#CCC; margin:10px auto 0; border-radius:10px;} 效果： (2)四个方向的值分别设置 border-radius属性其实是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性的简写模式，因此，border-radius : 30px;，其实等价于border-radius : 30px 30px 30px 30px;

Css3动画效果,彩色文字效果,超简单的loveHeart

由 微笑、不失礼 提交于 2019-11-29 16:12:51
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Css3动画效果,彩色文字效果,超简单的loveHeart</title> <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"> </head> <style type="text/css"> *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100%; overflow: hidden; background: linear-gradient(to right,pink,white) no-repeat; } .warp{ margin: 50px auto; width: 80%; height: 100%; } .hearts span{ position: absolute; top: 24px; left: 15px; font-family: "华文行楷"; z-index: 999; } .hearts { float: left; width: 200px; height: 200px; position: relative;

css3 图片翻转

由 大城市里の小女人 提交于 2019-11-29 15:48:03
图片翻转效果主要由CSS3 动画效果执行，JS 只是控制类名变换 先来看看HTML： 这里两个都是块元素所以要注意正面和背面在一块 肯定是固定在一块的，position:absolute; CSS3动画 CSS代码 <style type="text/css"> .in { -webkit-animation-timing-function: ease-out; -webkit-animation-duration: 350ms; animation-timing-function: ease-out; animation-duration: 350ms; } .out { -webkit-animation-timing-function: ease-in; -webkit-animation-duration: 225ms; animation-timing-function: ease-in; animation-duration: 225ms; } .flip { -webkit-backface-visibility: hidden; -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when

css3 3d 与案例分析

由 不想你离开。 提交于 2019-11-29 13:35:21
作者：魔洁 聊到3d那我们就先聊聊空间维度，首先一维，比如一条线就是一个一维空间，连点成线在这个空间里这些点只能前进后退，二维空间就是一个平面，这时点不仅可以前进后退还可以左右移动，3维空间也可以说是3d，这时点可以前进后退，左右，上下移动。css3里有几个关于3d运动的属性以及值我做一下解释 transform-style:preserve-3d;（transform-style是属性）（preserve-3d是值） （这个属性可以把一个处于2维的div变为3d空间，把这个属性比作一个相机的摄像头,这个div内的内容会以3d的形式通过摄像头的形式反馈给你,他的子元素才会享受3d效果,子元素以下的元素就不会有3d效果。） perspective:800px; （这个属性是配合上边的属性使用的 ，把这个属性比作你的屏幕距离摄像头的距离） transform:rotateY(180deg); (把这个3d空间div看做一个人rotateY(180deg)，是做y轴旋转180°，y轴可以看作是一个人原地转身) transform:rotatex(180deg); （rotateY(180deg)，是做x轴旋转180°，x轴可以看作是一个人原地翻跟斗） transform:rotateZ(180px); （rotateZ(180px)，是在前进180px

CSS3 animaion 和 transition 比较

由 為{幸葍}努か 提交于 2019-11-29 08:23:20
animation是CSS3的动画属性，可以设置以下六种属性。 transition是CSS3的过度属性，可以设置以下四种属性。 从属性上分析，animation可以设定循环次数。 其次，两者的触发条件不同，transition通常和hover等事件配合使用，由事件触发。animation则和gif动态图差不多，立即播放。 所以： 1. 如果要灵活定制多个帧以及循环，用animation. 2. 如果要简单的from to 效果，用transition. 3. 如果要使用js灵活设定动画属性，用transition. 来源： https://www.cnblogs.com/RainyBear/p/11493382.html

css3动画-加载中...

由 会有一股神秘感。 提交于 2019-11-29 06:04:42
写几个简单的加载中动画吧。 像前面三种都是相当于几个不同的点轮流来播放同一动画：变大变小。css3里面有一个用于尺度变换的方法： scale( x , y ) ： 定义 2D 缩放转换，改变元素的宽度和高度 。 第四种就是一个小球从上往下跌落，再弹回去，在上面的时候速度最小，下面的时候速度最大。由于该小球只进行了上下的移动，所以我们可以运用： translateY( n )：定义 2D 转换，沿着 Y 轴移动元素， 从而实现小球沿Y方向来回移动。 废话不多说了，上代码。 首先，第一个加载中的动画： 1 < div id ="loading1" > 2 < div class ="demo1" ></ div > 3 < div class ="demo1" ></ div > 4 < div class ="demo1" ></ div > 5 < div class ="demo1" ></ div > 6 < div class ="demo1" ></ div > 7 </ div > html Code 1 .demo1 { 2 width : 4px ; 3 height : 4px ; 4 border-radius : 2px ; 5 background : #68b2ce ; 6 float : left ; 7 margin : 0 3px ; 8

css3特效插件wow.js

由 不羁的心 提交于 2019-11-29 03:36:30
在使用css3写特效的时候，会遇到比较麻烦的就是css3代码需要大量的调试，但是现在有了wow.js，让写特效变得简单了很多。 wow.js官网 https://www.delac.io/wow/index.html 使用教程： 第一步：wow.js依赖于 animate.css ，首先需要在 head内引入animate.css或者animate.min.css。 <link rel="stylesheet" href="css/animate.css"> 第二步：引入wow.js或wow.min.js，然后js文件里面写一行代码。 <script src="js/wow.min.js"></script> <script> new WOW().init(); </script> 第三步：然后在对应的块状元素，添加相应的class类名，就可以实现动画。 <div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></div> wow：是必须要添加的； slideInLeft：说明了动画的样式，是从左边滑动出来的； data-wow-duration：动画持续时间； data-wow-delay：动画延迟时间；

css3实现椭圆轨迹旋转

由 ￣綄美尐妖づ 提交于 2019-11-29 02:43:35
css3实现椭圆轨迹旋转 实现效果 X轴Y轴在一个矩形内移动 做斜线运动 1 .ball { 2 position: absolute; 3 animation: 4 animX 2s linear infinite alternate, 5 animY 2s linear infinite alternate 6 } 7 @keyframes animX{ 8 0% {left: 0px;} 9 100% {left: 500px;} 10 } 11 @keyframes animY{ 12 0% {top: 0px;} 13 100% {top: 300px;} 14 } 设置动画延时 设置Y轴延时为动画时长的一半, 运动轨迹变成菱形 1 .ball { 2 animation: 3 animX 2s linear 0s infinite alternate, 4 animY 2s linear -1s infinite alternate 5 } 设置三次贝塞尔曲线 1 .ball { 2 animation: 3 animX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate, 4 animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate 5 }

css3动画水波纹、波浪

由 ╄→尐↘猪︶ㄣ 提交于 2019-11-29 00:09:19
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html{ font-size: 20px; } body{ background:#444; } @-webkit-keyframes opac{ from { opacity: 1; width:0; height:0; top:50%; left:50%; } to { opacity : 0; width:100%; height:100%; top:0; left:0; } } .animate .w2{ /*延迟1s*/ -webkit-animation-delay:1s; } .animate .w3{ -webkit-animation-delay:2s; } .animate .w4{ -webkit-animation-delay:3s; } .wave{ width: 22.7rem; height: 22.7rem; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; } .wave *{ border:1px solid #fff; position

css3动画@keyframes示例

由 孤者浪人 提交于 2019-11-28 22:14:42
.active { animation: chuiziza 0.5s ease 1 forwards; } .feijindan { display: block; animation: fei 2s ease 1 forwards; } @keyframes fei { 0% { transform: scale(0); } 100% { transform: scale(1); top: 50%; right: 50%; margin-right: -301px; margin-top: -301px; } } @keyframes chuiziza { 20% { transform: rotate(30deg); transform-origin: right bottom; } 50% { transform: rotate(0deg); } 60% { transform: rotate(20deg); } 100% { transform: rotate(0deg); } } 来源： https://www.cnblogs.com/chenluqing/p/11429551.html
订阅 css3动画