标签 CSS 下的文章 - 韩小韩博客

2022-04-27

记个笔记纯CSS简单图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .con { position: relative; left: 36px; top: 36px; width: 600px; height: 600px; border-radius: 100px; background-color: #7094f1; overflow: hidden; transform: rotate(170deg); box-shadow: 0px 0px 20px -5px #333; } .r { position: absolute; border-radius: 50%; opacity: .7; } .con-1 { width: 900px; height: 900px; background-image: linear-gradient(#7094f1, #7fa0f9); right: -450px; top: -450px; } .con-2 { width: 750px; height: 750px; background-image: linear-gradient(#8eadfe, #7fa0f9); right: -375px; top: -375px; } .con-3 { width: 600px; height: 600px; background-image: linear-gradient(#a2c7fd, #98e1f7); right: -300px; top: -300px; } .con-4 { width: 166px; height: 166px; background: #70b4f9; left: -131px; top: 100px; } .con-round { width: 75px; height: 75px; background-image: linear-gradient(#6aecff, #bdeaff); right: 380px; top: 94px; } </style> </head> <body> <div class="con"> <div class="con-1 r"></div> <div class="con-2 r"></div> <div class="con-3 r"></div> <div class="con-4 r"></div> <div class="con-round r"></div> </div> </body> </html>

2022年04月27日
440 阅读
2 评论
3 点赞

2021-05-27

鼠标点击波纹特效 html+css+js 定义标签 <div class="card"> <img src="3.3.png" alt="x" width="100%"> <h3>北极光之夜</h3> <p > 生活下去,错误下去,堕落下去,为胜利而欢呼,从生命中重新创造生命! </p> </div>卡片和文字的基本样式 .card{ width: 200px; height: 300px; box-shadow: 1px 1px 5px #555; cursor: pointer; background-color: rgb(243, 243, 243); position: relative; overflow: hidden; } .card h3,.card p{ padding: 5px; text-align: center; font-family: 'fangsong'; font-weight: bold; user-select: none; }{callout color="#f0ad4e"}cursor: pointer; 鼠标样式为小手。overflow: hidden; 子元素大小超出卡片区域的被隐藏。user-select: none; 文本不可选中。{/callout}js部分，见注释 <script> /* 获取元素 */ var card = document.querySelector('.card'); /* 绑定点击事件 */ card.addEventListener('click',function(e){ /* 获取鼠标点击的水平位置 */ let x = e.clientX - this.offsetLeft; /* 获取鼠标点击的垂直位置 */ let y = e.clientY - this.offsetTop; /* 创建一个span元素 */ let circle = document.createElement('span'); /* 为span元素添加定位的 left 属性 */ circle.style.left = x + 'px'; /* 为span元素添加定位的 top 属性 */ circle.style.top = y + 'px'; /* 卡片添加创建好的span元素 */ card.appendChild(circle); /* 1s后移除span元素 */ setInterval(function(){ circle.remove(); },1000) }) </script>添加上一步创建的 span 元素的css样式 .card span{ position: absolute; transform: translate(-50%,-50%); background-color: rgb(255, 254, 254); border-radius: 50%; animation: big 1s ; } @keyframes big{ 0%{ width: 0px; height: 0px; opacity: 1; } 100%{ width: 400px; height: 400px; opacity: 0; } }{callout color="#f0ad4e"}position: absolute; 绝对定位。transform: translate(-50%,-50%); 向左和上移动自身宽度和高度的一半。animation: big 1s；定义动画，刚好1s完成动画。opacity: 1; 不透明。opacity: 0; 透明。{/callout}完整源码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; display: flex; justify-content: center; align-items: center; background-image: radial-gradient(white,black); } .card{ width: 200px; height: 300px; box-shadow: 1px 1px 5px #555; cursor: pointer; background-color: rgb(243, 243, 243); position: relative; overflow: hidden; } .card h3,.card p{ padding: 5px; text-align: center; font-family: 'fangsong'; font-weight: bold; user-select: none; } .card span{ position: absolute; transform: translate(-50%,-50%); background-color: rgb(255, 254, 254); border-radius: 50%; animation: big 1s ; } @keyframes big{ 0%{ width: 0px; height: 0px; opacity: 1; } 100%{ width: 400px; height: 400px; opacity: 0; } } </style> </head> <body> <div class="card"> <img src="3.3.png" alt="x" width="100%"> <h3>北极光之夜</h3> <p > 生活下去,错误下去,堕落下去,为胜利而欢呼,从生命中重新创造生命! </p> </div> <script> var card = document.querySelector('.card'); card.addEventListener('click',function(e){ let x = e.clientX - this.offsetLeft; let y = e.clientY - this.offsetTop; let circle = document.createElement('span'); circle.style.left = x + 'px'; circle.style.top = y + 'px'; card.appendChild(circle); setInterval(function(){ circle.remove(); },1000) }) </script> </body> </html>{callout color="#f0ad4e"}转自ㅤㅤㅤ超简单的鼠标点击波纹特效 html+css+js - 掘金ㅤㅤㅤ作者：北极光之夜ㅤㅤㅤ地址：https://juejin.cn/post/6966634855656325156{/callout}

2021年05月27日
1,686 阅读
0 评论
2 点赞

2019-08-28

CSS动态渐变彩色文字代码 HTML部分:<div class="wrap"> 闲看儿童捉柳花</div>CSS部分:@keyframes move { 0% {background-position: 0 0;} 100% { /*宽度固定，如果为百分比背景不会滚动*/ background-position: -300px 0; } } .wrap { /*设置背景渐变色*/ background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange,yellow, green, yellow, orange, red); /*chrome私有样式，加前缀，文字显示背景图片*/ -webkit-background-clip: text; animation: move 5s infinite; /*文字颜色设为透明*/ color: transparent; /*宽度固定*/ width: 300px; }

2019年08月28日
2,011 阅读
0 评论
0 点赞

2019-03-26

JS实现HTML动态渐变纯色背景+CSS动态渐变字 CSS代码：<style> #ishanColor { animation: change 10s infinite; } @keyframes change { 0% { color: #66e616; } 25% { color: #556bd8; } 50% { color: #e40707; } 75% { color: #5cb85c; } 100% { color: #e7e97d; } } </style>JS实现HTML动态渐变纯色背景效果图：JS代码：<script> $(function () { var sec = 5; var sz = new Array('rgba(255,20,147,0.6)', 'rgba(152,251,152,0.6)', 'rgba(135,206,250)', 'rgba(0,255,255,0.6)', 'rgba(255,165,0,0.6)', 'rgba(186,85,211,0.6)'); timestar = setInterval(function () { if (sec >= 0) { document.body.style.background = sz[sec]; sec--; } else { sec = 5; } }, 1000); }) </script>CSS代码：body{ color: black background:white; transition: 3s; }

2019年03月26日
2,625 阅读
0 评论
0 点赞