CSS动画

CSS动画实例：跳跃的字符

1．翻转的字符在页面中放置一个类名为container的层作为容器，在该层中放置5个字符区域，HTML代码描述如下：HELLO为container和span定义CSS样式规则，并定义实现5个字符翻转的动画关键帧。完整的HTML文件内容如下。字符翻转.container{margin:0auto;width:500px;height:300px;position:relative;overflow:
aTeacher·2020-08-15 06:00

基于Jquery的文章列表特效

都以一个特效出现2.所需环境3.思路来源诗酒趁年华【有想开发自己博客的可以模仿一下他的博客,个人认为很好看】主要是利用animation.css提供的动画+js监控滚动条的滚动，当div刚出现的时候播放css
rambler_designer·2020-08-15 03:37

动画使用 & animate.css库 & velocity.js & 动画钩子函数

文章目录1、transition运用:显隐2、运用css3动画效果3、运用animate.css4、animate.css动画和自己设置的动画一起使用5、动画钩子函数和velocity.js1、transition
Jessie-moving·2020-08-15 00:24

webpack的css单独打包解决方案

是为了解决：样式是通过js动态添加style标签引入的问题，因为动态添加所以css动画会有一个不必要的闪烁效果，初步估计是因为：css的stlye应该先被渲染。所以要把css抽离出来。
weixin_30391339·2020-08-15 00:11

CSS动画实例：一颗躁动的心

在页面中放置一个类名为container的层作为盛放心心的容器，在该层中再定义一个名为heart的子层，HTML代码描述如下：分别为container和heart定义CSS样式规则如下：.container{margin:0auto;width:300px;height:300px;position:relative;display:flex;justify-content:center;alig
I am a teacher!·2020-08-14 05:00

CSS动画实例：一颗躁动的心

在页面中放置一个类名为container的层作为盛放心心的容器，在该层中再定义一个名为heart的子层，HTML代码描述如下：分别为container和heart定义CSS样式规则如下：.container{margin:0auto;width:300px;height:300px;position:relative;display:flex;justify-content:center;alig
aTeacher·2020-08-14 05:00

快速上手VueJS动画

首先，创建自己的CSS动画样式。然后，了解如何将第三方CSS库与Vue动画一起使用。让我们赶快开始吧。过渡元素动画的处理与VueJS过渡非常相似。他们都使用Vu
EthanQ·2020-08-13 11:09

CSS动画实例：旋转的叶片

在页面中放置一个类名为container的层作为容器，在该层中再定义一个名为shape的子层，HTML代码描述如下：分别为container和shape定义CSS样式规则如下：.container{margin:0auto;width:500px;height:500px;position:relative;overflow:hidden;display:block;border:4pxsolid
aTeacher·2020-08-13 06:00

CSS动画实例：旋转的叶片

在页面中放置一个类名为container的层作为容器，在该层中再定义一个名为shape的子层，HTML代码描述如下：分别为container和shape定义CSS样式规则如下：.container{margin:0auto;width:500px;height:500px;position:relative;overflow:hidden;display:block;border:4pxsolid
I am a teacher!·2020-08-13 06:00

CSS动画实例：旋转的圆角正方形

在页面中放置一个类名为container的层作为效果呈现容器，在该层中再定义十个名为shape的层层嵌套的子层，HTML代码描述如下：分别为container和shape定义CSS样式规则如下：.container{margin:0auto;width:650px;height:650px;position:relative;overflow:hidden;border:4pxsolidrgba(
I am a teacher!·2020-08-13 04:00

CSS动画实例：旋转的圆角正方形

在页面中放置一个类名为container的层作为效果呈现容器，在该层中再定义十个名为shape的层层嵌套的子层，HTML代码描述如下：分别为container和shape定义CSS样式规则如下：.container{margin:0auto;width:650px;height:650px;position:relative;overflow:hidden;border:4pxsolidrgba(
aTeacher·2020-08-13 04:00

VUE之动画与animate.css动画库

包括以下工具：在CSS过渡和动画中自动应用class可以配合使用第三方CSS动画库，如Animate.css在过渡钩子函数中使用JavaScript直接操作DOM可以配合使用第三方JavaScript动画库
·Mr.zuo·2020-08-12 14:58

33.Vue-使用第三方animate.css类库实现动画

包括以下工具：在CSS过渡和动画中自动应用class可以配合使用第三方CSS动画库，如Animate.css在过渡钩子函数中使用JavaScript直接操作DOM可以配合使用第三方JavaScript动画库
海洋的渔夫·2020-08-12 14:19

css动画效果：transition和animate

transition和animate都可以实现一些动画效果，不同点是transition需要借助交互，动画完成后依原动画效果复原；animation可以自定义关键帧中间状态、控制暂停和播放，结束后默认瞬间复原一.transform（必须由交互来触发）：:移动（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）等效果使用：transform属性用于元素自身，transl
昵称叫铃风的小前端·2020-08-12 14:59

纯css动画效果--animate的应用

前言需要某个小图标或者文字转圈的效果，部分伙伴会用js去写一个定时器，然后再去清空定时器，这样做是比较麻烦的。之前在学css里的有一个animate方法。下面就讲animate的使用：animate调用的属性值语法：animation:namedurationtiming-functiondelayiteration-countdirection;1.animation-name规定需要绑定到选择
Eyes front·2020-08-12 14:26

CSS动画基础知识

CSS动画就是通过CSS（CascadingStyleSheet，层叠样式表）代码搭建的网页动画。
I am a teacher!·2020-08-12 06:00

CSS动画基础知识

CSS动画就是通过CSS（CascadingStyleSheet，层叠样式表）代码搭建的网页动画。
aTeacher·2020-08-12 06:00

你所不知道的 CSS 滤镜技巧与细节

承接上一篇你所不知道的CSS动画技巧与细节，本文主要介绍CSS滤镜的不常用用法，希望能给读者带来一些干货！系列CSS文章汇总在我的Github，持续更新，欢迎点个star订阅收藏。
long0801·2020-08-11 22:17

诺禾致源《诺禾》：精美JS、CSS动画时钟

精美JS、CSS动画时钟设计、实现与实例分析动态时钟设计实例之前文章介绍过JavaScript数字时钟的设计与实现，主要用于借助数组实现对数字时钟数字进行存储与标识。
百度刘超·2020-08-11 21:45

用css动画效果做小熊奔跑

代码如下：Documentbody{background:url(02-案例/media/bg1.png)repeat-x;/*这里注意背景图片一定要横向排列以免图片跑完有中断期*/animation:bgcmove30slinear.9sinfinite;}div{position:absolute;top:50%;transform:translateY(-100%);width:200px;
sword_chiu·2020-08-11 05:43

CSS动画-奔跑的大熊

奔跑的大熊body{border-color:#CCC;}div{position:absolute;width:200px;height:100px;background:url(images/bear.png)no-repeat;animation:bear.4ssteps(8)infinite,move3slinearforwards;}@keyframesbear{0%{backgroun
什么都不会的learner·2020-08-11 05:49

CSS(全面系统讲解 工作应用--慕课)整理 五（css动画）

1、动画的原理1、视觉暂留的作用2、画面逐渐变化2、动画的作用：愉悦感3、css中的动画类型1、transition补间动画位置（平移）（left/right/margin/transform）方位（旋转）（transform）大小（缩放）（transform）透明度（opacity）其他（线性变化）（transform）transition（过度）：width，1s;，延时指定多个属性指定所有属
chen983234416·2020-08-10 15:14

前端面试 - css+html常考知识点总结

目录1.盒子模型2.flex布局3.实现水平居中4.inline和block5.垂直居中6.水平垂直居中7.CSS3新增8.CSS3伪类9.JS动画和CSS动画10.清除浮动11.让元素消失12.position
小白Rachel·2020-08-10 14:22

CSS常用特效

注意到CSS动画有延迟（delay）这一属性。举个栗子，比如有十个元素
攻城狮Lee丶·2020-08-10 12:52

CSS动画性能——重绘与重排

身为一个前端，只考虑动画怎样实现就够了么？也许后续的动画性能优化才是你最大的敌人。。为什么会有这篇博文，说来惭愧。虽然用过CSS3制作过大量的动画效果，但在PC端和移动端，动画表现时佳时不佳，会卡顿会掉帧，有大量动画的页面更是会使移动设备的耗电和发热状态达到跟玩高FPS大型手游一样。小动画的卡顿掉帧问题也够让人抓耳挠腮一段时日。这篇博客并不会给出解决方案（因为我也没找到解决方案），因为导致动画卡顿
aohuiqiao5036·2020-08-10 09:43

leaflet给自定义marker添加动态效果

自定义marker的动态效果定义makerCSS模式切换效果切换实现动态效果主要依靠css动画定义makermarker=L.marker([d.latitude,d.longitude],{title
氵冫、·2020-08-10 00:33

前端性能优化之图片

优化方法总结：1.能不用图片解决的就不用备选技术CSS效果、CSS动画。提供与分辨率无关的效果，在任何分辨率和缩放级别都可以显
SunShinessx·2020-08-09 19:07

CSS动画实例：图文切换

先准备好一张图片，在页面中放置一个类名为container的层作为图文容器，在该层中再定义两个层：一个类名为image-box的层放置图片，一个类名为text-desc的层放置文本描述，HTML代码描述如下：黄鹤楼公园黄鹤楼是国家首批AAAAA级景区，中国旅游胜地四十佳，武汉市的城市标志。位于武昌蛇山之巅，有近1800余年的历史，为“江南三大名楼”之首，有“天下江山第一楼”美誉。在中国历史上留下大
aTeacher·2020-08-09 18:00

CSS动画实例：图文切换

先准备好一张图片，在页面中放置一个类名为container的层作为图文容器，在该层中再定义两个层：一个类名为image-box的层放置图片，一个类名为text-desc的层放置文本描述，HTML代码描述如下：黄鹤楼公园黄鹤楼是国家首批AAAAA级景区，中国旅游胜地四十佳，武汉市的城市标志。位于武昌蛇山之巅，有近1800余年的历史，为“江南三大名楼”之首，有“天下江山第一楼”美誉。在中国历史上留下大
I am a teacher!·2020-08-09 18:00

页面加载性能之选择正确的图片格式

CSS效果（如阴影、渐变），以及CSS动画，是否可以创造出你想要的效果，用以取代图片。优点是：放
找到Web·2020-08-09 18:31

网页到达可视区域再执行动画效果

下载地址：http://www.bootcdn.cn/wow/今天发现一个非常有趣的js，wow.min.js，Wow.js允许用户滚动页面的时候展示CSS动画。
shghnn·2020-08-09 12:12

Animate.css + wow.js 实现页面在滚动时可视区显动画效果（可支持vue）

突然产品和运营要重新改动官网，并要求页面在滑动的过程中需要出现一些动态效果，作为很久不用css3的小白，也把它忘的差不多啦，于是就开始百度有没有一些动画库，所以我就发现了Animate.css——一款强大齐全的css
安静、认真听·2020-08-09 11:46

手写插件【滚动到可视区域播放动画】

css动画参考写法：https://daneden.github.io/animate.css重点是下面js不需要
ange2017·2020-08-09 07:25

页面滚动到可视区域执行操作

css动画参考写法：https://daneden.github.io/animate.css重点是下面js不需要
weixin_33938733·2020-08-09 05:10

CSS（三）flex布局（flex弹性布局详解）

你也可以查看其他文章：0、CSS-预热篇1、CSS（一）详解position2、CSS（二）transform3、CSS（三）flex布局（flex弹性布局详解）4、CSS（四）详解Grid布局5、CSS（五）CSS
CoolSummmer·2020-08-08 22:23

jq运动 以及css动画 .animate()

动画相关方法：.hide()、隐藏标签.show()、将设置为displaynone的元素加以展示dhisplay属性还原为标签默认属性如果你已经更改该元素值则恢复为你的修改值.toggle()事件介于隐藏显示之间的切换参数：null或（duration,easing,callblack）.fadeIn、淡入.fadeout淡出、.fadeToggle、两者之间切换.fadeTo()将元素切换到你
苏先生前端·2020-08-08 20:24

用 js 实现帧动画

我们知道实现帧动画的方式有gif，css动画和js操纵的方式。在网上看了很多的教程，都写得特别的复杂，而在下一直是秉承大道至简的原则，写那么多代码自然是难以请愿的（主要是大神们写的太详细了）。
real_metrix·2020-08-08 19:54

css动画属性

1.Transform是静态属性，常用做元素的特殊变形。2.transition是简单的动画属性div{width:100px;height:100px;background:blue;transition:width2s;-moz-transition:width2s;/*Firefox4*/-webkit-transition:width2s;/*SafariandChrome*/-o-tra
weixin_41854000·2020-08-07 21:59

【面试】CSS动画之transition和animation属性整理和实例

参考：阮一峰的文章CSS实现动画主要有两种方法：transition和animation属性。transitiontransition`实例先看一个transition实现长度拉伸的例子：#transition-demo{height:100px;background-color:yellowgreen;transition:height1s0.5sease-out;//定义过渡规则}#trans
weixin_34376986·2020-08-07 20:54

CSS动画属性性能

CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recompositePaint通常是其中最花费性能的，尽可能避免使用触发paint的CSS动画属性，这也是为什么我们推荐在CSS
强强强子·2020-08-07 18:05

css动画实现翻书效果

/*翻书效果*/.MapLayerpage{transform-origin:right;//控制翻书的方向，right是右边固定transform-style:preserve-3d;animation-name:MapLayerpage;animation-duration:1s;animation-timing-function:linear;}@keyframesMapLayerpage{
哈哈哈哈_哈哈哈哈哈哈·2020-08-07 16:59

Css动画翻书效果三

这是一个翻书的过度动画果，来简单的理解一下吧。TANZHOUWEBNomatterhowhardtheroadahead,aslongasthedirectioniscorrect,nomatterhowrugged,itisclosertohappinessthanstandinginthesameplce.不管前方的路有多苦，只要走的方向正确，不管多么崎岖不平，都比战在原地更接近幸福。以上往来
黑猫.·2020-08-07 11:45

animate.css源码分析--bounce(弹跳效果)

animate.css是一个不错CSS3预设动画库,是很好的CSS3动画学习资源,下面来剖析下bounce效果的实现原理,在此基础上实现自己的CSS动画。
woollllll·2020-08-05 04:47

WEB前端第十七课——CSS动画

1.animation动画transition属性只能简单模拟动画效果，而animation属性可以制作类似Flash动画通过关键帧控制动画的每一步，使元素从一中样式变为另一种样式，实现复杂的动画效果2.@keyframes，用于声明动画，指定关键帧帧，用于分解动画动作，每一帧代表某个时间点书写格式：@keyframesname（自定义名称）{from|0%{CSS样式}percent|n%{CS
后来喵·2020-08-04 22:00

WEB前端第十七课——CSS动画

1.animation动画transition属性只能简单模拟动画效果，而animation属性可以制作类似Flash动画通过关键帧控制动画的每一步，使元素从一中样式变为另一种样式，实现复杂的动画效果2.@keyframes，用于声明动画，指定关键帧帧，用于分解动画动作，每一帧代表某个时间点书写格式：@keyframesname（自定义名称）{from|0%{CSS样式}percent|n%{CS
后来喵·2020-08-04 22:00

前端技术学习路线及技术汇总

如果需要接着升级7到10.HTMLHTML5新特性,浏览器的标准模式和怪异模式,xhtml和html的区别,使用data的好处,html模板语言,IE6bug和一些定位写法,渲染知识,标签,metaCSS
李肥驴·2020-08-04 17:07

Layui使用方法总结

Layui使用方法总结Layui前端框架概述准备工作类名使用（后期在使用中会补充完整）时间选择器树形组件进度条按钮弹出框数据表格CSS动画滑块Layui前端框架概述layui是一款采用自身模块规范编写的前端
qq_38852248·2020-08-04 17:13

2020.7.12学习日志

/ccomponent");处理边界情况访问根实例：$root访问父级组件实例:$parent访问子组件实例或子元素:ref(读取DOM的操作）9.过度与动画css动画v-enterv-enter-activev-e
Ryan.Zhang·2020-08-04 07:48

JavaScript动画简介

CSS动画在网络上扮演着重要角色-既独立又与JavaScript动画结合在一起。特别是，CSS非常适合与基本用户交互（例如悬停和焦点状态）
cuozhun3051·2020-08-03 16:48

CSS笔记

CSS笔记CSS基础CSS样式背景文本字体链接列表表格轮廓CSS定位定位浮动浮动的应用CSS盒子模型概述内边距边框外边距外边距合并盒子模型应用CSS常用操作对齐尺寸分类导航栏图片选择器选择器详解CSS动画
阿西代码·2020-08-03 15:13
上一页 10 11 12 13 14 15 16 17 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他