51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
信创认证
公众号矩阵
移动端
视频课 免费课 排行榜 短视频 直播课 软考学堂
全部课程 软考 信创认证 华为认证 厂商认证 IT技术 PMP项目管理 免费题库
在线学习
文章 资源 问答 课堂 专栏 直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
CKA（Kubernetes 管理员认证）精品班
按照企业k8s需求进行技能培训，帮助用户快速拿下CKA认证，K8S采用新版本进行授课，课程内容全、讲解详细 。 免费试学
软考高级：系统架构设计师精品班
根据考试大纲对知识点、高频考点进行深入讲解，传授答题技巧及判断标准，助力高效备考。 免费试学
信创认证：系统架构师精品班（高级）
信息技术应用创新人才考试评价 免费试学

ios css3动效不生效
在开发iOS应用时，我遇到了一个常见但令人沮丧的问题：CSS3动效在iOS设备上不生效。此问题让我深感困扰，尤其是在我想为移动端应用增添一些现代化的视觉效果时。经过一番分析和实验，终于找到了原因和解决方案。 ## 问题背景 在开发移动Web应用时，使用CSS3动效能够提升用户体验和应用的吸引力。然而，许多开发者发现，相同的CSS3代码在iOS设备或Safari浏览器上可能无法如预期般生效。正如
动效
iOS
CSS
原创
mob64ca12d12b68
6月前
64阅读

css3渐变进度条动效
效果预览： 下载地址：https://qrk.lanzous.com/ic91f6d 建议复制后打开 点击下载
下载地址
原创
月~悠荡
2021-12-24 15:55:59
1361阅读

