css
静静静静静rj
这个作者很懒,什么都没留下…
展开
-
html: 404界面
body<div class="figure"> <div class="mj"> <div class="head"> <div class="nose"></div> <div class="hair"> <div class="ponytail"></div> <div class="frontpony"></...原创 2020-05-19 09:10:41 · 1467 阅读 · 0 评论 -
html+css: 打招呼的卡比兽动画
body<div class="snorlax"> <div class="snorlax__head"> <div class="snorlax__head-outline"></div> <div class="snorlax__ear snorlax__ear--left"></div> <div class="snorlax__ear snorlax__ear--right">...原创 2020-05-19 09:03:23 · 694 阅读 · 0 评论 -
html+css: 西瓜时钟
body 中<div class="wrapper"> <div class="face"> <div class="seeds"> <div></div> <div></div> <div></div> <div></div> <div></div> <...原创 2020-05-19 08:59:51 · 424 阅读 · 0 评论 -
html+css: 小狗动画
body<div class="main"> <div class="dog"> <div class="dog__paws"> <div class="dog__bl-leg leg"> <div class="dog__bl-paw paw"></div> <div class="dog__bl-top top">...原创 2020-05-19 08:55:44 · 1192 阅读 · 0 评论 -
html+css+js:粒子束
body中<canvas id="canvas">Canvas not supported.</canvas>css* { margin: 0; padding: 0;}canvas#canvas { display: block; background: #000;}js(function() { 'use strict'; window.addEventListener('load', function(...原创 2020-05-15 11:56:31 · 298 阅读 · 0 评论 -
樱花旋转
css/*樱花旋转*/@font-face {font-family: "iconfont"; src: url('//at.alicdn.com/t/font_679578_qyt5qzzavdo39pb9.eot?t=1527145839653'); /* IE9*/ src: url('//at.alicdn.com/t/font_679578_qyt5qzzavd...原创 2020-04-30 15:18:34 · 7622 阅读 · 0 评论 -
html页面鼠标单击----------爱心特效
直接将以下代码复制到html中即可。<script type="text/javascript"> !function (e, t, a) {function r() {for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1))...原创 2019-10-31 13:57:30 · 4484 阅读 · 0 评论 -
html+js:页面鼠标单击----------烟花爆炸特效1
<script src="https://blog-static.cnblogs.com/files/zouwangblog/mouse-click.js"></script><canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 21...原创 2020-04-27 13:43:50 · 2052 阅读 · 0 评论 -
html+css:鼠标跟随特效气泡3
示例见图<!DOCTYPE html><html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="...原创 2020-04-27 13:28:40 · 409 阅读 · 0 评论 -
html+css:鼠标跟随特效气泡2
图示见下<!DOCTYPE html><html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="...原创 2020-04-27 13:25:49 · 323 阅读 · 1 评论 -
html+css:鼠标跟随特效气泡1
示例如图<!DOCTYPE html><html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="...原创 2020-04-27 13:21:56 · 417 阅读 · 0 评论 -
html+css:折扇效果
body中<div class="box"> <div>作赋凌相如</div> <div>十五观奇书</div> <div>深藏身与名</div> <div>事了拂衣去</div> <div>千里不留行</div> ...原创 2020-04-28 17:03:47 · 912 阅读 · 0 评论 -
html+JS:爱心鼠标跟随特效
截图工具截不到鼠标。。。body中加入<span class="heart-eye"> <span class="heart"></span></span>css样式.heart-eye { position:absolute; animation:pulse 1s ease-out infi...原创 2020-04-24 17:22:27 · 1148 阅读 · 1 评论 -
html+css样式:图片切换-----立体旋转
html如下:<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="view...原创 2020-04-14 09:17:43 · 1170 阅读 · 0 评论 -
html+CSS样式:雪花飘落背景(雪花为图片)
多种雪花图片,自由下落到底端渐变消失<!DOCTYPE html><html style="background-color: black"><head> <meta charset="UTF-8"> <title>雪花飘落</title> <meta content='wid...原创 2020-04-08 11:45:44 · 6182 阅读 · 4 评论 -
html+JS:画布canvas星空背景
由远及近视觉效果<!doctype html><html><head><meta charset="utf-8"><title>纯js完成canvas星空粒子效果-jq22.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jq...原创 2020-04-08 10:46:17 · 2489 阅读 · 3 评论 -
前端html+css: 3D滚动正方体————按住鼠标左键即可拖动
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> h3{ text-align: center; color: #5A5A5A;} body{...原创 2020-04-08 10:38:57 · 1488 阅读 · 1 评论