提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > 应用CSS完成一个悬停过渡动画的项目(超等简朴)【css教程】,css,悬停动画

CSS不一定要写得何等庞杂才完成特殊结果。以下就是三个超等简朴的过渡的例子,可以只是几行代码,然则增加到Web应用程序中,却会让它增色不少。

以下是我们将在本教程中构建的代码

项目设置

在这个项目中,我们将把过渡结果应用到一个class为box的元素上面。这个box元素内部是垂直和程度居中的笔墨内容。HTML构造相称简朴:

<div class='box'>
  <p>TEXT</p>
</div>

CSS代码也一样简朴。我们想要运用无衬线字体,并确保div中的段落文本是白色的,可以经由历程以下代码来完成:

body {
  color: white;
  font-family: Helvetica, Sans-Serif;
}

别的,给box元素增加以下CSS属性:

.box {
  width:200px;                 /* Set the Width of box          */
  height:50px;                 /* Set the Height of box         */
  background:#424242;          /* Dark Grey Background color    */
  transition:all 0.25s ease;   /* Transition settings           */
  display: flex;               /* Use Flexbox on P              */
  align-items: center;         /* Center P                      */
  justify-content: center;     /* Center P                      */
  margin: 10px;                /* Apply a margin around our Box */
}

不管你对CSS的过渡属性熟习与否,我们在这里都来扼要引见一下,一共分为三步。.第一步,我们须要将它应用到all变化的属性。接下来,设置过渡时长为0.25秒。末了,将动画函数选为ease。ease的表现状况就是起止历程比较迟缓,中心过渡敏捷。

holly high! 如今准备工作都已停当,接下来就是增加过渡结果了。到如今为止,div看起来应当像下面如许。

1.退色结果

起首,增加一个退色的过渡。新建一个div元素,并为它增加一个名为fade的类:

<div class='box fade'>
  <p>FADE HERE</p>
</div>

接下来我们所须要做的就是为这个fade类指定悬停划定规矩。我们须要借助CSS伪类选择器:hover来完成这件事变。这个伪类选择器对一切的元素都有用,而且会在元素处于鼠标指针悬停状况下的时刻激活CSS声明。基于此,我们借助:hover选择器将div的透明度改成0.5:

.fade:hover {
  opacity: 0.5;
}

简朴吧。上面这句CSS声明就为div指定了一个悬停结果。以下就是如今它展现的模样。而你之所以可以看到过渡款式,是因为我们一开始在名为box的类中运用了transition:all 0.25s ease;的声明。看下面,是否是一个还不错的退色结果:

2.来点色彩看看

指定一个变色过渡实在和退色过渡的历程殊途同归。起首,建立一个div元素,并为它增加一个名为color的类。

<div class='box color'>
  <p>COLOR HERE</p>
</div>

同样地,我们也要借助:hover选择器来帮我们完成这件事,然则这一次我们不是转变透明度而是背景色:

.color:hover {
  background: #FF5722;
}

以下就是实际结果了:

3.一同摇晃

接下来,来完成一个摆动的结果。这个结果完成起来比前面的两个例子稍显庞杂。在这个例子中,我会采纳@keyframes来完成。

@keyframes——给予你在一个CSS动画序列中掌握中心步骤的魔力。

起首照样一样,你一定已听烦了,建立一个div元素,并未它增加一个名为wiggle的类:

<div class='box wiggle'>
  <p>WIGGLE WIGGLE</p>
</div>

接下来,我们要做的就是借助@keyframes来建立动画。我们先给动画起个名字,就叫wiggle吧。并在以下的代码中增加发抖结果的完成:

@keyframes wiggle {
  20%  { transform: translateX(4px);  }
  40%  { transform: translateX(-4px); }
  60%  { transform: translateX(2px);  }
  80%  { transform: translateX(-1px); }
  100% { transform: translateX(0);    }
}

从上面的代码已可以看出,@keyframes给予我们将动画分解成单步,而且准确定义每一步发生了什么的才能。经由历程百分比的体式格局指定动画的进度:

20%——div相对于初始位置右移4px。

40%——div相对于初始位置左移4px。

60%——div相对于初始位置右移2px。

80%——div相对于初始位置左移1px。

100%——div恢复到初始位置。

如今我们就可以借助:hover选择器来展现wiggle的动画了:

.wiggle:hover {
  animation: wiggle 1s ease;
  animation-iteration-count: 1;
}

我们将animation设置成wiggle。同时愿望动画延续1秒的时长,采纳ease的动画结果。

末了,就是指定动画在每次鼠标指针悬停的时刻触发一次。

下图就是终究的动画结果:

以上就是应用CSS完成一个悬停过渡动画的项目(超等简朴)的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"应用CSS完成一个悬停过渡动画的项目(超等简朴)【css教程】,css,悬停动画"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线