动效主题的文章列表，还有动效的技术要点_第1页

liMarquee演示12种不同的无缝滚动效果

很实用的一款liMarquee演示12种不同的无缝滚动效果实例代码!DOCTYPEhtmlhtmllang="zh-CN"headmetacharset="utf-8"titleliMarquee演示12种不同的无缝滚动效果-默认效果_sucaihuo/titleli...

开发笔记 ·2024-08-10

纯css实现光标打字效果，纯CSS打字动效

效果如下：创建html页面，在body中添加以下html代码：<pclass="load-text">loading...</p>css代码：/*光标动画*/@keyframescaret{50%{border-color:transparent;}}/*文本动画：从宽度为0开始*/@keyfr...

开发笔记 ·2023-02-05

css笔记：清除子元素对父元素的浮动效果的三种方法

对于浮动元素，我们知道如果父元素不设置height，而子元素全部设置为浮动，父元素不会被撑开(也就是父元素为一条直线，height为0)，我们看到的就是一条线在所有子元素上面。例如：<!DOCTYPEhtml><htmllang="en"><head><metacharset=...

代码星球 ·2021-02-22

下拉菜单联动效果

$(function(){$("#beltline").on("change",function(){log();});})functionlog(){varnum=$("#beltline").val();$.ajax({type:"POST",timeout:3000,url:"/admin/f_kiln_oper...

代码星球 ·2021-02-21

原生js实现多组图片抖动效果的问题

昨天把多组图片抖动效果实现了，但是有一个问题就是关于快速多次移动到图片上的时候会出现移动事件结束之后图片不在原来位置。就像下图所示：这个问题的关键是：获取的位置都是移动事件之后重新刷新的位置，所以又去加抖动频率，重新又实现一次抖动效果，以便于会有图片最后出现上图的问题了。解决这个关键就是要做个判断，每次实现...

代码星球 ·2021-02-20

多组抖动效果的图片js封装

昨天提到了单个图片的抖动效果，那么今天来写一下多组图片实现抖动效果的封装，这种效果也许在日常的项目中会用到，简单封装一下，就不用每次都写差不多一样的代码了，好的来看html和css的布局，其实很简单就是两张图片：<style>img{position:absolute;top:200px;left:300p...

代码星球 ·2021-02-20

原生js实现图片抖动效果

今天来写一个关于图片抖动的效果，需求是：点击图片，让其抖动几下停止（类似于苹果手机填错密码之后会抖一下的效果），其实想要实现这个效果，原理就是，点击之后，让其左移动下然后右移动一下（每移动一下减几像素知道减到0），然后将其放入定时器内，让其慢慢自动停下来。来看代码布局：<style>#img{positio...

代码星球 ·2021-02-20

js实现滚动效果

　　初始状态　　　　点击左滚动出现的效果　　　　　　滚动效果通过setInterval定时函数去实现的，setInterval定时让ul每过一段时间就移动，移动其实是left的值在变大，让ul移动的必须让这个div是绝对定位的，这样left属性就会起效果，然后让div的left值越来越大，这样ul就在移动。实现移动后复...

代码星球 ·2021-02-12

TreeView实现拖动效果

http://files.cnblogs.com/xiaofengfeng/TreeViewDragDrop.zip...

代码星球 ·2021-02-11

如何设置动画的运动效果

　　我们是否为动画匀速，先慢后快，还是先快后慢，等等一系列的而烦恼，不管怎样都找不到适合自己的效果　　接下来，为大家介绍一个网站 https://cubic-bezier.com 专门设置速度的地方　　用法特别简单：　　　　只要是用到了速度的地方，用它即可　　　　　　　　 ...

代码星球 ·2021-02-06

利用平移（transform），设置元素浮动效果

1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8">5<title>变形</title>6<style>78.box1{9width:200px;10height:200px;11mar...

代码星球 ·2021-01-17

快速生成漂亮的移动端视差滚动效果

在线演示本地下载使用stellar.js可以帮助开发者快速的生成基于移动设备的视差滚动效果。使用简单的data属性定义即可生成相关视差效果。...

代码星球 ·2021-01-09

直播动效按钮的制作

今天，在别人的网站刚好看到一个特效，正是自己想要的，就保存了一份下来到博客，方便自己可以查询。鼠标放上后效果还不错，主要是后面那个动图，一直在动。用的是CSS3的一个性能。原代码如下：（以下是测试代码，捡自己需要的用就行）<!DOCTYPEhtml>...

代码星球 ·2021-01-09

vue实现二级联动效果

你如城市与省份间的二级联动效果<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>demo</title><styletype="text/css">.pag-set-bg{wid...

代码星球 ·2021-01-02

CSS实现一个粒子动效的按钮

按钮（button）可能是网页中最常见的组件之一了，大部分都平淡无奇，如果你碰到的是一个这样的按钮，会不会忍不住多点几次呢？通常这类效果第一反应可能就是借助canvas了，比如下面这个案例（建议去codepen原链接访问，segmentfault内置的预览js会加载失败）效果就更加震撼了，当然canvas实现也有一定的...

代码星球 ·2020-12-24