Css3动画切换效果

浅浅的花香味﹌ 2022-02-26 13:56 433阅读 0赞

开发工具与关键技术：DW  
作者：文泽钦  
撰写时间：2019年3月21日

实在不知道写什么，就翻了老师给的一些css样式看看有什么好玩的，老师用伪类做了一个鼠标移入到div里有一种变色的效果，我把背景颜色替换成图片，当鼠标移入时效果还不错跟幻灯片一样，就是看久了个人感觉有点晕；  
整个页面就一个div：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI1MQ_size_16_color_FFFFFF_t_70]  
Css的代码也不多，只要你足够无聊可以重1%设到100%，一张一张图片往向加：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI1MQ_size_16_color_FFFFFF_t_70 1]  
其实animation动画可以减写代码的，就一句核心代码就搞定：  
div:hover\{/*伪类*/  
animation:changecolor 60s ease-in 0.5s 3; /*动画效果*/  
\}  
这样是不是比源代码少写很多代码了，渐变中的效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI1MQ_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI1MQ_size_16_color_FFFFFF_t_70]: /images/20220226/1d79f3f885114898b913663c4c363b4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI1MQ_size_16_color_FFFFFF_t_70 1]: /images/20220226/50026c549a1e42a0877e60197bcfdb6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI1MQ_size_16_color_FFFFFF_t_70 2]: /images/20220226/e8f0bbd9eac04f5b963f44fe70ed2d1c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，433人围观）

还没有评论，来说两句吧...

相关阅读

相关【CSS3】CSS3 动画 ⑥ ( 动画属性示例 | 精灵图帧动画效果实现 )

文章目录一、需求说明二、代码分析 1、动画属性 2、布局分析 3、动画实现三、完整代码示例

ゞ浴缸里的玫瑰/ 2023年10月14日 17:36/ 0 赞/ 12 阅读

相关 css3 文字渐变动画效果

.css { background-image: -webkit-linear-gradient(left, red, blue 25%, 147B96 5

川长思鸟来/ 2022年12月07日 11:40/ 0 赞/ 270 阅读

相关 CSS3动画效果二

nimation CSS3中真正的动画属性是animation，而前面的transform和transition都只是对DOM元素的变形或者是状态的过渡。实际上，CSS3所

「爱情、让人受尽委屈。」/ 2022年09月25日 03:23/ 0 赞/ 282 阅读

相关 CSS3动画效果一

CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类：transform、tran

亦凉/ 2022年09月25日 03:22/ 0 赞/ 261 阅读

相关纯css3 checkbox选中动画效果

[下载地址][Link 1]checkbox选中的动画特效，使用纯css3代码实现的checkbox复选框勾选的翻转动画效果。 ![1630545811.png][] dd

深碍√TFBOYSˉ_/ 2022年09月09日 15:48/ 0 赞/ 221 阅读

相关 css3动画抖动效果

html结构： <div class="top"> <a href="\"> <div>

深碍√TFBOYSˉ_/ 2022年08月07日 02:39/ 0 赞/ 521 阅读

相关 CSS3过度效果及动画—总结

一. 细节内容： 1. 图片如果只设置宽度，高度会自动适应，所以不建议设置高度。 2. display： inline（设置后具备行级元素特性） b

逃离我推掉我的手/ 2022年06月14日 07:30/ 0 赞/ 277 阅读

相关 HTML5+CSS3 做一个灵动的动画 TAB 切换效果

HTML5+CSS3 做一个灵动的动画 TAB 切换效果设计师给了一个 `tab` 切换的效果图。虽然是一个很小的功能，但是前端工程师在实现的时候还是有很多细节需要注意

怼烎@/ 2022年06月08日 04:59/ 0 赞/ 227 阅读

相关 css3动画效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

刺骨的言语ヽ痛彻心扉/ 2022年05月27日 02:44/ 0 赞/ 318 阅读

相关 Css3动画切换效果

开发工具与关键技术：DW 作者：文泽钦撰写时间：2019年3月21日实在不知道写什么，就翻了老师给的一些css样式看看有什么好玩的，老师用伪类做了一个鼠标移入到d

浅浅的花香味﹌/ 2022年02月26日 13:56/ 0 赞/ 434 阅读