css3实现鼠标移入图片动效
按照国际惯例先放效果图贴代码：<!DOCTYPE html><html lang="en"><head>     <meta charset="UTF-8">     <title>testtitle>     <style>         .container{             width:1200px;  
css3
转载
mob604756fd2a33
2021-05-04 22:52:48
554阅读
2评论

10个值得前端收藏的CSS3动效库（工具）
网站和App的设计中越来越重视用户体验，而优秀的动效则能使你的应用更具交互性，从而吸引更多用户的使用。我一般会在网站中加入一些简单而一致的动效，我所用的技术则是用SASS+bourbon来生成出那些基于CSS3的动画效果来。但如果你对CSS3中定义动效还不熟练，或希望采用更加简单直接的方式在你的应用中引入动效的话，你可以参考并使用下面的这10个优秀动效库（工具）。1.Animate.css...
前端开发
原创
wx5f5619df3fb27
2021-06-07 20:29:36
345阅读

用css3动画做一个加载动效
<!-- 加载动效 --> <div id="myloader"> <div class="loader"> <div class="grid"> <div class="cube cube1"></div> <div class="cube cube2"></div> <div class="cu Read More
3d
4s
动效
加载
css
转载
mob60475704c528
2020-04-27 10:13:00
183阅读
2评论

减少jQuery依赖， CSS3实现鼠标悬停动效
 在网页中我们经常会在页面上鼠标悬停时看到一些动效，例如图片跟随鼠标点击放大、懒加载等，这个交互细节在各个主流网站中随处可见，能为网站增添个性亮点。背景在我们的日常项目中，也会遇到这样的需求，在当前环境下，此类效果大多是靠jQuery来实现的，但是用jQuery实现有不少毛病，原因如下：1.jQuery里面封装了各种函数，整个框架相对比较重;2.jQuery没有分割模块，只有全部导入;3.jQue
web前端
转载
mb6062f6f7854bb
2021-06-04 11:01:46
86阅读

CSS3 Animation Cheat Sheet：实用的 CSS3 动画库
CSS3 Animation Cheat Sheet 是一组预设的动画库，为您的 Web 项目添加各种很炫的动画。所有你需要做的是添加样式表到你的网站，为你想要添加动画效果的元素应用预制的 CSS 类就可以了。
CSS3
CSS3动画
CSS3 Animation
html5
css3
转载
mb5fd8698f60f87
2013-09-12 09:51:00
124阅读
2评论

svg+css3 实现tabbar 动效
大家好，今天给大家分享下svg如何实现一个简单的tabbar动效，并适配移动端平台。 demo链接动效分析我们先来分析一下如图tabbar的元素动一动的过程：动画开始阶段：整个图标进行类似心跳效果的抖动，并且内部小图标进行消失动画运行到中间：图标内部有三层颜色的闪屏效果，运动结束并停止到最后一层动画最后阶段：尬聊图标中间小圆跳动显示，其他三个内部小图标变成白色并进行线条移动显示。tabbar 图标
svg+css3
tabbar
转载
mb6004f7a0e5cc3
2021-01-19 15:23:55
3717阅读
1点赞
3评论

CSS动效组件库VUE动效组件库nuxt动效组件库
在开发 Vue.js 或 Nuxt.js 项目时，使用 CSS 动效组件库可以快速实现丰富的动画效果。以下是几个常用的 CSS 动效组件库和 Vue/Nuxt 动效组件库：1. CSS 动效组件库这些库提供了丰富的 CSS 动画效果，可以直接在 Vue 或 Nuxt 项目中使用。Animate.css Animate.css 是一个非常流行的 CSS 动画库，提供了大量的预设动画效果，如 fade
Vue
css
CSS
原创
BeginMind
7月前
228阅读

css动画gpu加速 css动效
理解：transition 过渡transform 变换animation 动画 一、transition1.理解　　过渡，用于平滑的改变CSS值，举个例子：change{ 　　width:100px; 　　height:100px; 　　background:yellow; 　　transition:background 10s; } change:hover{ 　　backgroun
css动画gpu加速
css
缩放
动画效果
转载
mob64ca141677f9
2024-06-20 18:14:54
48阅读

css 动效demo css动画制作
大部分的c s s样式动画制作都是有类似的制作流程，总结了一套简单的c s s样式制作流程。方便以后需要写动画时有一定的思路第一步：设计动画CSS 动画样式的制作，首先需要明确动画的设计。想要什么样的动画效果？需要何种元素动画？需要何种时间间隔？需要何种过渡效果？明确以上问题，设计出想要的动画效果，然后开始编写 CSS 样式。第二步：选择元素在 HTML 中使用 CSS 动画样式需要选择元素和确定
css 动效demo
css
css3
html
CSS
转载
编程艺术之光
2024-03-27 08:38:49
129阅读

23款非常实用的CSS3工具
对于Web设计和开发人员来说，css是非常重要的一部分，随着越来越多的浏览器对css3的支持及不断完善，设计
css3
css
阴影效果
原创
wx6332e0803afcf
2022-11-09 10:20:28
106阅读

CSS3——过渡(CSS3)
不得不爱过渡(CSS3)案例过渡(CSS3)过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。过渡动画： 是从一个状态 渐渐的过渡到另外一个状态帧动画：通过一帧一帧的画面按照固定顺序和速度播放。
CSS3
CSS
html
原创
流楚丶格念
2020-07-15 10:21:01
2202阅读

实用的CSS3属性和使用技巧
CSS可以改进网站的设计并且开拓网站设计更多的可能性，可以令你的网页更具吸引力。对于前端开发者、网站设计师来说，掌握并熟练应用CSS是一项必不可少的技能。下面列出了一些非常实用的CSS3属性和使用技巧，希望能够为你的开发、设计工作带来一些帮助。1. 圆角效果如今的Web设计在不断跟进最新的开发技术，纷纷采用HTML5来开发多样性的Web应用。HTML5的优势之一，就是之前必须用图片实现的元素，现在可以用代码来实现。“border-radius”是实现这一功能的一个重要的属性，可以用来直接定义HTML元素的圆角，并且被所有现代浏览器支持。border-radius: 10px; /* CSS3
css
html
html5
web前端
css3
转载
mb5fdcad8719a20
2013-12-25 14:17:00
107阅读
2评论

有趣的css - 边框动效按钮
交互感比较强的一个动效按钮。
动效设计
交互设计
ux/ui
动效按钮
css
原创 精选
设计师工作日常
2024-08-14 14:37:33
573阅读

Android 3D动效 3d动效设计
在《【Unity3D】3D模型的使用——FBX的使用与Animation设置》（点击打开链接）我曾经介绍过Unity3D中动画的使用，其实一些简单的3D动画，我们自己通过3dsmax也能制作出来，下面通过制作一个简单的立方体动画来说明这个问题。一、初始布置1、在使用3dsmax制作动画之前，需要首先设置动画的长度，点击右下角的动画时间配置图标，修改End Time，这里的单位为帧。一般一个动作10
Android 3D动效
3dsmax
动画
unity3d
补间
转载
mob64ca14196783
2023-11-15 15:34:20
122阅读

css 文字动效 兼容IOS
# CSS 文字动效兼容iOS 随着前端技术的不断发展，CSS 动效越来越受到开发者的青睐。它不仅使得网站更具视觉吸引力，还能增强用户体验。然而，如何确保这些动效在不同平台上都能正常显示，尤其是 iOS 设备，成为了前端开发者需要考虑的重要问题。本文将深入探讨 CSS 文字动效的实现，特别是如何确保其兼容 iOS，并附带相应的代码示例。 ## CSS 动效的基本概念 CSS 动效是通过 CS
动效
CSS
iOS
原创
mob64ca12ea8117
2024-09-16 04:56:33
61阅读

svg+css圆环动效
使用 svg + css 制作圆环loading动效 <svg class="load" viewBox="25 25 50 50"> <circle class="loading" cx="50" cy ...
css
旋转动画
动效
html
转载
mob604756e605af
2021-08-28 11:48:00
874阅读
2评论

CSS3——CSS3盒模型
像手腕上散发的香水味CSS3盒模型案例CSS3盒模型CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。可以分成两种情况：1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，
CSS3
CSS
html
原创
流楚丶格念
2020-07-15 09:25:54
791阅读

CSS3过渡效果（CSS3）
CSS3过渡效果（CSS3）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">\
css
css3
html5
html
过渡效果
原创
CMMKK
2022-10-20 10:05:50
2155阅读
  • 1
  • 2
  • 3
  • 4
  • 5
精品课程领资料
免费资料>
2025软考
系统架构设计师 系统规划与管理师 软件设计师 系统集成项目管理工程师
信创认证
系统架构师 信创集成项目管理师 信创规划管理师 系统开发工程师
厂商认证
CKA/CKS架构师 红帽认证工程师 Oracle-OCP认证 Oracle-OCM认证
IT技术
数据库高级工程师 AIGC大模型实战 Linux云计算架构师 Python全栈开发
华为认证
数通HCIP认证 云计算HCIE认证 华为存储HCIE认证 HCIP安全认证
相关文章

CSS3动画的基本使用（CSS3）

CSS3动画序列（CSS3）

CSS3动画的常见属性（CSS3）

meterial design3动效设计 动效设计视频

CSS/CSS3

实用的css3小实例---1、卡片效果

ProgressBar动效 app 动效

有趣的css - 圆形渐变光晕动效

有趣的css - 列表块加载动效

Copyright © 2005-2025 51CTO.COM 版权所有 京ICP证060544号

关于我们
官方博客 全部文章 热门标签 班级博客
了解我们 网站地图 意见反馈
友情链接
鸿蒙开发者社区 51CTO学堂
51CTO 软考资讯