点击页面出现富强、民主这类文字动画效果

一、文字动画效果预览
点击本页面任意位置即可！因为动画效果用的是CSS3 animation，因此，IE9及其以下浏览器无效果。

二、如何在自己网站上添加类似效果？

复制并粘贴下面的内联CSS代码到页面任意位置

<style>
.text-popup {animation: textPopup 1s;color: red;user-select: none;white-space: nowrap;position: absolute;z-index: 99;
}
@keyframes textPopup {0%, 100% {opacity: 0;}5% {opacity: 1;}100% {transform: translateY(-50px);    }
}
</style>

复制下面的内联JS代码到页面任意位置

<script>
var fnTextPopup = function (arr, options) {// arr参数是必须的if (!arr || !arr.length) {return;    }// 主逻辑var index = 0;document.documentElement.addEventListener('click', function (event) {var x = event.pageX, y = event.pageY;var eleText = document.createElement('span');eleText.className = 'text-popup';this.appendChild(eleText);if (arr[index]) {eleText.innerHTML = arr[index];} else {index = 0;eleText.innerHTML = arr[0];}// 动画结束后删除自己eleText.addEventListener('animationend', function () {eleText.parentNode.removeChild(eleText);});// 位置eleText.style.left = (x - eleText.clientWidth / 2) + 'px';eleText.style.top = (y - eleText.clientHeight) + 'px';// index递增index++;});
};
fnTextPopup(['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善']);
</script>

原文链接：开心呆哥

点击页面出现富强、民主这类文字动画效果相关推荐

php富强民主,鼠标点击：显示富强/民主/爱国等文字特效
将代码添加到主题页脚(footer.php)文件,在用户任意位置点击鼠标,显示"富强", "民主", "文明", "和谐" ...
点击页面弹出文字动画效果
点击页面弹出文字动画效果 introduce 在博客园查询资料的时候,经常会有一些小的惊喜,比如点击页面,会弹出一些文字,向上浮动,然后消失,显得无聊,我就做了一个demo tool 首推vscode ...
WOW.js – 在页面滚动时展现动感的元素动画效果
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
动态效果html wow,WOW.js ? 在页面滚动时展现动感的元素动画效果_html/css_WEB-ITnose...
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
鼠标点击页面出现富强自由等文字JS特效
在其他博客看到一款JS特效,感觉很不错,所有网上收集过来分享给大家. 效果参考本网站,添加点击特效,点击页面会显示: 富强, 民主, 文明, 和谐, 自由, 平等,公正 ,法治, 爱国, 敬业, ...
爱国html源码,鼠标点击网页爱国富强民主特效（附代码）
有朋友经常问,网站上点击出现爱国字眼是怎么做出来的,鼠标点击就显示"富强.民主.和谐"等24个词语,这样鼠标点击特效.下面来分享一下如何实现的. 1,效果如下: 添加页面点击特效, ...
html富强民主鼠标特效,鼠标点击弹出 “富强民主 ”特效
代码 /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function ...
通过js滚轮滚动时调用动画_WOW.js在页面滚动时展现动感的元素动画效果
插件描述:WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画 ...
你也可以做一个小米魅族网站 WOW js WOW js – 在页面滚动时展现动感的元素动画效果
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 可视区域 ...

点击页面出现富强、民主这类文字动画效果

点击页面出现富强、民主这类文字动画效果相关推荐

最新文章

热门文章