CSS之利用transition做一个图标转换的动画
2021/10/17 6:11:49
本文主要是介绍CSS之利用transition做一个图标转换的动画,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
效果如下:
这个很简单,直接上代码,如果对字体图标不熟悉的同学可以看这篇文章:
(45条消息) CSS之如何从icomoon引入及使用字体图标_qwerty053的博客-CSDN博客
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | <!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做一个图标转换的动画的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
原文链接: https://blog.csdn.net/qwerty053/article/details/120806086
- 2024-12-26CSS入门指南:从零开始学CSS
- 2024-12-26CSS基础入门教程
- 2024-12-25CSS基础知识入门教程
- 2024-12-25CSS考点入门教程:掌握基础知识点
- 2024-12-25CSS考点解析:初学者必会的基础教程
- 2024-12-07uniapp动态设置不同的css有哪些方法?-icode9专业技术文章分享
- 2024-12-07UniApp 中,怎么通过 CSS 设置 view 组件的水平居中效果?-icode9专业技术文章分享
- 2024-12-06TailwindCSS开发入门教程
- 2024-12-06TailwindCSS项目实战:从入门到上手
- 2024-12-06TailwindCss项目实战:初学者指南