demo
关注
分享
扫一扫
文章平均质量分 64
涛痕
你在寻找梦想时，梦想也在寻找你
展开
-
特效button demo
效果思路1.设置一个a标签<a target="_blank" href="http://www.baidu.com">Moved</a>2.设置伪元素before和after，并且宽度为0 a:after { top: 0; left: 0; } a:before { top: 0;原创 2017-05-18 01:26:25 · 435 阅读 · 0 评论 -
黑客帝国 demo
效果思路<html lang="en"><head> <meta charset="UTF-8"> <title>黑客帝国</title> <style type="text/css"> * { margin: 0 auto; padding: 0 auto; } body {原创 2017-06-10 13:47:24 · 924 阅读 · 0 评论 -
如何借鉴一个优秀的网站
心得如果想成为一个好的前端开发者，我觉得浏览大量优秀的网站是必不可少的。除了提高自己的审美以外，还可以欣赏到许多特别优秀的交互效果，这样不仅可以迅速提高自己的技能，还可以丰富自己的想象力。当然这一切都需要具有一定的基础才行。我觉得借鉴相比于模仿，最大的区别是可以融入自己的思考，学习前端大神们构建网站的思路，分析他们如何实现优秀的交互效果，揣摩他们如何思考用户体验等等。什么是优秀的网站我个人觉得一个优原创 2017-06-05 00:11:55 · 2899 阅读 · 0 评论 -
简单放大镜 demo
效果思路有两张图片，小图片用于预览，大图片在鼠标进入小图片时候出现源码html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>放大镜</title> <script src="js/index.js"></script> <link href="css/index.css" t原创 2017-06-06 12:53:14 · 403 阅读 · 0 评论 -
简单导航栏 demo
效果思路红条是绝对定位，根据鼠标移动改变自己的位置源码html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>导航栏</title> <link href="css/index.css" type="text/css" rel="stylesheet"> <script src原创 2017-06-06 12:39:30 · 1092 阅读 · 0 评论 -
简单幻灯片 demo
效果思路通过小图片决定显示的大图片，通过改变display属性实现大图片的变化源码html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>幻灯片</title> <link type="text/css" href="css/index.css" rel="stylesheet">原创 2017-06-06 12:43:43 · 630 阅读 · 0 评论 -
数字滚轮 demo
效果思路1、三个div中嵌套span<div class="frame"> <div class="box1 box"> <span>6</span> </div> <div class="box2 box"> <span>8</span> </div> <div clas原创 2017-06-01 15:42:55 · 1008 阅读 · 0 评论 -
directors——toolofna
效果分析这是toolofna中我最喜欢的页面，简单却又不失酷感。同时我也觉得越简洁精致的东西其实越不好想，越不好做。我试着摸索了一下大神的思路，然后通过自己的思考完成了这个页面思路1、页面应该有5个div模块，左一个，中间的线是一个，右一个，然后左右的内容模块各一个 2、一开始的闪电应该是有两个div，一个固定了高度，另一个高度是变化的3、背景色为黑色，左右两个div一开始宽度为0，然后闪电结束后原创 2017-06-05 21:09:56 · 784 阅读 · 0 评论 -
contact——toolofna
效果原创 2017-06-05 20:31:44 · 1269 阅读 · 0 评论 -
awards——toolofna
效果 思路只要计算好transition的动画延迟时间，就能达到多个元素过渡动画的自然顺滑。本页面主要是数字滚轮比较有特色可以参考我的另一篇博客——数字滚轮 demo http://blog.youkuaiyun.com/iamcgt/article/details/72831874源码html <div class="frame"> <div class="box1 box">原创 2017-06-05 20:18:37 · 508 阅读 · 0 评论 -
tool——toolofna
效果全页视频按钮特效全页视频分析找到原网站的视频源，然后放一个与页面一样大的video即可思路1、video<div class="media"> <video autoplay src="http://s3-us-west-2.amazonaws.com/tool.home/2016trim.webm"></video></div>2、video样式.media{ ove原创 2017-06-05 10:44:48 · 586 阅读 · 0 评论 -
vr/360——toolofna
效果文字排版按钮特效图片排版图片标亮文字排版思路1、主要是header，h1，h2和p <section class="about"> <div class="content"> <header> <h1>virtual reality / 360</h1> <h2>HUMAN-CENTER原创 2017-06-05 19:59:55 · 678 阅读 · 0 评论 -
导航栏——toolofna
效果分析要实现这种方块翻转效果，需要一个父元素里有两个平面（div），将其中一个沿着X轴旋转90度后隐藏，当鼠标移到父元素上时，将父元素旋转90度，即可显示出隐藏的那一面思路1、a中有两个div，分别代表方块的两面nav> div> a href="tool.html"> div> h1>TOOLh1>原创 2017-06-05 00:44:17 · 1505 阅读 · 0 评论 -
图片特效 demo
心得我觉得在学习基础理论知识的同时，也要提高自己的实践能力。平时学习JavaScript累了的时候，我就会找些特效刺激刺激神经。CodePen是我无意中发现的，并从此一发不可收拾。里面有很多不错的特效，值得借鉴和积累。不过基本功还是很重要，这些能做的，也仅仅是锦上添花。学会分析他人的特效，然后试着自己模仿而不是直接去看源码，这才有利于自己能力的提升。无效果中间拉伸效果css /* Zoom In原创 2017-05-25 09:40:04 · 472 阅读 · 0 评论 -
海报 demo
效果思路1.设置两张图片和底部的搜索栏<ul> <li> <img src="https://goo.gl/sGrO7g" alt=""> <div class="info"> <p>Drama</p> <div class="button"></div> </div> </li>原创 2017-05-16 01:00:21 · 773 阅读 · 0 评论 -
video全页面 demo
效果思路1.页面由video和div构成<video id="bgvid" autoplay muted loop> <source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm"> <source src="http://thenewcode.com/assets/videos/poli原创 2017-05-23 10:57:07 · 1161 阅读 · 0 评论 -
图片放大 demo
图片放大效果思路1.设置4个div<div class="cards"> <div class="red"></div> <div class="blue"></div> <div class="purple"></div> <div class="brown"></div></div>2.设置伪元素after，用于实现阴影效果 .cards > div:after原创 2017-05-14 21:20:49 · 563 阅读 · 0 评论 -
work——toolofna
效果图片翻转图片标亮滚动面板图片翻转分析将图片先沿着Y轴旋转60度，然后加载页面后用JavaScript改变角度，实现翻转效果思路1、图片作为div的背景图片即可<div id="work"> <div class="thumb mouse"></div> <div class="thumb mouse"></div> <div class="thumb mouse"></d原创 2017-06-05 11:44:03 · 1418 阅读 · 0 评论