一款网页开发人员个人技能和作品展示卡

带渐变色和气泡浮动背景动画。包含html5, css3, jquery和react的png图标。

html5, template, profile

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2366
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

window.onload = function() {

//Create canvas and initialize context
    var canvas = document.getElementById("circles");
    var ctx = canvas.getContext("2d");

//Set the dimensions of canvas equal to the dimensions of the card
    var W = canvas.width = 600;
    var H = canvas.height = 300;

//Number of circles
    var circleNbr = 10;

// Gradient - http://www.planwallpaper.com/static/images/6942095-abstract-background-wallpaper.jpg;
    var bgColor1 = 'rgba(153, 83, 85, 1)';
    var bgColor2 = 'rgba(52, 9, 80, 1)';

//Create an array of circles
    var circles = [];
    for (var i = 0; i < circleNbr; i++) {
        circles.push(new circle());
    }

//Function to create a circle
    function circle() {
        //Random Position
        this.x = Math.random() * W;
        this.y = Math.random() * H;

//Random Velocities
        this.vx = 0.2 + Math.random() * 0.5;
        this.vy = -this.vx;

//Random Radius
        this.r = 3 + Math.random() * 10;

//Random opacity color
        this.color = "rgba(200, 116, 82," + (Math.random() * (1 - .5) + .5).toFixed(1) + ")";
    }

//Function to draw the gradient background with the circles
    function draw() {

var grd = ctx.createLinearGradient(0, 0, W, H);
        grd.addColorStop(0, bgColor1);
        grd.addColorStop(1, bgColor2);

//Fill the canvas with the gradient
        ctx.fillStyle = grd;
        ctx.fillRect(0, 0, W, H);

//Fill the canvas with the circles
        for (var j = 0; j < circles.length; j++) {
            var c = circles[j];

//Draw the circle
            ctx.beginPath();
            ctx.arc(c.x, c.y, c.r, Math.PI * 2, false);
            ctx.fillStyle = c.color;
            ctx.fill();

//Velocity
            c.x -= c.vx;
            c.y += c.vy;

//When the circles are out of the canvas
            if (c.x < -20) c.x = W + 20;
            if (c.y < -20) c.y = H + 20;
        }
    }
    setInterval(draw, 30);
}

编译

CSS

@import "https://fonts.googleapis.com/css?family=Roboto";
*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,
body {
    height: 100%;
    width: 100%;
    font-size: 16px;
    font-family: "Roboto", sans-serif;
}
a {
    color: inherit;
    text-decoration: none;
}
.card {
    background: #2d2d2d;
    position: relative;
    height: 300px;
    width: 600px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}
.card-header {
    background: transparent;
    padding: 0 20px;
    width: 100%;
    height: 80px;
    line-height: 80px;
}
.card-header h3 {
    color: #fff;
    font-size: 1.4rem;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.65);
}
.card-content {
    position: relative;
    height: 160px;
    width: 100%;
}
.projects {
    background: transparent;
    width: 100%;
    height: 100%;
}
.project {
    position: relative;
    display: block;
    float: left;
    height: 112px;
    width: 30%;
    margin-left: 1.6666%;
    margin-right: 1.6666%;
    overflow: hidden;
}
.project img {
    width: 100%;
}
.project:hover .project-details {
    top: 85%;
    opacity: 1;
}
.project .project-details {
    background: rgba(0, 0, 0, 0.8);
    padding: 10px;
    opacity: 0;
    position: absolute;
    width: 100%;
    top: 100%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: top .5s ease, opacity .3s ease;
    -moz-transition: top .5s ease, opacity .3s ease;
    transition: top .5s ease, opacity .3s ease;
}
.project .project-details p {
    color: #fff;
}
.card-footer {
    color: #fff;
    background: rgba(0, 0, 0, 0.65);
    position: absolute;
    height: 60px;
    width: 100%;
    bottom: 0;
    border-top: 2px solid rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}
.profile {
    width: 60%;
    float: left;
}
.profile .profile-group {
    margin-left: 135px;
}
.profile .name {
    font-size: 1.8rem;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
    text-transform: capitalize;
}
.profile .job {
    color: #a5a5a5;
    position: relative;
    margin-top: -5px;
    margin-left: 10px;
    font-size: 1rem;
}
.skills {
    width: 40%;
    float: right;
    padding: 10px;
}
.skills .skills-group {
    float: right;
}
.skills .skill {
    width: 40px;
    height: 40px;
    float: left;
    margin-right: 2px;
}
.skills .skill img {
    width: 100%;
}
.card-img {
    background: #f9f9f9;
    border: 2px solid #111;
    position: absolute;
    bottom: -25px;
    left: 25px;
    width: 100px;
    height: 100px;
    margin-right: 10px;
    float: left;
    -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.7);
    -o-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.7);
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}
.card-img img {
    width: 100%;
}
.canvas-container {
    position: absolute;
    top: 0;
    width: 600px;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
    z-index: -1;
}
#circles {
    position: absolute;
    top: 0;
    left: 0;
    height: 300px;
    width: 600px;
    z-index: -1;
}

HTML

<div class="project">
                <a href="#" target="_blank">
                    <img src="/uploads/161001/normal1.jpg" width="400px">
                    <div class="project-details">
                        <p>Project 1</p>
                    </div>
                </a>
            </div>

<div class="project">
                <a href="#" target="_blank">
                    <img src="/uploads/161001/normal2.jpg" width="400px">
                    <div class="project-details">
                        <p>Project 2</p>
                    </div>
                </a>
            </div>

<div class="project">
                <a href="#" target="_blank">
                    <img src="/uploads/161001/normal3.jpg" width="400px">
                    <div class="project-details">
                        <p>Project 3</p>
                    </div>
                </a>
            </div>

</div>
    </div>

<div class="card-footer">
        <div class="card-footer-content">
            <div class="profile">
                <div class="profile-group">
                    <div class="name">Name</div>
                    <div class="job">Web developer</div>
                </div>
            </div>
            <div class="skills">
                <div class="skills-group">
                    <div class="skill">
                        <img src="/uploads/161101/HTML5_Badge_512.png" width="50px" alt="" />
                    </div>

</div>
            </div>
        </div>
    </div>
    <div class="card-img">
        <img src="/assets/beauty.jpg" width="100px" alt="card-img" />
    </div>
    <div class="canvas-container">
        <canvas id="circles"></canvas>
    </div>
</div>

带渐变色和气泡浮动背景动画。包含html5, css3, jquery和react的png图标。

html5, template, profile

编辑器支持Emmet

快捷键

带渐变色和气泡浮动背景动画。包含html5, css3, jquery和react的png图标。

html5, template, profile

一款水平和垂直双向滑动的项目作品展示幻灯片网页模板

HTML5一款卡片垂吊风格的个人项目展示页面模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：