css怎么实现雪人
摘要：冬天来了，怎么能少的了雪人呢，不管是现实中还是程序员的代码中统统都的安排上，那就一次安排几个雪人兄弟，咱们先看效果图： 有喜欢的就赶紧cv拿走吧！！！ 其详细代码如下： 图1 html部分： <div class="snowman"> <div class="snowman-face"></div>
阅读全文
posted @
2021-12-30 15:43
jimyking
阅读(126)
推荐(0)
纯css实现文字跳动的动画效果
摘要：以下图片为截图所得，所以为静态展示 具体实现的详细代码如下，可直接cv复用： html部分代码： <h1 class="my-words"> <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span><span> </
阅读全文
posted @
2021-12-18 15:01
jimyking
阅读(1010)
推荐(0)
canvas绘制圣诞树
摘要：最近不知道咋的都玩起了用备忘录手绘圣诞树，作为万能的程序员，肯定也要跟上潮流，那用代码来实现圣诞树吧。 实现效果如下： 具体代码如下，可直接cv复用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head
阅读全文
posted @
2021-12-17 15:22
jimyking
阅读(497)
推荐(1)
适合程序员七夕，生日，520等日子发给女朋友的心意小礼物
摘要：图中仅显示部分内容，可根据自己需求进行内容修改，效果图如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> @import url("https://cdn.b
阅读全文
posted @
2021-08-14 09:36
jimyking
阅读(250)
推荐(0)
超好看的鼠标悬停渐变按钮合集
摘要：html部分： <div class="buttons"> <button class="btn-hover color-1">BUTTON</button> <button class="btn-hover color-2">BUTTON</button> <button class="btn-h
阅读全文
posted @
2021-07-12 09:12
jimyking
阅读(274)
推荐(0)
css边框样式（动画）
摘要：html： <div class="wrap"> <a href="#">shui</a> </div> css： body { display: -webkit-box; display: flex; flex-wrap: wrap; justify-content: center; align-
阅读全文
posted @
2021-05-12 15:31
jimyking
阅读(121)
推荐(0)
css文字动画（自动换文字）
摘要：html： <div class="content"> <div class="content__container"> <p class="content__container__text"> 酒之 </p> <ul class="content__container__list"> <li cl
阅读全文
posted @
2021-05-11 09:31
jimyking
阅读(544)
推荐(0)
css实现文字过度变色效果
摘要：html： <div class="news text-center"> <a href="#"> <span>新</span> <span>闻</span> <span>中</span> <span>心</span> </a> </div> css： .news { font-size: 40px
阅读全文
posted @
2021-05-09 10:29
jimyking
阅读(622)
推荐(0)
css + js 实现文字分割动画
摘要：欲实现如下的文字分割效果： html部分代码如下： 悠酒网 css部分代码如下： body { height: 100%; background: white; } h1 { color: black; text-align: center; font-size: 10vw; position: r
阅读全文
posted @
2021-05-03 15:31
jimyking
阅读(203)
推荐(0)
css实现毛玻璃效果
摘要：html：<div class="card"> </div> css： .card { position: relative; height: 270px; width: 450px; border-radius: 25px; background: rgba(255, 255, 255, 0.2)
阅读全文
posted @
2021-05-02 15:25
jimyking
阅读(319)
推荐(0)
css实现相框效果
摘要：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { background: skyblue; color: #FFFFFF; display: flex;
阅读全文
posted @
2021-04-28 09:13
jimyking
阅读(1022)
推荐(0)
如何用CSS实现好看的角标
摘要：需要实现如下图所示的角标 其代码如下所示，可直接cv复用，根据自行需要进行修改： html部分代码： <div class='card-wrap'> <div class='news1'> <div class='ribbon'> <div class='ribbon1'>热点</div> </di
阅读全文
posted @
2021-04-21 10:20
jimyking
阅读(1435)
推荐(1)
css图片显示文字（上浮）
摘要：<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/lobal.css" /> <style> .main-c { /*定义父级的大小，设置高度为图片高度，便于
阅读全文
posted @
2021-04-13 22:25
jimyking
阅读(986)
推荐(0)
如何在照片上添加外边框以及照片旋转
摘要：<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ /* background: red; */ width: 120px; border: 5px #0000FF solid; bor
阅读全文
posted @
2021-04-09 23:18
jimyking
阅读(228)
推荐(0)
如何画出一条竖线和横线
摘要：竖线：仅显示border-left或border-right；横线：仅显示border-top或border-bottom或span css:border-left: 1px solid black;(仅显示边框的左边,颜色为黑色；其他同理) span{ display: inline-block;
阅读全文
posted @
2021-04-08 23:59
jimyking
阅读(544)
推荐(0)
通过css实现幻灯片效果
摘要：html: css: .box { border: 0px solid white; width: 1520px; height: 480px; margin: 0 auto; position: absolute; overflow: hidden; } .box ul{ width: 7600p
阅读全文
posted @
2021-04-07 23:57
jimyking
阅读(187)
推荐(0)
浙公网安备 33010602011771号