网站子域名什么意思学做ps的网站

当前位置： 首页 > news >正文

网站子域名什么意思,学做ps的网站,企业网站开发要学什么,长沙百度一、背景 本文章是用于解释上一篇文章中的问题#xff0c;如果会动画的小伙伴就不用再次来看了#xff0c;本文主要讲解一下动画的设定规则#xff0c;以及如何在元素中添加动画#xff0c;本文会大篇幅的讲解一下#xff0c;动画属性。注意#xff0c;这是css3的内容如果会动画的小伙伴就不用再次来看了本文主要讲解一下动画的设定规则以及如何在元素中添加动画本文会大篇幅的讲解一下动画属性。注意这是css3的内容默认认为已经了解了css的知识。 二、如何配置动画规则 关于如何定制动画规则想必看过我的轮播图那篇文章的小伙伴们已经不陌生了接下来我就简单的说一下如何去定制动画规则。 1、首先动画规则是通过keyframes 动画名【注意动画名称任意但是建议见名知意】。 2、在动画名称之后使用花括号来定义相关的规则例如让盒子的宽高变化或者是移动元素。 3、定制的阶段可以分为简单的写法但是有缺点只能设置开始和结束的状态。 4、另一种就是相对复杂的百分比写法相对复杂但是更灵活建议使用百分比定制但是还是要根据实际情况选择这里不做限制。 1、简单写法 keyframes animation {from{元素开始的状态}to{元素目标状态} } 2、百分比  keyframes animation {0%{状态一【开始状态】}25%{状态二}50%{状态三}75%{状态四}100%{状态五【目标状态】} } 注意当使用百分比写法的时候阶段是可以自由拆分的同样也是根据具体情况具体定制。 三、相关属性介绍 关于属性方面我们先来说一下基本的一些属性大家肯定有一个疑惑动画规则有了但是如何添加到元素上呢那么接下来就来聊一聊如何去为元素添加动画规则。 1、基本属性使用 1、首先添加动画规则需要使用animation-name来声明动画的名称也就是动画规则中的名称。 2、那么动画一定是有时间的所以接下来了就需要设定时间时间是通过animation-duration来设定的值的单位是秒【s】或者毫秒【ms】。 以上就是动画的基本使用如果你只是想回忆一下自己学过的动画知识那么想必看到这里已经想起来不少了如果你是小白那么继续阅读下去相信会给你带来不菲的价值。 2、其他属性的使用 刚刚介绍完两个基本的属性有了以上的两个属性再加上动画规则就可以做到一个简单的动画但是我们的目的也一定不是简简单单的让元素动一下那和过渡属性又有什么区别呢那么接下来就一起来看一下动画的其他有趣的属性。 1、animation-delay         这是一个延时属性就像是他的字面意思这个属性会让动画在开始的时候延长一段时间之后再开始动画的播放接下来演示一下。 bodydiv classbox/div/body style.box {width: 100px;height: 100px;background: orange;animation-name: moveR;animation-duration: 2s;animation-delay: 2s;}keyframes moveR {0% {transform: translateX(0);}20% {transform: rotate(360deg);background: pink;}50% {background: blue;border-radius: 50%;}to {transform: translateX(1000px);background: red;}}/style 效果展示 延迟属性就说到这里。 2、animation-timing-function         这个属性是用来定义过渡形式的用来固定元素的动画节奏。 选择器 {animation-timing-function:ease(慢快慢,默认值)linear(匀速)ease-in(先慢后快)ease-out(先快后慢)ease-in-out(慢快慢相对于ease更慢一点)step-start(不考虑过渡时间直接就是终点)step-end(过渡时间到直接到终点)steps(数值)(步长一段一段的过渡)cubic-bezier(.88,.54,.35,1.79)贝塞尔曲线 这个属性就不做演示喽把这个机会留给大家这个属性和transition中的过度形式是一样的。 3、animation-interation-count         这个属性是用来定义动画播放次数的可以是1次或者是多次也有一些固定的属性例如infinite这个属性值的意思就是动画会一直运动。具体使用可以看css—轮播图实现-CSDN博客文章浏览阅读636次点赞6次收藏18次。CSS样式来实现图片的切换效果。它不依赖于JavaScript运行速度较快并且具有较好的兼容性。https://blog.csdn.net/m0_64387122/article/details/144049330?spm1001.2014.3001.5502这篇文章就使用到了这个属性大家可以去看一下也是可以学习到一些知识的。 4、 animation-direction         这个属性是用来定义动画的运动方向的         animation-direction: normal(左到右默认值)/reverse(反向)/alternate(来回滚动)/alternate-reverse(反向来回滚动) 从左到右和反向也就是从右到左就不进行演示了还是比较好理解的接下来就来演示一下来回滚动。 接下来我们来看一下代码 bodydiv classbox/div/body style.box {width: 100px;height: 100px;background: orange;animation-name: moveR;animation-duration: 2s;animation-iteration-count: 3;animation-direction: alternate;}keyframes moveR {0% {transform: translateX(0);}20% {transform: rotate(360deg);background: pink;}50% {background: blue;border-radius: 50%;}to {transform: translateX(1000px);background: red;}}/style 其中的animation-direction: alternate;属性就是控制元素来回滚动的重要环节。 5、 animation-fill-mode         这个属性是用来定义动画以外的状态也就是动画最后会停在那里 结构 animation-fill-mode: forwards(停止在最后一帧)/backforwards(停止在第一帧) 这里就不延时停在第一帧了这是默认的。接下来我就来演示一下停止在最后一帧。效果如下 bodydiv classbox/div/body style.box {width: 100px;height: 100px;background: orange;animation-name: moveR;animation-duration: 2s;animation-fill-mode: forwards;}keyframes moveR {0% {transform: translateX(0);}20% {transform: rotate(360deg);background: pink;}50% {background: blue;border-radius: 50%;}to {transform: translateX(1000px);background: red;}}/style 6、animation-play-state         这个属性是用来定义动画播放状态的。 结构 animation-play-state: paused(暂停)/running(运行默认值) 默认值是运行状态的所以同样不做演示只演示暂停的使用搭配hover伪类可以实现交互的效果。效果如下 style.box {width: 100px;height: 100px;background: orange;animation-name: moveR;animation-duration: 2s;animation-iteration-count: infinite;animation-direction: alternate;animation-fill-mode: forwards;}keyframes moveR {0% {transform: translateX(0);}20% {transform: rotate(360deg);background: pink;}50% {background: blue;border-radius: 50%;}to {transform: translateX(1000px);background: red;}}.box:hover {animation-play-state: paused;}/style 从效果中可以清楚的看到当鼠标放在元素上时会静止元素的运动。 四、属性的符合写法 animation: moveR 2s 0.5s linear infinite alternate-reverse; 符合写法就是将之前介绍的属性进行合并使用也是比较推荐的写法。这个就比较简单了就不再重复解释了。  五、结语 感谢大家的耐心阅读希望这篇文章能给您带来一些启发和帮助。如果您有任何疑问或建议请随时在评论区留言我会尽快回复今天的分享就到这里了如果您觉得这篇文章还不错请点赞、分享给更多的朋友吧同时也欢迎关注我的博客获取更多精彩内容。