// moveR.moveR-enter-active, .moveR-leave-active { transition: all .5s linear; transform: translateX(0);} .moveR-enter, 0%); }
原创
2022-12-21 10:02:52
841阅读
CSS优化1、转换 1、什么是转换 转换即改变元素的一些状态，大小、位置、形状 可以是2d转换，也可以是3d的转换 2d : 使元素在 x轴和 y轴上发生变化 3d ：2d基础上增加了 z轴的变化 2、转换属性 CSS3转换属性: transform : none / transform-function; none:不转换，默认值 tra
转载
2023-07-31 23:50:04
271阅读
适当地利用CSS的box-shadow可以构造图形，然后可以对构造的图形添加动画效果。下面我们通过移动的眼珠子、圆珠一二三、一分为四、四小圆旋转扩散等实例来体会box-shadow属性在动画制作中的使用方法。 box-shadow属性的基本格式为： box-shadow: h-shadow v-sh ...
转载
2021-05-04 12:11:26
384阅读
2评论
# jQuery 实现鼠标移动时元素宽度变化的 CSS 动画
在现代网页设计中，动效可以吸引用户的注意力并提高用户体验。本文将介绍如何使用 jQuery 和 CSS 创建一个当鼠标移动到元素上时，该元素的宽度将变化的动画效果，以及鼠标移除时还原的方法。
## 1. jQuery 和 CSS 概述
在实现上述功能之前，我们首先需要了解 jQuery 和 CSS 的基本概念。
- **jQue
原创
2024-10-11 08:08:47
85阅读
动画是使元素从一种样式逐渐变化为另一种样式的效果。通过 CSS3，能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 如需在 CSS3 中创建动画，需要学习 @keyframes 规则。 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。通过 animation 相关动画
转载
2024-03-16 08:06:01
250阅读
CSS动画就是通过CSS （Cascading Style Sheet，层叠样式表）代码搭建的网页动画。它允许设计师和开发人员通过编辑网站的CSS代码来添加页面动画，从而轻松取代传统动画图片或flash动画的设计方式。 transition（过渡）和animation（动画）是CSS3中的两种动画属性。
转载
2020-08-12 06:18:00
410阅读
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } div { width: 100px; height: 1
原创
2022-09-01 17:07:11
256阅读
（声明：文中部分内容系整理别人的，出处--http://www.w3cplus.com/css3/new-css3-linear-gradient.html）一、Css3 Gradient Gradient分为linear- gradient（渐行渐变）和radial-gradient（径向渐变）。因为浏览器的支持性不同所以有必要
原创
2015-08-28 13:56:20
1341阅读
@keyframes 规则 要创建 CSS 动画，您首先需要了解 @keyframes 规则，@keyframes 规则用来定义动画各个阶段的属性值，类似于 flash 动画中的关键帧，语法格式如下： @keyframes animationName { from { properties: val ...
转载
2021-09-30 17:20:00
231阅读
2评论
有人说CSS3D是一个骗子.....
CSS用得不好，被揭穿，大家都直呼骗子；运用得当，那就是魔术师，接下来用4个例子来见证奇迹的时刻～1.折叠展开常见的超长文本折叠展开，都是用v-if/v-show来控制显示隐藏的，这里大家可以思考一下，不用js，如何用纯CSS实现常见的折叠展开？
实现目标：模拟点击：点“*详情*”按钮展开，点“*收起*”按钮折叠多行文本显示按钮，单行文本不显示
