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 · 1757 阅读 · 3 评论 -
canva绘制满屏繁星 + 背景音乐 + css3炫酷3D照片集
● 满屏繁星用canvas绘制，有面向对象的思想 ● css33D立方体采用纯css3知识点 ● 点击图片这一块的一些交互用到了js的事件，鼠标经过点击图片一行的父级立方体停止旋转，鼠标离开立方体开始旋转 ● 两侧文字呈一个一个字的展现用到了setInterval定时器 ● 头部文字两侧滚动 用到h5里面的marquee标签 ● 背景音乐采用embed标签 <!DOCTYPE html&...原创 2019-04-21 09:36:01 · 2017 阅读 · 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 · 9607 阅读 · 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 · 1435 阅读 · 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 · 1838 阅读 · 0 评论 -
css3边框、背景
css3第一天 一、css3 边框 边框属性： 1)border-radius 2)box-shadow 3)border-image 1. 圆角框 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 · 275 阅读 · 0 评论