【HTML+JavaScript+CSS】动画,特效
2017-10-29 16:32
549 查看
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5+CSS3实现的响应式垂直时间轴</title> <style> .demo,.img,.mask,.border{ width:300px; height:300px; border-radius:50%; } .img{ background-image:url(%E7%AC%94%E8%AE%B0/%E4%BC%81%E4%B8%9A%E7%BD%91%E7%AB%99/images/000138.jpg); background-size:cover; background-position:50% 50%;} .demo{ position:relative; display:block; } .mask,.border{ position:absolute; left:0; top:0; } .mask{ text-align:center; color:rgba(255,255,255,0); transition:all 1s ease-in; } .info{ margin-top:50%; transform:translateY(-50%); } .border{ border:10px solid #CCC; border-left-color:#60F; border-top-color:#60F; box-sizing:border-box; transition:all 0.8s ease-in; } .demo:hover .mask{ background-color:rgba(0,0,0,.5); color:rgba(255,255,255,1); } .demo:hover .border{ transform:rotate(180deg); } </style> </head> <body> <a href="#" class="demo"> <div class="img"></div> <div class="mask"> <div class="info"> <h3> BEATFUL</h3> <p>description goes here</p> </div> </div> <div class="border"></div> </a> </body> </html>
轮播图(数组)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{background:#3CF;} #box{ width:370px; height:240px; position:relative; margin:10px auto; border:2px solid #999; border-radius:20px; } #box img{ width:100%; height:100%; border-radius:20px; } #box a{ width:50px; height:50px; border:1px solid #666; text-align:center; position:absolute; top:50%; margin-top:-25px; text-decoration:none; line-height:50px; } #left{ left:-100px; } #right{ right:-100px; } </style> </head> <body> <div id="box"> <img src="笔记/企业网站/images/AD0I6ISlBRACGAAglOjDzQUoht6Q7QEw8gI48AE.jpg" id="imge"> <a id="left"><</a> <a id="right">></a> </div> <script> var left1=document.getElementById("left"); var right1=document.getElementById("right"); var image=document.getElementById("imge"); var arr=['笔记/企业网站/images/AD0I6ISlBRACGAAglOjDzQUoht6Q7QEw8gI48AE.jpg','笔记/企业网站/images/AD0I6ISlBRACGAAgkOjDzQUokOvI7QYw8gI48AE.jpg','','笔记/企业网站/images/AD0I6ISlBRACGAAglejDzQUozouMEDDyAjjwAQ.jpg','笔记/企业网站/images/AD0I6ISlBRACGAAgmejDzQUoopuT4gYw8gI48AE.jpg']; var num=0; right1.onclick=function(){ num+=1; if(num==arr.length){ num=0; } image.src=arr[num]; } </script> </body> </html>
相关文章推荐
- html中css的动画特效
- <html5+css3+js>用javascript显示隐藏,添加,删除元素,css动画效果
- 笔试题目2(HTML+CSS+JavaScript)
- Vim下的Web开发之html,CSS,javascript插件
- 纯CSS打造的安卓系统开机画面动画特效代
- 导航布局(HTML+CSS+JavaScript)
- HTML/JavaScript/CSS/XML/PHP/JSP/Java 注释符号
- Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置
- html,css,javascript基本语法
- css+html仿今日头条的评论框动画效果
- 用javascript控制 youtube动画,直接打开html会失败
- 不水好好学——HTML、CSS、Javascript之间的联系
- jquery、html/css/javascript、jdk、struts1、struts2、hibernate、hibernate annotation、spring等在线文档
- 《web前端开发技术——html、css、javascript》笔记之一
- html+css+js实现原生轮播特效
- CSS中的边框和动画特效
- 疯狂HTML 5/CSS 3/JavaScript讲义
- 9款超绚丽的HTML5/CSS3应用和动画特效
- 【HTML、JAVASCRIPT、CSS】2、HTML语言入门2