前端小实例
关注
分享
扫一扫
本栏目将前端大项目拆分成不同应用小实例，分享给大家，方便大家借鉴，同时记录自己的前端点滴应用。
Andone_hsx
本应该努力的时候，为何选择安逸
展开
-
【侧边栏-手风琴效果-js实现】Js实现侧边栏-手风琴效果-带选择小箭头
【Js实现侧边栏-手风琴效果-带选择小箭头】效果展示：动作效果描述：第一次，点击 二级标题，小箭头 ----顺时针旋转----90度，风琴列表弹出；第二次，点击二级标题，小箭头 ----逆时针旋转----90度，风琴列表收起；CSS样式代码：/**基础样式**/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend,原创 2020-10-15 21:13:42 · 985 阅读 · 0 评论 -
用CSS3实现阴影效果
任务描述本关任务：实现下面效果，包括外阴影，多行省略，圆角的设置。效果如下：相关知识为了完成本关任务，你需要掌握：1.外阴影，2.多行省略，3. 设置圆角。外阴影下面是基本的html结构：<div class="shadow"></div>效果如下：现在要左边，右边，下边都添加阴影。效果如下：该如何实现呢？咱们先实现右...原创 2018-12-17 11:17:16 · 1295 阅读 · 0 评论 -
用CSS3实现放大效果
任务描述本关任务：用CSS3放大效果。效果如下：相关知识为了完成本关任务，你需要掌握：1.transform属性，2.transition属性。transform属性下面是基本的html结构，：<div class="scale"> <img src="img/diary1.jpg" alt="diary1"/> </div>..原创 2018-12-17 11:15:40 · 8531 阅读 · 0 评论 -
用CSS3实现移动效果
任务描述本关任务：用CSS3实现物体移动效果。效果如下：相关知识为了完成本关任务，你需要掌握：1.transform属性，2.transition属性。transform属性下面是基本的html结构，：<div class="move"> <p>向上移动</p> </div>效果如下：现在需要平滑的往上移...原创 2018-12-17 11:14:10 · 6820 阅读 · 2 评论 -
CSS3高级之自动轮播
通常情况下大牛们实现轮播效果主要通过js技术，但是今天我们撇开js，单纯利用css3高级的动画效果同样可以实现自动轮播效果！先看效果： 实现原理如下： 四张图片并排放置，同时左移相应距离， 注意：第四张和第一张图片相同，用于在短时间内切换补位； 若采用三张图片的话，会出现第一张图片在切换时突然出现，无法达到和谐的平滑轮播效果 再手机屏幕相应地方设置一个外框，溢出部分隐藏；代码如下：<!do原创 2017-02-23 23:34:50 · 1252 阅读 · 0 评论 -
CSS3之线条特效（鼠标悬停线条从中间变长）
当鼠标悬停在红色圆上时，福字下面出现一条白色的线条从中间不断向两边延伸<!doctype html><html> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=原创 2017-01-19 22:52:55 · 9812 阅读 · 0 评论 -
CSS3特效之翻转
鼠标悬停，图片翻转<!doctype html><html> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name原创 2017-01-19 22:16:42 · 811 阅读 · 0 评论 -
CSS3练习之时钟计时器，3D旋转
1、时钟计时效果（计时器） 模拟时钟从00:00:00开始转动计时 clock.html<!doctype html><html> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Autho原创 2017-01-15 22:40:14 · 865 阅读 · 0 评论 -
CSS3练习之通用兄弟选择器、伪元素选择器
点击按钮出现各图片： Demo .clear:after{ content:""; display:block; clear:both; } #dl a{ width:100px; height:20px; border:1px solid #000; back原创 2017-01-15 17:47:30 · 1459 阅读 · 2 评论 -
利用Html+纯CSS实现计时器效果
问题描述最近在学习的过程中一直静不下心来，在网上找了一些计时器软件安装包带很多第三方流氓软件，决定干脆自己做一款。开始考虑利用Js实现计时逻辑业务，后面仔细想了一下，单纯利用CSS3高级就可以实现。页面设计页面设计理念好看就行，在此就不多说，直接上静态页面代码！HTML代码：<html><head> <title>页面计时器&...原创 2019-09-06 13:56:28 · 8512 阅读 · 3 评论