位置: IT常识 - 正文

css 实现太极效果(简单的css特效)

编辑:rootadmin
css 实现太极效果 目录一、简述二、太极效果制作一、简述

推荐整理分享css 实现太极效果(简单的css特效),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css写太极图,css特效代码,用css画太极,html5做个太极图,css实现太极图,用css画太极,css实现太极图,css实现太极图,内容如对您有帮助,希望把文章链接给更多的朋友!

本次主要介绍::after,::before,box-shadow这三个属性。

::after,::before这两个是伪类选择器,box-shaow是用来设置元素的阴影效果 before:向选定的元素前插入内容 after:向选定的元素后插入内容 使用content 属性来指定要插入的内容,值可以为空,但是不能不写,如果不写的话伪类选择器就不会显示出来。

例如以下代码:

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>test</title> <style>div:before{ content:"- 注意-";}</style></head><body><div>我的名字是 Donald</div></body></html>css 实现太极效果(简单的css特效)

伪类选择器的内容是不可选中的

二、太极效果制作

1.第一步:编写html部分 我们只需要定义一个div标签即可,用它来完成太极的制作

<!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>太极</title></head><body> <div></div></body></html>

2.第二步:设置div的样式

body{ background-color: antiquewhite;}div{ width: 150px; height: 300px; margin: 100px auto; background-color: white; border-radius: 50%; border-right: 150px solid black; box-shadow: 0px 0px 30px blueviolet; }

这里的box-shadow的第一个值是x轴移动的值,第二个值是y轴移动的值,第三个值代表模糊度,第四个是阴影的颜色。 效果: 第三步:通过伪类选择器画出两个小圆

div::after,div::before{ content: ""; display: block; border-radius: 50%; margin-left: 75px; border: 50px solid black; background-color: white; width:50px; height: 50px;}

content必须要写出来,值为空也可以,如果不写的话伪类选择器就不会显示。 设置它的边框颜色为黑色,然后就可以和大圆的黑色部分连接起来了。 效果: 4.第四步:将after的边框和背景分别改成白色和黑色。

/*覆盖上面::after的border和background-color两个属性*/div::after{ border: 50px solid white; background-color: black;}

效果: 5.当然你也可以给它个动画让它动起来,当我们鼠标移动到太极上时它就开始转动

div:hover{ animation: mytest 2s linear infinite; }@keyframes mytest { to{ transform: rotate(360deg); }}

CSS完整代码:

body{ background-color: antiquewhite;}div{ width: 150px; height: 300px; margin: 100px auto; background-color: white; border-radius: 50%; border-right: 150px solid black; box-shadow: 0px 0px 30px blueviolet; }div:hover{ animation: mytest 2s linear infinite; }@keyframes mytest { to{ transform: rotate(360deg); }}div::after,div::before{ content: ""; display: block; border-radius : 50%; margin-left: 75px; border: 50px solid black; background-color: white; width:50px; height: 50px;}div::after{ border: 50px solid white; background-color: black;}
本文链接地址:https://www.jiuchutong.com/zhishi/298349.html 转载请保留说明!

上一篇:ReID行人重识别(训练+检测,附代码),可做图像检索,陌生人检索等项目(行人重识别map)

