css3怎么设置鼠标经过圆角放大到消失

WBOY
Freigeben: 2022-06-14 16:32:13
Original
1470 Leute haben es durchsucht

方法:1、利用“:hover”选择器设置鼠标经过元素时的样式,语法为“元素:hover{样式代码}”;2、在鼠标经过的样式代码中利用“元素{animation:名称 时间}”语句给元素绑定动画;3、利用“@keyframes fadenum{100%{border-radius:0;}}”语句设置圆角放大到消失的效果即可。

css3怎么设置鼠标经过圆角放大到消失

本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

css3怎么设置鼠标经过放大圆角到消失

1、:hover伪类选择器设置样式

css中:hover是一个伪类选择器,:hover伪类选择器在鼠标移到元素上时向此元素添加特殊的样式。:hover选择器适用于所有元素。

:hover在鼠标移到链接上时添加的特殊样式。

在IE中必须声明“”才能保证“:hover”选择器能够有效

2、用animation绑定动画

animation 属性是一个简写属性,用于设置六个动画属性:

  • animation-name

  • animation-duration

  • animation-timing-function

  • animation-delay

  • animation-iteration-count

  • animation-direction

3、利用@keyframes设置动画

通过 @keyframes 规则,您能够创建动画。

创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中,您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。

0% 是动画的开始时间,100% 动画的结束时间。

为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

示例如下:

    123  
Nach dem Login kopieren

输出结果:

+2.gif

(学习视频分享:css视频教程html视频教程

Das obige ist der detaillierte Inhalt voncss3怎么设置鼠标经过圆角放大到消失. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!