CSS3案例
保存基于css3的特效案例
crazy的蓝色梦想
小柒 爱前端
展开
-
CSS3 画皮卡丘
前面的话周末放松放松,刚好看到知乎上面的小demo——css画皮卡丘,挺可爱的,练练手。同时也分享给大家<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid...原创 2019-07-13 11:55:09 · 1679 阅读 · 3 评论 -
canva绘制满屏繁星 + 背景音乐 + css3炫酷3D照片集
● 满屏繁星用canvas绘制,有面向对象的思想● css33D立方体采用纯css3知识点● 点击图片这一块的一些交互用到了js的事件,鼠标经过点击图片一行的父级立方体停止旋转,鼠标离开立方体开始旋转● 两侧文字呈一个一个字的展现用到了setInterval定时器● 头部文字两侧滚动 用到h5里面的marquee标签● 背景音乐采用embed标签<!DOCTYPE html&...原创 2019-04-21 09:36:01 · 1943 阅读 · 0 评论 -
HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图)
3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 perspective: 800px;(景深)和使立方体呈3d效果展示的transform-style:preserve-3d来实现;全屏的雪花飘落用原生js来实现(随机的大小,透明度的变化等),有详细注释;html5主要是实现背景音乐和头部的字体卷动效果。< audio sr...原创 2019-04-08 16:36:03 · 9549 阅读 · 26 评论 -
css3炫酷立方体3D旋转
直接上代码,代码很容易懂<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...原创 2019-03-25 17:33:09 · 1367 阅读 · 0 评论 -
css3制作3D效果 LoveHeart(小小的表白神器)---包含思路
这是用css3做出来的一个小小的特效,最主要运用的是css3中transfrom的用法。思路:1:首先外部有一个heard的大盒子,用来包裹里面的照片盒子cube,将其设置transform-style:preserve-3d;(设置3d环境),并且使其旋转,以便看到cube的3d效果。2:cube盒子也设置为3d环境3:cube里面的img分别用一个div包裹,分别做cube的6个面,...原创 2019-03-14 16:12:10 · 1778 阅读 · 0 评论 -
css3边框、背景
css3第一天一、css3 边框边框属性:1)border-radius2)box-shadow3)border-image1. 圆角框border:2px solid #a1a1a1;border-radius:25px;border-radius等价于:border-top-left-radius:border-top-right-radius:border-botto...原创 2018-11-14 19:54:52 · 241 阅读 · 0 评论