CS3实现动画效果，当页面到达某个位置时，触发动画效果，目标元素的宽度从中间到两端自动延申

废话不多说，直接上代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {margin: 0;padding: 0;}div{text-align: center;}.ccc {animation: myfirst 1s;animation-fill-mode: forwards;left: 50%;}@keyframes myfirst {from {width: 0;position: absolute;bottom: 0;height: 10px;background-color: rgb(241, 17, 28);}to {width: 50%;position: absolute;bottom: 0;height: 10px;background-color: rgb(241, 17, 28);}}.ddd {animation: myfirst 1s;animation-fill-mode: forwards;right: 50%;}@keyframes myfirst {from {width: 0;position: absolute;bottom: 0;height: 10px;background-color: rgb(241, 17, 28);}to {width: 50%;position: absolute;bottom: 0;height: 10px;background-color: rgb(241, 17, 28);}}</style>
</head><body><div style="width: 100%; height: 800px; background-color: rgb(249, 168, 75);">111</div><div style="width: 100%; height: 800px; background-color: rgb(15, 171, 219);position: relative;">111<p id="aaa"></p><p id="bbb"></p></div></body>
<script>var p = document.getElementById('aaa');var p1 = document.getElementById('bbb');window.onscroll = function () {var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;console.log("滚动距离" + scrollTop);if (scrollTop == 647) {p.classList.add("ccc")p1.classList.add("ddd")}}</script></html>

直接复制看效果，你就明白了！

CS3实现动画效果，当页面到达某个位置时，触发动画效果，目标元素的宽度从中间到两端自动延申相关推荐

python 动画场景_vue页面引入three.js实现3d动画场景操作
vue中安装Three.js 近来无聊顺便研究一些关于3D图形化库.three.js是JavaScript编写的WebGL第三方库.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它通过 ...
【自己的整理】页面滚动时触发动画特效 wow.js + Animate.css
在页面添加初始动画特效在页面添加初始动画特效的时候无意接触到wow.js 这个动画库配合Animate.css可以按照模板快速创建动画效果,虽然动画效果就像ppt里面的动画效果一样... 环境设置 ...
页面滚动时触发动画特效 wow.js + Animate.css
在页面添加初始动画特效在页面添加初始动画特效的时候无意接触到wow.js 这个动画库配合Animate.css可以按照模板快速创建动画效果,虽然动画效果就像ppt里面的动画效果一样... 环境设置 ...
android 布局变化动画效果,使用LayoutTransition实现布局变化时的动画
在3.0及以后只需要在XML中设置animateLayoutChanges="true"或者在Java代码中添加一个LayoutTransition对象即可实现任何ViewGrou ...
html 动画div右侧消失,使用animate.css时，动画一开始不隐藏,如何解决呢？
animate.css 的入场动画,一开始(初始态)怎么隐藏呢?(否则会闪一下.) 动画结束后要保持显示. 补充.. 使用了官网推荐的jquery 扩展代码,运动完后自动删除 class. 这是一个坑 ...
unity中移动部件靠近时触发动画，模型替换特效演示
前的游戏项目,需要找到正确的榫卯部件,移动到靠近正确拼接的部件时,触发模型的拼接动画,榫卯物品开始拼接,动画开始4s后触发"变身"特效,模型替换,拼接完成后会有指示的游戏UI提示出 ...
js在页面滚动到一定位置时触发事件？
function getTop(e) {var offset=e.offsetTop;if(e.offsetParent!=null) //只要还有父元素,也就是当前元素不是根节点就继续往上累计元素的 ...
html5 鼠标滑动页面动画效果,鼠标滑动到当前页面触发动画效果
近年来,关于鼠标滑动到当前页面从而触发动画效果十分的火热,今天我们就来学习下这一效果. 一.首先,我们先来了解一下这一效果实现的原理 1.一个网页离不开基本的布局,所以首先就是要先用html将所需要的 ...
react-native系列(13)动画篇：Animated动画库和LayoutAnimation布局动画详解
动画概念了解流畅.有意义的动画对于APP户体验来说是非常重要的,用RN开发实现动画有三种方法: requestAnimationFrame:称为帧动画,原理是通过同步浏览器的刷新频率不断重新渲染界面 ...

CS3实现动画效果，当页面到达某个位置时，触发动画效果，目标元素的宽度从中间到两端自动延申

CS3实现动画效果，当页面到达某个位置时，触发动画效果，目标元素的宽度从中间到两端自动延申相关推荐

最新文章

热门文章