原生js与css3结合的电风扇

最近学习了css3,就琢磨做些东西练练手,下面是自己写的一个电风扇,使用了原生js中的定时器和css3的一些属性 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>translate</title> <style> .fangshan { margin: 100px auto 0 auto; w…

瀑布流的三种实现方式（原生js+jquery+css3）

前言项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流-javascript</title> <st…

原生js判断css3动画过度(transition)结束 transitionend事件以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

上图的 demo 主要讲的是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,JavaScript仍然能捕获动画或变换的结束事件: transitionend事件和animationend事件标准的浏览器事件,但在WebKit浏览器里你仍然需要使用webkit前缀,所以,我们不得不根据各种浏览器分别检测事件 var transiti…

js+jquery+css3

(原生js+jquery+css3) 前言项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流-javascript&l…

基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

基于css3新属性transform,实现3d立方体的旋转通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴.Y轴移动的距离,将距离实时赋值给transform属性从而通过改变transform:rotate属性值来达到3d立方体旋转的效果 HTML代码块: <body> <input type="button" clas…

HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）

原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 perspective: 800px;(景深)和使立方体呈3d效果展示的transform-style:preserve-3d来实现: 全屏的雪花飘落用原生js来实现(随机的大小,透明度的变化等),有详细注释: html5主要是实现背景音乐和头部的字体卷动效果. < audio src="music.…

jquery/原生js/css3 实现瀑布流以及下拉底部加载

思路: style: <style type="text/css"> body,html{ margin:; padding:; } #container{ position: relative; margin: 0 auto; text-align: center; } #container div{ padding: 10px; position: absolute; } #container div img{ padding: 10px; width: 200px;…

从零开始手把手教你使用原生JS+CSS3实现幸运水果机游戏

项目体验地址免费视频教程游戏介绍幸运水果机是一款街机游戏,游戏界面由24个方格拼接成一个正方形,每个方格中都有一个不同的水果图形,方格下都有一个小灯.玩家使用游戏币选择希望押注的目标,按下开始后,小灯开始绕着正方形中每个格子转.当小灯停下时,如果停在玩家押注的目标上则可赢取相应的游戏币. 物品:游戏中的物品有八种,分别为:苹果.西瓜.木瓜.橙子.铃铛.77.双星,这些物品又分为大小两种.还有BAR图标,分为2种. 赔率:以下为所有固定赔率物品的赔率.·所有其他小的物品(小77.小星星.小西…

原生js+css3实现图片自动切换，图片轮播

运用CSS3transition及opacity属性制作图片轮播动画自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播运用css3的opacity透明度属性和transition动画过度属性,用js对过程加以控制,也实现了js对CSS3中transition动画的触发实例链接地址:http://pspgbhu.github.io/opacity 今天突然发现这个代码有问题,主要出在html/css上,问题主要是由于使…

原生js移动端touch事件实现上拉加载更多

大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.getElementsByTagName("div")[0]; //给元素绑定监听事件个人习惯把监听事件写在一块 objSection.addEventListener("touchstart", touchStart, false); objSection.addEve…

【原生js与css3结合的电风扇】的更多相关文章