![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
网页特效
文章平均质量分 53
W Y L
这个作者很懒,什么都没留下…
展开
-
js css3挂历撕掉动画特效
js基于css3属性制作挂历日历本,默认获取当前日期和星期,通过鼠标点击日历本挂历掉落动画特效。 这是古董挂历哈哈哈好久没见过了,喜欢的一定要试哦~html代码<div class="calendar"> <div class="pages"></div></div>css代码*,*::before,*::after { ...原创 2020-05-08 11:27:31 · 793 阅读 · 0 评论 -
css3精美的手风琴菜单特效
纯css3实现的精美手风琴菜单特效,一定要保存哦~html代码<head><meta charset="utf-8"><title>手风琴菜单</title><!--图标库,要引入这个图标库哦--><link rel="stylesheet" type="text/css" href="https://cdnjs.cl...原创 2020-05-05 11:59:22 · 482 阅读 · 0 评论 -
css3绘图制作灰太狼头像动画特效
html代码:<body><div id="bigBigWolf"> <div id="url"><a href="#"></a></div> <div class="face"> <div class="left"></div> <...原创 2020-04-29 14:29:26 · 429 阅读 · 0 评论 -
css3同心爱心跳动特效
今天做的是css3同心爱心跳动特效,爱您们哦~html代码<div class="back"></div><div class="love"></div><div class="love-1"></div><div class="love-2"></div>css代码@charset ...原创 2020-04-27 15:26:48 · 525 阅读 · 0 评论 -
H5键盘按键交互动画特效
html5基于css3制作酷炫的点击按键键盘,彩色方格轮廓交互动画特效。html代码<div class="case"> <!-- First row --> <div class="key" data-key="escape">esc</div> <div class="key" data-key="1"></d...原创 2020-05-01 12:34:11 · 1026 阅读 · 0 评论 -
css3绘制黑色可爱的小猫咪和爱心图形动画特效
这个是用css3绘制黑色可爱的小猫咪,如果喜欢的你们可以试一下哦~html代码<body><div class="container"> <div class="cat"> <div class="face"> <div class="ear-left"> <div class="in...原创 2020-04-26 12:30:58 · 930 阅读 · 0 评论 -
原生JS实现记忆翻牌小游戏
html代码<div id="game"> <!-- div.block*16>div.pic --> </div>css代码* { padding: 0; margin: 0;}#game { width: 600px; height: 600px; margin: 0 auto;}.block { ...原创 2020-05-03 19:51:53 · 1808 阅读 · 0 评论 -
CSS 实现充电动画
html代码:<div class="container"> <div class="battery"></div></div>css代码: <style> html, body { width: 100%; height: 100%;...原创 2020-01-21 17:48:58 · 566 阅读 · 0 评论 -
CSS3动画按钮效果
HTML代码:<div class="button"> <a href="#">Download</a> <p class="top">click to begin</p> <p class="bottom">1.2MB .zip</p></div>CSS代码:<...原创 2019-12-27 19:19:19 · 115 阅读 · 0 评论 -
用CSS绘制形状和图形
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形、圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大。html代码:<div class="box"></div>Square(正方形) <style> .box{ width: 100px; ...原创 2019-12-25 13:57:32 · 186 阅读 · 0 评论 -
CSS实现粒子动效的按钮
html代码:<body><button class="button">Button</button></body>css代码: <style> body{ margin: 200px; } .button { display:...原创 2020-01-11 09:35:11 · 531 阅读 · 0 评论 -
纯CSS3实现饼状图
<div class="pie"></div>.pie { width: 100px; height: 100px; border-radius: 50%; background: yellowgreen; background-image: linear-gradient(to right, transparent 50%, #655 0);}.pie::before { content: ''; display:原创 2021-01-14 09:38:03 · 237 阅读 · 0 评论 -
css3多米诺骨牌动画特效
css3绘制多米诺骨牌动画,彩色的多米诺骨牌动画演示特效。喜欢的要试试哦~html代码<!DOCTYPE html><html lang="en" ><head> <meta charset="UTF-8"> <title></title></head><body><div class="container"> <h1>多米诺</h1> <原创 2021-01-18 09:54:38 · 395 阅读 · 0 评论 -
仙人掌植物盆栽ui布局特效
css3绘制桌面上的4盆仙人掌植物摆放布局,盆栽植物ui特效。 html代码<body><div class="plants"> <div class="plant "> <div class="leaves plant-1"> <div class="limb"></div> </div> </div> <div class="plant plant-2">原创 2020-07-05 22:08:07 · 211 阅读 · 0 评论 -
旋转的沙漏ui动画特效
纯css3绘制卡通沙漏,当沙漏滴完,自动旋转沙漏动画特效。<body><div class="title"> Give it a minute...</div><div class="container"> <div class="hourglass"> <div class="top"></div> <div class="bottom">原创 2020-07-10 11:12:44 · 447 阅读 · 0 评论 -
html5气球大战小游戏代码
<style> body { margin: 0; padding: 0 } #ballDiv { position: fixed; top: 0; left: 0 } .balloon { width: 150px; height: 150px; position: absolute; left: 0; top: 0; background-color: #f3778d; border-radiu.原创 2020-07-11 14:36:45 · 918 阅读 · 0 评论 -
星巴克咖啡杯svg特效
css3 svg绘制逼真的星巴克logo饮料杯,3D阴影的咖啡杯ui特效。HTML代码<body> <div class="container"> <div class="cup"> <svg class="logo" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#"原创 2020-07-03 08:33:10 · 567 阅读 · 1 评论 -
纯css3计算器特效
css3属性制作简单的计算器加减乘除运算代码。<form> <div id="digit1"> <input type="checkbox" id="d1-1" class="number1"> <input type="checkbox" id="d1-2" class="number2"> <input type="checkbox" id="d1-3" class="number3"> <input ty原创 2020-07-15 18:41:56 · 312 阅读 · 0 评论 -
css大白
HTML代码:<!--大白--><div class="bigwhite"> <!--头部--> <div class="head"> <div class="eye"></div> <div class="eye2"></div> &...原创 2020-02-11 15:29:50 · 169 阅读 · 0 评论 -
CSS抖音标
HTML代码:<div class="g-container"> <div class="j"></div> <div class="j"></div></div>CSS代码:<style> body { background: #000; ...原创 2020-02-12 16:32:48 · 375 阅读 · 0 评论 -
css波浪百分比
HTML代码:<div class="container"> <div class="wave"></div></div>CSS代码:<style> .container { position: absolute; width: 200px; ...原创 2020-02-13 17:16:31 · 378 阅读 · 0 评论 -
js找色块小游戏代码
这个是做的是一个js找不同颜色的小色块,你也快来试试吧!css代码<style> *{ margin: 0; padding: 0; } #box{ width: 600px; height: 600px; margin: auto; margin-top: 100px; } #score{ width: 180px; height: 50px; line-height: 150%; font-size: 2em; position: a原创 2020-06-22 08:54:50 · 1250 阅读 · 0 评论 -
520用css实现卡通人物求婚动画特效
喜欢的一定要做一下哦~添加的是图片HTML代码<div class="w-t"> <div class="w-t-m">亲爱的,嫁给我吧!!</div> <img src="png/boom.png" alt="" class="boom1"> <img src="png/boom.png" alt="" class="boom2"> <img src="png/boom.png" alt="" clas原创 2020-05-20 12:38:39 · 409 阅读 · 0 评论 -
css3一碗汤圆动画
今天是用纯css做的一碗汤圆动画,特别的可爱,喜欢的可以做一下哦~ 也可以和我分享好看的动画一起来做啊这个是里面用到的图片:Html代码<div class="bowl"> <div class="back"></div> <div class="spoon"> <div class="scoop"></div> </div> <div class="contents">原创 2020-06-01 21:43:45 · 365 阅读 · 2 评论 -
创意的气泡滑块拖动vue特效
基于vue制作手机端气泡滑块拖动ui交互,线条上滑块拖动气泡提示ui特效。Html代码<!DOCTYPE html><html lang="en" ><head> <meta charset="UTF-8"> <title>创意的气泡滑块拖动vue特效</title><link rel="stylesheet" href="css/style.css"></head><body>原创 2020-06-15 08:55:50 · 1075 阅读 · 1 评论 -
卡通飞翔的牛动画特效
纯css3绘制蝴蝶牛,卡通奶牛,天空中飞行的牛吉他演奏动画场景特效。 喜欢的一定要试一下哦~笔芯HTML代码<body><div class="cloud-1"> <div class="cloud-circle-1"></div> <div class="cloud-circle-2"></div> <div class="cloud-circle-3"></div> <div c原创 2020-06-25 17:41:36 · 350 阅读 · 0 评论 -
夜空中繁星露营地场景特效
css3绘制夜晚满天繁星,流星滑过,山上露营帐篷动画场景特效,更好的欢迎分享HTML代码<div class="canvas"> <div class="sky"></div> <div class="stars"> <div class="falling-stars"> <div class="star-fall"></div> <div class="star-fall原创 2020-05-26 21:06:01 · 280 阅读 · 0 评论 -
卡通的平板卧推男孩动画特效
纯css3绘制卡通的健身男孩,平板卧推健身ui图形动画特效。 <div class="container"> <div class="bench-container"> <div class="seat"></div> <div class="left"></div> <div class="right"></div> </div> <div class="man">原创 2020-09-08 08:34:13 · 337 阅读 · 0 评论 -
用CSS3如何实现钟摆动画的导航栏菜单效果
我们都知道,CSS3可以实现很多很酷的动画效果,而今天我们将与大家分享一期用CSS3制作的钟摆动画菜单效果,在这个动画中,我们主要采用CSS3来控制SVG图标的左右摆动效果。首先,我们需要在HTML的head部分引入以下文件:<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'> <link rel='styl原创 2020-10-29 11:08:22 · 513 阅读 · 0 评论 -
简单的文件夹打开ui特效
css3绘制简易的文件夹图标,鼠标悬停文件夹打开动画特效。 HTML代码<div class="folder"> <div class="paper one"></div> <div class="paper two"></div> <div class="paper three"></div> <div class="paper four"></div><原创 2020-09-01 13:31:51 · 235 阅读 · 0 评论 -
爱心信封打开ui动画特效
jQuery css3制作一封情书打开爱心冒泡动画,打开信封爱心跑出来动画特效。 css代码#envelope { position: relative; width: 280px; height: 180px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; margin-left: auto; margin-right: auto; top: 150px; background-co原创 2020-10-06 10:07:10 · 1735 阅读 · 0 评论 -
用10行JavaScript代码制作一款漂亮的视差效果
在本文中,我们将使用HTML,CSS和仅10行JavaScript代码来制作一个漂亮的视差效果。HTML<main> <header> <div class="container"> <i class="fas fa-5x fa-laugh"></i> <h3>Welcome</h3> <p>Scroll to see how cool i am!</p&原创 2020-10-28 10:24:02 · 233 阅读 · 0 评论 -
多层嵌套的CSS 3D动画技术详解
CSS动画是当前一种非常火爆的技术,我说的并不是一些简单的颜色变换或长短属性变换,我说的是3D变换技术;纯CSS实现的翻滚旋转立方体就是最典型的例子。网上能找到很多关于CSS动画的代码,但对于一个程序员来说,真正理解其为什么会动起来的原理是非常重要的。下面让我来一步一步的带你理解网页中相互嵌套的3D动画是如何实现的!假设我们在一个门框内有一扇门:HTML代码非常简单:<div class='container'> <div class='frame'> <di原创 2020-10-13 09:03:09 · 202 阅读 · 0 评论 -
纯CSS3实现柱状图的3D立体动画效果
今天这篇文章所实现的动画效果起源于一个小小的想法,这个想法来自于另一个网站的一篇文章,它介绍了如何在网页中使用CSS、图片和JavaScript创建立体的柱状图。在阅读了那篇文章之后,我想挑战一下,尝试使用纯CSS来实现相同的效果。一开始的难点在于创建一个六面半透明的立方体,而后面的难点在于如何创建一个完整的带有动画效果的3D柱状图。下面,我们就一起来看一下如何解决这些难点。让我们先列举一些要实现的要求,我们所实现的柱状图应该是:背景独立(即柱状图与背景互不影响)自适应的(柱子数量的多少不会影响.原创 2020-10-20 10:48:45 · 1624 阅读 · 0 评论 -
可爱的灯泡眨眼表情动画特效
纯css3绘制发光点亮的灯泡,可爱的灯泡表情,发光的灯泡动画特效。 下面是代哦~:root { --unit: 1vmin; --bulb--one: hsla(210, 20%, 90%, 1); --bulb--two: hsla(210, 20%, 75%, 1); --bulb--three: hsla(210, 0%, 100%, 1); --bulb--four: hsla(210, 10%, 50%, 0.5); --cap--one: hsl(36, 22%, 9原创 2020-11-13 10:43:12 · 283 阅读 · 0 评论 -
下雪的2021新年倒计时主题特效
基于canvas制作全屏飘雪背景,2021年翻页倒计时间动画特效。适用于各种活动主题倒计时特效。两种特效结合可以自由拆分使用。*,*:before,*:after { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;}body { background: #73cdc0;}canvas#snow { width: 100vw; height: 100vh原创 2020-12-10 09:03:56 · 375 阅读 · 0 评论 -
vue图片变大缩小手风琴特效
vue+jQuery制作图片变大缩小,文字内容结合滑动手风琴动画特效。页面代码简洁实用。<section class="main_box"> <div class="box" id="app"> <ul> <li :class="li.class" v-for="li in data"> <a :href="li.href" target="_blank"> <h3>{{li.name}}</h3&原创 2021-01-02 10:11:38 · 621 阅读 · 0 评论 -
雪地上的圣诞老人图形特效
圣诞节~css3绘制卡通的圣诞老人,飘着雪地上的圣诞老人ui特效。ps:响应式的图形布局css代码.cartoon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80vmin; height: 80vmin;}.cartoon div { position: absolute; box-sizing: border-box;}.b {原创 2020-12-24 10:17:00 · 798 阅读 · 6 评论 -
方形数字时钟ui交互特效
js css3制作电子数字时钟,带秒表进度条,点击暂停或开始设置时钟ui交互特效。css代码:*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}:root { --purple-dark: #5F546E; --purple-light: #827593; --gray-light: #E5E3E8; --gray-dark: #A5A2A9; --light: #fcf8fb; --transition:原创 2020-11-20 11:26:27 · 346 阅读 · 0 评论 -
纯css3可爱的Loading加载动画特效
这个是一款可爱的loading动画,觉得好看的小伙伴一定要试试哦!html代码<div class="loadster"> <div class="loadster__body"> <div class="body__gum"></div> </div> <div class="load...原创 2020-04-20 12:25:05 · 465 阅读 · 0 评论