css
文章平均质量分 56
Y_qilin_
这个作者很懒,什么都没留下…
展开
-
css3关键帧动画+伪元素实现心动特效
css3关键帧动画+伪元素实现心动特效效果图代码详解效果图知识点: 关键帧动画animation设置元素运动属性值 利用元素的前后伪元素设置旋转角度将元素拼凑成爱心形状代码详解<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-03-04 17:49:25 · 416 阅读 · 1 评论 -
小米官网前端页面还原
小米官网前端页面还原网页效果图片HTMLcss初始化样式外部样式文件网页效果图片HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小米商城-小米10 Pro、Redmi原创 2020-11-08 11:20:03 · 2526 阅读 · 9 评论 -
web淘宝电商页面搭建
web淘宝电商页面搭建点击此处下载完整代码图片效果展示首屏内容次屏内容整体代码并不包含JavaScript部分,因此页面为静态页面,但代码包含了淘宝网的鼠标触发事件。原创 2020-08-26 10:59:56 · 961 阅读 · 0 评论 -
原生JS验证码登录界面
原生JS验证码登录界面效果图html页面结构css页面样式JavaScript页面行为效果图html页面结构页面的结构以input、label、canvas等标签组成<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&原创 2020-08-20 15:52:45 · 1104 阅读 · 0 评论 -
css3D立方体旋转动画
css3旋转立方体效果图html立方体结构css3立方体样式效果图html立方体结构整个立方体的结构分为六个正方形面,所以需定义六个div结构来表示立方体的六个平面,再用css3的transform属性移动六个平面组成3D的立方体结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width原创 2020-08-17 16:16:14 · 729 阅读 · 0 评论 -
图片悬停特效
鼠标触发图片悬停特效html页面结构css页面样式本篇文章介绍的是一个鼠标触发的hover悬停特效,鼠标放在图片上,图片旋转一周。涉及到的知识点包括css伪元素、css3动画特效、css3的transform方法、css浮动、定位等。样图如下:html页面结构整个页面结构在一个父级div下,其下的八个类名为item的div下分别包含一个img标签,从而引入图片<body> <div class="wrapper"> <div class="it原创 2020-08-16 09:30:33 · 796 阅读 · 0 评论