龙空技术网

web开发之-前端css(6)

踢球的打工仔 277

前言:

当前朋友们对“css如何实现鼠标放上去改变颜色”大致比较重视,同学们都需要分析一些“css如何实现鼠标放上去改变颜色”的相关知识。那么小编同时在网上汇集了一些对于“css如何实现鼠标放上去改变颜色””的相关内容,希望你们能喜欢,兄弟们快快来了解一下吧!

css除了用来设置样式外,还可以设置各种特效,我们常用到的特效有两种:过渡和动画,过渡需要响应事件更改样式属性来触发,而动画,不需要响应事件就可以执行,下面我们看下,这两种实现的方式;

css样式过渡

我们添加一个div块,当鼠标移动上去后,更改它的颜色:

<html>    <head>        <title>css</title>    </head>    <body>        <div class="trans-cla">            我是过渡动画        </div>    </body>    <style>        .trans-cla{            width:100px;            height: 100px;            background-color: yellow;            transition: background-color 2s;        }        .trans-cla:hover{            background-color: red;        }    </style></html>

注:由于这里是一个过渡动画,大家可以手写一下试一下,过渡主要是用的

transition: background-color 2s;表示当background-color的值改变时,由当前的值到最后设置的值需要持续2秒;

.trans-cla:hover:表示鼠标移动到这个class的div块时,这个div块的背景颜色变为红色。这个过程持续2秒;

还有两个属性:

transition-timing-function:指定过渡的类型;

transition-delay:设置延迟执行的时间;

css样式动画

有的时候我们打开一个页面,会看到某些元素会自动执行一个动画,这里我们在打开一个页面时,页面的div元素从左边移动到右边,字体颜色变为红色:

<html>    <head>        <title>css</title>    </head>    <body>        <div class="anim-cla">            我是自动动画        </div>    </body>    <style>        .anim-cla{            width:100px;            height: 100px;            background-color: yellow;            animation: lefttoright 10s forwards;            position: relative;        }        @keyframes lefttoright {            from{left:0px;}            to {left:500px;color:red}        }            </style></html>

注:

@keyframes 动画名称:这个用来定义一个css动画,例如:@keyframes lefttoright 定义了一个lefttoright动画, from 表示开始时候的值 ,to表示最后变换后的值,这里可以添加百分比用来表示动画播放过程中到某个进度时的样式,例如可以把from改成0%,to改成100%,中间你可以主动添加其他的百分比并设置样式,设置的样式在后方使用大括号{}包括起来,写上此时改变的百分比;

animation:用来设用动画,例如animation: lefttoright;10s表动整个动画播放10s,forwards设置播放完成后,停止在最后的位置,这个相当于你设置了 animation-fill-mode的属性,这个里面的很多属性大家可以查手册挨个试一下,同样的animation-delay用来设置延迟播放的时间;

标签: #css如何实现鼠标放上去改变颜色