下一篇:震撼,支持多模态模型的ChatGPT 4.0发布了(多模手机)

  • word怎么快速从1拉到100(word怎么快速从1拉到1000)

    word怎么快速从1拉到100(word怎么快速从1拉到1000)

  • 华为p30出现一个圆圈怎么取消(华为P30出现一个白点)

    华为p30出现一个圆圈怎么取消(华为P30出现一个白点)

  • 高通710和骁龙710区别(高通710和骁龙765g哪个好)

    高通710和骁龙710区别(高通710和骁龙765g哪个好)

  • 手机一天用几小时为宜(手机一天用几个小时正常)

    手机一天用几小时为宜(手机一天用几个小时正常)

  • vivox20屏幕刷新率是多少Hz(vivox21屏幕刷新)

    vivox20屏幕刷新率是多少Hz(vivox21屏幕刷新)

  • 修改群昵称别人知道吗(修改群昵称别人能看见吗)

    修改群昵称别人知道吗(修改群昵称别人能看见吗)

  • 手机网页显示不全怎么办(手机网页显示不安全怎么设置)

    手机网页显示不全怎么办(手机网页显示不安全怎么设置)

  • 苹果耳机连安卓声音小(苹果耳机连安卓手机怎么操作)

    苹果耳机连安卓声音小(苹果耳机连安卓手机怎么操作)

  • oppo怎么调双声道(oppo手机怎么设置双音频)

    oppo怎么调双声道(oppo手机怎么设置双音频)

  • 微信的发现面怎么设置(微信发现页怎么打开)

    微信的发现面怎么设置(微信发现页怎么打开)

  • 为什么苹果11不能关机充电(为什么苹果11不能更新16)

    为什么苹果11不能关机充电(为什么苹果11不能更新16)

  • 主板bios坏了会怎么样(主板bios损坏能开机吗)

    主板bios坏了会怎么样(主板bios损坏能开机吗)

  • 华为mate20x5G有耳机孔吗

    华为mate20x5G有耳机孔吗

  • 乐视2微信小号怎么开(乐视2手机微信不能用网络了怎么办)

    乐视2微信小号怎么开(乐视2手机微信不能用网络了怎么办)

  • word的除号怎么打(word中的除号)

    word的除号怎么打(word中的除号)

  • 华为mate30pro怎么截屏(华为mate30pro怎么分屏)

    华为mate30pro怎么截屏(华为mate30pro怎么分屏)

  • 迅雷版权方要求无法下载(迅雷版权方要求无法下载解决方法)

    迅雷版权方要求无法下载(迅雷版权方要求无法下载解决方法)

  • 一个cpu所能执行的全部指令成为(一个cpu所能执行的全部指令组成该cpu的指令系统)

    一个cpu所能执行的全部指令成为(一个cpu所能执行的全部指令组成该cpu的指令系统)

  • 网站规划的原则(简述网站规划的内容)

    网站规划的原则(简述网站规划的内容)

  • vivo哪款有红外线(vivos16pro有红外线功能吗)

    vivo哪款有红外线(vivos16pro有红外线功能吗)

  • 双卡双待怎么开两微信(双卡双待怎么开通第二个微信)

    双卡双待怎么开两微信(双卡双待怎么开通第二个微信)

  • ipad下载东西一直转圈(ipad下载软件为什么一直转圈)

    ipad下载东西一直转圈(ipad下载软件为什么一直转圈)

  • 华为p30pro截屏没反应(华为p30pro截屏不灵敏怎么回事)

    华为p30pro截屏没反应(华为p30pro截屏不灵敏怎么回事)

  • 遥控车遥控器怎么对信号源(遥控车遥控器怎么打开)

    遥控车遥控器怎么对信号源(遥控车遥控器怎么打开)

  • vue 城市选择器(省市区)的使用 element-china-area-data(vue城市列表插件)

    vue 城市选择器(省市区)的使用 element-china-area-data(vue城市列表插件)

  • win11怎么压缩图片? windows11压缩图片大小的技巧(win11怎么压缩图片画质)

    win11怎么压缩图片? windows11压缩图片大小的技巧(win11怎么压缩图片画质)

  • Diffusion扩散模型学习1——Pytorch搭建DDPM实现图片生成(diffusion扩散模型训练时间)

    Diffusion扩散模型学习1——Pytorch搭建DDPM实现图片生成(diffusion扩散模型训练时间)

  • 企业流动资产周转率下降的原因
  • 离线开票时间超时
  • 账簿登记的重要内容
  • 商业汇票贴现金额的计算
  • 税务筹划有哪些内容
  • 润滑油交消费税税率
  • 餐饮无票收入怎么做账
  • 总公司收回未分配利润如何入账?
  • 长期待摊费用的摊销方法
  • 所得税预提多了怎么处理
  • 公司汽车装潢和保养做什么会计科目
  • 怎么在网上申请变更姓名
  • 递延所得税资产和负债怎么理解
  • 税务行业软件
  • 建筑安装工程费用人工费计算方式
  • 长期股权投资的投资收益怎么算
  • 建筑企业预缴企业所得税会计分录
  • 企业所得税是怎么来的?
  • 鸿蒙3.0平板适配名单
  • u盘如何进行杀毒
  • xp系统咋样
  • 主营业务成本是借方增加还是贷方增加
  • 长期负债在报表哪里看
  • 股东投入的资金可以退回吗
  • 什么是资产减值准备计提
  • 建筑工程简易计税可以抵扣吗
  • u启动怎么装机
  • 苹果手机屏幕旋转怎么设置关闭
  • 待摊费用每月怎么摊
  • 金融资产减值的账务处理
  • 芬兰东部的国家有哪些
  • wordpress登录入口
  • 科尼西卡神庙在哪里
  • Bàu Cá Cái的红树林,越南广义 (© Robert Harding World Imagery/Offset)
  • 农民工的职业培训
  • 应付债券的会计处理
  • 药品进销差价的计算公式
  • 基于vue的ui
  • 怎么才能学a1
  • php生成文件函数
  • 应收账款属于会计的哪个要素
  • 个人所得税纳税记录怎么查询
  • 二手车减免增值税的规定
  • 座谈会费用报销明细怎么填写
  • mysql事务引擎
  • python requests检测响应状态码
  • seacms error怎么办
  • python中的比较
  • 个体工商户的免税证明
  • 独立法人企业关系怎么写
  • 租金收入什么时候交房产税
  • 进项抵扣怎么操作
  • 外贸公司美金账户开立要求
  • 英飞拓拟2.1亿出售子公司股权
  • 充值优惠怎么写
  • 应交税费包括哪些科目
  • 个人发票抬头写真名吗
  • 资产类科目一般是什么
  • 电费发票没拿到怎么做账
  • 固定资产清理的税率是多少
  • 企业股东的出资方式
  • mysql random函数
  • 安装sql2000sp4提示挂起
  • sql局部变量标识符
  • xp安装盘复制u盘
  • win7自带防火墙关闭后自己打开啥原因
  • svchost占用
  • bat脚本判断
  • jquery 伪元素
  • jquery设计模式
  • javascript 基础篇2 数据类型,语句,函数
  • 夯实基础怎么读
  • javascript中math.ceil
  • bootstraptable方法
  • js中prototype的作用
  • 浅谈如何实现乡村振兴论文
  • 重庆电子税务局怎么开电子发票
  • 办理养殖照税务登记证
  • 经营网络订单可以退款吗
  • 南通工伤网上申请流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设