CSS之利用transition做一个图标转换的动画
2021/10/17 6:11:49
本文主要是介绍CSS之利用transition做一个图标转换的动画,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
效果如下:
这个很简单,直接上代码,如果对字体图标不熟悉的同学可以看这篇文章:
(45条消息) CSS之如何从icomoon引入及使用字体图标_qwerty053的博客-CSDN博客
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?w0aq5k'); src: url('fonts/icomoon.eot?w0aq5k#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?w0aq5k') format('truetype'), url('fonts/icomoon.woff?w0aq5k') format('woff'), url('fonts/icomoon.svg?w0aq5k#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } #one { width: 300px; height: 30px; border-radius: 25px; border: 2px solid pink; margin: 40px auto; } #one::before { content: ""; width: 0; height: 30px; border-radius: 25px; background-color: rgb(151, 183, 241); display: block; transition: width 1.5s ease; } #one:hover::before { width: 250px; } #two{ margin: 0 auto; width: 100px; height: 100px; background-color: coral; border-radius: 15px; display: flex; overflow: hidden; } #two div{ font-family: 'icomoon'; font-size:45px; line-height: 100px; margin-left: 23px; letter-spacing: 30px; transition: margin-left 0.3s ease-in,background-color 0.3s ease-in; } #two:hover div{ background-color: gainsboro; margin-left:-59px; } </style> </head> <body> <div id="one"></div> <div id="two"> <div></div> </div> </body> </html>
这篇关于CSS之利用transition做一个图标转换的动画的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-18CSS中的伪类
- 2024-03-06css样式背景图怎么分开(css背景图片样式)-icode9专业技术文章分享
- 2024-03-06css线性样式(css中划线样式)-icode9专业技术文章分享
- 2024-03-06jq点击添加css样式(jq设置css样式)-icode9专业技术文章分享
- 2024-03-06流程样式css(css实现流程图)-icode9专业技术文章分享
- 2024-03-06css怎么调搜索键样式(css搜索框怎么调大小)-icode9专业技术文章分享
- 2024-03-06css层叠样式(Css层叠样式介绍)-icode9专业技术文章分享
- 2024-03-06css样式表有何特点(css样式表的使用方法有几种)-icode9专业技术文章分享
- 2024-03-06css的列表样式(css列表样式属性包括)-icode9专业技术文章分享
- 2024-03-06css3手机端样式(手机端css怎么写)-icode9专业技术文章分享