css3动画效果属性
文章目录
- border-radiu
- transition
- transform
- animation
- sprite
border-radiu
作用是为 div 元素添加圆角边框;border-radius属性其实是由border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性组合而成,它有三种表示方法,分别是px;%,em.
它的设置顺序为:border-radius:左上角、右上角、右下角、左下角。也可以只用一个值,表示所有的角都使用这个值。
*注:在设置对象为圆形的时候,如果使用了border、padding等情况时,对象的实际显示宽高已经不再是设置的width和height的数值,如果border-radius设置的值仍为原本的width和height的一半,可能达不到预期的真正的圆形的效果。
transition
给对象添加一些动画交互效果,使过渡更自然。
过渡transition是一个复合属性,它包含四个属性:
- transition-property: 过渡属性(默认值为all)
- transition-duration:过渡持续时间(默认值为0s)
- transiton-timing-function: 过渡函数(默认值为ease函数)
- transition-delay: 过渡延迟时间(默认值为0s)
如果综合使用过渡会让网页更生动有趣,富有交互性。
transition经常和hover使用,表示当鼠标鼠标移动上去来拥有对应的效果。可以和transform此类变形属性混合使用。
- https://www.cnblogs.com/xiaohuochai/p/5347930.html深入了解
transform
用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜
语法一般为: transform: none|transform-functions;
常用的值有
值 | 属性 |
---|---|
none | 定义不进行转换。 |
matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵。 |
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换,使用 16 个值的 4x4 矩阵。 |
translate(x,y) | 定义 2D 转换。 |
translate3d(x,y,z) | 定义 3D 转换。 |
translateX(x) | 定义转换,只是用 X 轴的值。 |
translateY(y) | 定义转换,只是用 Y 轴的值。 |
translateZ(z) | 定义 3D 转换,只是用 Z 轴的值。 |
scale(x[,y]?) | 定义 2D 缩放转换。 |
scale3d(x,y,z) | 定义 3D 缩放转换。 |
scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 |
rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
perspective(n) | 为 3D 转换元素定义透视视图。 |
*如果想更准确的了解transform,可以在https://www.cnblogs.com/zero-zm/p/9911657.html查看
如果将过渡和变形混合使用,就可以做到如下。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="one.css"><title>过渡</title>
</head>
<body><div class="one"><div class="first"><span>变圆</span><img src="data:images/1.jpeg" ></div><div class="second"><span >放大</span><div class="gu"><img src="data:images/2.jpeg" ></div></div><div class="third"><span>旋转</span><img src="data:images/3.jpeg" ></div><div class="fourth"><span>掉色</span><img src="data:images/4.jpeg "></div></div>
</body>
</html>
css属性如下
body{background-color: #000000;padding: 40px;
}
.one{display: flex;justify-content: space-between;}
.first,.second,.third,.fourth{display: flex;color: white;flex-direction: column;
}
span{text-align: center;
}
img{margin-top: 20px;width: 200px;height: 200px;border: 8px solid #ffffff;border-radius:10px ;transition: all 3s ;
}
.first img:hover {border-radius: 50%;box-shadow: 0 0 20px 5px #ffffff;
}
.gu{margin-top: 20px;width: 200px;height: 200px;overflow: hidden;border: 8px solid #ffffff;display: inline-block;border-radius:10px ;transition: all 3s;
}
.second img{margin-top: 0;border: 0px;border-radius:0 ;
}
.second img:hover{transform: scale(2);
}
.gu:hover{box-shadow: 0 0 20px 5px #ffffff;}
.third img:hover{transform: rotate(3600deg);box-shadow: 0 0 20px 5px #ffffff;
}
.fourth img:hover{box-shadow: 0 0 20px 5px #ffffff;filter: grayscale(1);}
animation
为对象设置动画,animation语法为:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
它由六个动画属性组成
- animation-name 指定要绑定到选择器的关键帧的名称
- animation-duration 指定动画完成所需的秒数或毫秒数
- animation-timing-function 指定动画的速度曲线
- animation-delay 指定动画开始之前的延迟
- animation-iteration-count 指定应播放动画的次数
- animation-direction指定动画是否应在交替循环中反向播放
- animation-fill-mode 指定动画在执行之外应用的值
- animation-play-state 指定动画是运行还是暂停
和animation息息相关的的属性是@keyframes;用来创建动画,语法为
@keyframes animationname {keyframes-selector {css-styles;}};
keyframes-selector:动画持续时间的百分比,可能的值:0-100%、from (和0%相同)、to (和100%相同)。您可以用一个动画keyframes-selectors;
指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同,0%是开头动画,100%是当动画完成;例如:
@keyframes go {0% {}50%{}100%{}
}
*两者结合使用可以完各种动画操作。
sprite
允许你将一个页面涉及到的所有零星图片都包含到一张大图中去;好处是,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。这在网速不快的年代经常使用。
CSS Sprites非常值得学习和应用,特别是页面有很多很小的icon(图标)。
优点
- CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这是CSS
Sprites最大的优点,也是其被广泛传播和应用的主要原因; - CSS Sprites能减少图片的字节;曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
- CSSSprites解决了网页设计师在图片命名上的困扰,只需对一张集合的图片命名,不需要对每一个小图片进行命名,从而提高了网页制作效率。
-CSSSprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
缺点
- 图片合并麻烦:图片合并时,需要把多张图片有序的合理的合并成一张图片,并留好足够的空间防止版块出现不必要的背景。
- 图片适应性差:在高分辨的屏幕下自适应页面,若图片不够宽会出现背景断裂。
- 图片定位繁琐:开发时需要通过工具测量计算每个背景单元的精确位置。
- 可维护性差:页面背景需要少许改动,可能要修改部分或整张已合并的图片,进而要改动css。在避免改动图片的前提下,又只能(最好)往下追加图片,但这样增加了图片字节。
一般使用精灵技术,需要配合一些制图软件一起使用,小工具有些小工具,
如“Css Sprite Tools”、“CSS Satyr ”,“iwangx”
用法有:
.bg_sprite{background-image:url(/整图地址); background-repeat:no-repeat}#ico1 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}#ico2 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}#ico3 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}.nav {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}当然也有简写方法:#ico1 {width:容器宽度;height:容器高度;background:url(/整图地址) no-repeat X坐标 Y坐标;}
*CSS Sprites技术加速的关键,并不是降低质量,而是减少个数,当然随之而来的增加内存消耗,CSS Sprites图片繁琐的合成等缺点在网站性能的提升前,也就不足为道了。简单来说就是,现在网速快的情况,精灵技术用处并没有那么显著,但是在一些特定的连接上还是有很大作用的。
css3动画效果属性相关推荐
- 解决css3动画效果在360兼容模式跟猎豹浏览器下不兼容
360跟猎豹采用的都是谷歌(WebKit内核)跟IE(Trident内核)的双内核,360浏览器分为极速模式(WebKit内核)和兼容模式(Trident内核),这就导致兼容模式下不支持css3动画效 ...
- css 右上角 翻开动画_27个精致的CSS3动画效果源代码下载
CSS主要用于控制网页的外观,CSS代码可以随意变化网页的布局和网页的内容样式.当CSS3出现以后,更是可以让网页增添了不少动画元素,随着IE6,7的淘汰,手机端的崛起更是让它成熟了许多.CSS3动画 ...
- CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码...
CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...
- Html+css3动画效果
Html+css3动画效果 开发工具与关键技术:DW 作者:彭春怡 撰写时间:2019/1/16 1.下面是通过html+css3完成的一个动画效果,"跳跳球".实现的代码如图所示 ...
- CSS3动画效果大全
CSS3动画效果大全 /* animation */ .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-an ...
- 用css3动画效果做的跑动效果
用css3动画效果做的跑动效果 用到的图片 创建两个盒子 css样式 思路大概是给boxmax设置宽高,能容下一个小人即可,overflow: hidden;使溢出盒子的图片隐藏,再分成七个动画阶段, ...
- 35个让人惊讶的 CSS3 动画效果演示
本文收集了35个惊人的 CSS3 动画演示,它们将证明 CSS3 Transform 和 Transition 属性的强大能力.CSS 是网页设计非常重要的一部分,随着越来越多的浏览器对 CSS3 支 ...
- CSS3 动画 animation属性
@keyframes只是用来声明一个动画,而动画本身并不执行任何操作.因此,如果希望为某个元素应用动画,还需要把动画与该元素关联起来. 如果一个动画没有与任何元素关联,它就不会被调用,也就不会产生动画 ...
- CSS3 动画效果
CSS3 @keyframes 规则 要创建CSS3动画,你将不得不了解@keyframes规则. @keyframes规则是创建动画. @keyframes规则内指定一个CSS样式和动画将逐步从目前 ...
最新文章
- oracle监听显示未成功_理解 oracle 的 lsnrctl status
- linux cgi转发串口数据库,CGI连接数据库的方法
- MPLS ×××-IPv4地址结构
- Service Mesh 是新瓶装旧酒吗?
- 参数注入:使用java配置参数的方法,springboot的方法
- System.Drawing.Common workaround in .NET6
- go语言服务器运行,Go语言实现Web服务器
- 古时候中状元到底是一种怎样的体验?
- putty界面最友好的颜色配置参考
- gradle错误 dependency.systemPath‘ for com.alibaba:jconsole:jar must specify an absolute path
- 用C#打造quot;QQ对战平台挤房器quot;
- 二分排序(java)
- 手把手教程9-2: 460使用Flash模拟EEPROM
- 客户端连接服务器,配置出错“连接超时”或者“无监听程序”解决方法
- 2019年高考数学立体几何解题技巧分析策略
- 数据中心模块化、标准化、预制化、定制化、智能化……傻傻分不清楚?大咖来帮你!...
- NYOJ-61 传纸条 双线动态
- 强大的JSON格式化和编辑工具zjson
- (智慧农业,现代农业,数字农业解决方案)
- React——react-router-dom V6 使用