FCC---Use CSS Animation to Change the Hover State of a Button---鼠标移过,背景色变色,用0.5s的动画制作
You can use CSS @keyframes
to change the color of a button in its hover state.
Here's an example of changing the width of an image on hover:
如下是鼠标移过图片,宽度变化的小动画
<style>
img:hover {
animation-name: width;
animation-duration: 500ms;
} @keyframes width {
100% {
width: 40px;
}
}
</style> <img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />
练习题目:
Note that ms
stands for milliseconds, where 1000ms is equal to 1s.
Use CSS @keyframes
to change the background-color
of the button
element so it becomes #4791d0
when a user hovers over it.
The @keyframes
rule should only have an entry for 100%
.
练习代码:
<style>
button {
border-radius: 5px;
color: white;
background-color: #0F5897;
padding: 5px 10px 8px 10px;
} button:hover {
animation-name: background-color;
animation-duration: 500ms;
}
@keyframes background-color {
100% {
background-color: #4791d0;
}
}
</style>
<button>Register</button>
效果如下:
无
问题:
因为持续时间只设置了0.5s,所以动画结束,按钮的颜色就变暗了。
如果希望鼠标放在上面,按钮一直保持高亮
通过如下设置,可以改进:
That's great, but it doesn't work right yet.
Notice how the animation resets after 500ms
has passed, causing the button to revert back to the original color.
You want the button to stay highlighted.
This can be done by setting the animation-fill-mode
property to forwards
. The animation-fill-mode
specifies the style applied to an element when the animation has finished. You can set it like so:
animation-fill-mode: forwards;
所以添加后代码:
<style>
button {
border-radius: 5px;
color: white;
background-color: #0F5897;
padding: 5px 10px 8px 10px;
}
button:hover {
animation-name: background-color;
animation-duration: 500ms;
/* add your code below this line */
animation-fill-mode: forwards;
/* add your code above this line */
}
@keyframes background-color {
100% {
background-color: #4791d0;
}
}
</style>
<button>Register</button>
FCC---Use CSS Animation to Change the Hover State of a Button---鼠标移过,背景色变色,用0.5s的动画制作的更多相关文章
- CSS Animation triggers text rendering change in Safari
薄荷新首页上周五内测,花哥反馈在 MacBook Safari 浏览器下 鼠标移动到第一个商品的时候后面几个商品的文字会加粗.这是什么鬼??? 待我回到家打开笔记本,鼠标蹭蹭蹭的发现问题远不止如此: ...
- No.6 - 利用 CSS animation 制作一个炫酷的 Slider
*{ margin:; padding:; } div{ margin: auto; width: 800px; height: 681px; position: relative; overflow ...
- 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider
前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...
- CSS animation & CSS animation 101
CSS animation 101 如何为 Web 添加动画效果. https://github.com/cssanimation/css-animation-101 https://github.c ...
- CSS Animation
div { /* Chrome, Safari, Opera 等使用webkit引擎的浏览器*/ -webkit-animation-name: myfirst; /*规定 @keyframes 动画 ...
- CSS魔法堂:更丰富的前端动效by CSS Animation
前言 在<CSS魔法堂:Transition就这么好玩>中我们了解到对于简单的补间动画,我们可以通过transition实现.那到底多简单的动画适合用transtion来实现呢?答案就是 ...
- CSS中的onmouseover和hover有什么区别
它们一样是因为:都是鼠标落上去的时候触发的.它们不一样是因为:onmousemove是javascript里面的,他可以触发js命令,但是hover做不到,hover只是css样式的类,只能定义样式. ...
- [CSS3] Make a One-time CSS Animation that Does Not Revert to its Original Style
We'll add animation to patio11bot using CSS keyframes. When defining a CSS animation, you can add it ...
- 超链接标签的CSS伪类link,visited,hover,active
CSS伪类,是一种特殊的类,它针对到CSS选择器起作用,使选中的标签或元素产生特定的效果. CSS伪类的语法就是: 选择器 : 伪类名 { 属性 : 属性值 } 用的最多的伪类就是超链接a的伪类,有: ...
随机推荐
- spring源码分析6: ApplicationContext的初始化与BeanDefinition的搜集入库
先前几篇都是概念的讲解:回顾下 BeanDefinition 是物料 Bean是成品 BeanFactory是仓库,存储物料与成品 ApplicationContext初始化搜集物料入库,触发生产线, ...
- .net core web api 添加对session跨域实现
1.配置Startup /ConfigureServices添加: services.AddSession(options => { options.Cookie.Name = ".A ...
- C# 使用WM_COPYDATA传输数据(两个窗体间通信)
//发送方 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data ...
- js闭包理解案例-解决for循环为元素注册事件的问题
转发自http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html 一.变量的作用域 要理解闭包,首 ...
- docker中安装宝塔面板
我的电脑是win10,安装的virtualbox其上装的ubutun14,ubutun也安装了docker,今天我补充一个完整的操作流程.怎么在docker中安装宝塔面板?先打个岔,这些命令总是记不住 ...
- WebGIS小理论(持续更新)
什么是OWC服务体系 它是开放地理空间协会(Open Geospatial Consortium,OGC)提出的OGC Web服务通用规范. 主要内容: 地理数据服务(Data Service) 对空 ...
- raspberry-gpio-python(树莓派GPIO与Python编程)
国外的设计接口设计得很棒,包括问题:读脏与防抖,还包括读这个数据提供了两种方式,一种是阻塞等待方式,还有一种是回调函数,前一种是通讯中常用的方式,后一种来自系统架构设计的整体性考虑.这种硬件接口设计的 ...
- Java总结转载,持续更新。。。
1.Java中内存划分 https://www.cnblogs.com/yanglongbo/p/10981680.html
- LINUX上安装JDK+tomcat+mysql操作笔记
1.环境准备: 1-1.centos 64位(本人的虚拟机安装此系统),安装步骤和网络配置已经在前两篇记录. 1-2.JDK 版本1.8 1-3.tomcat压缩包 1-4.CRT远程连接工具(可用其 ...
- WPF 在使用 ItemsSource 之前,项集合必须为空
原文:WPF 在使用 ItemsSource 之前,项集合必须为空 <DataGrid x:Name="datagrid" ItemsSource="{Bindin ...